Vue 3 is nearly upon us! If you'd like to get a head start, join me as we review everything you need to know. We'll discuss the new composition API, portals, Vite, and so much more!
Meet Vite
Vite is an alternative to the Vue CLI and uses Vue 3 by default. It's noticeably faster because it does NOT use webpack to bundle your code
Fragments or Multiple Root Nodes
Vue 3 no longer requires a single root node for components. Let's review a few examples, while also discussing how to satisfy the linting rules in VSCode.
The Composition API
The Composition API is the biggest change in Vue 3. It’s completely optional but worth understanding in case you come across code that uses it
Composition API: Refs
In this episode, we'll take a look at making use of refs instead of reactive for our reactive state, while briefly discussing the pros and cons of each
Composition API: Logic Extraction and Reuse
Let's have a look at how to extract repeated code into reusable composition functions. This feature is meant to be a cleaner and preferred alternative to using mixins.
Teleport
Teleport was ported from the popular Portal Vue library in Vue 2. It allows you to render pieces of code in other parts of the DOM.
Multiple V-Models
Let’s take a look at the ability to add multiple v-models on a custom component. This allows you to keep state synchronized between a parent and a child component.
Multiple V-Models
Let’s take a look at the ability to add multiple v-models on a custom component. This allows you to keep state synchronized between a parent and a child component.
Global API Changes
Let's discuss the Global API changes in Vue 3, and the ability to use instance methods as opposed to global methods in Vue 2. Further, we'll take a look at Global Tree Shaking.
Upgrading to Vue 3
Let's discuss some of the breaking changes in Vue 3 and go over the alternatives. We'll take a look at Initializing Vue, Event API changes, filters, inline templates, and v-model.
Suspense
Suspense allows us to render fallback content before your component is ready to be rendered. It’s a cleaner way to handle loading states using a Suspense component
<script setup> and <style vars>
Let's take a look at script setup, which helps reduce the boilerplate in the setup method for the composition
Using TypeScript in Vue 3
Under the hood, Vue's internal codebase was re-written in TypeScript. If you would like to use TypeScript with Vue 3, it has never been easier.
Using Vue 3 with Laravel
In this episode, you'll learn how to use Vue 3 in a Laravel app. We'll leverage the latest version of Laravel Mix, and make sure to initialize Vue 3 using the createApp method.
این دوره هنوز به پایان نرسیده است و در آینده درس های دیگری به آن افزوده خواهد شد.