Frameworks
What's New in Vue 3
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!
Latest Episode in This Series
Added 3 days ago
<script setup> and <style vars>
Let's take a look at script setup, which helps reduce the boilerplate in the setup method for...
What's New in Vue 3
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!
Latest Episode in This Series
Added 3 days ago
<script setup> and <style vars>
Your Teacher | Andre Madarang
-
-
EPISODE 1
Run Time 4:10
FreeMeet 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 and instead makes use of native ES module imports. We’ll be using Vite throughout this series so it's a good idea to quickly get familiar with it.
EPISODE 2Run Time 4:11
FreeFragments 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.
EPISODE 3Run Time 10:57
FreeThe 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. In this lesson, we'll convert a simple Todo app using the traditional options API to the composition API.
View the source code for this episode on GitHub.
EPISODE 4Run Time 6:29
FreeComposition 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.
View the source code for this episode on GitHub.
EPISODE 5Run Time 15:20
FreeComposition 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.
View the source code for this episode on GitHub.
EPISODE 6Run Time 6:00
FreeTeleport
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.
EPISODE 7Run Time 2:55
FreeChange Detection
Let's take a look at the change detection caveats for objects and arrays that were present in Vue 2. Vue 3 fixes these as they move towards a proxy-based API for change detection.
EPISODE 8Run Time 5:26
FreeMultiple 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.
EPISODE 9Run Time 4:24
FreeGlobal 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.
EPISODE 10Run Time 10:56
FreeUpgrading 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.-
EPISODE 11
Run Time 8:22
FreeSuspense
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 and different slots for each of the states.
Note: This is an experimental feature and subject to change.
EPISODE 12Run Time 5:20
Free<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 API. We'll also review
<style vars>which allows us to reference state inside of our style declaration.
*Series still in development. Check back often for updates.
The most concise screencasts for the working developer, updated daily.
There's no shortage of content at Laracasts. In fact, you could watch nonstop for days upon days, and still not see everything!
-