Back Button Frameworks
What's New in Vue 3

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!
Intermediate
14 episodes
1h 42m
Begin
14
Latest Episode in This Series

Added 5 months ago

Using Vue 3 with Laravel

In this episode, you'll learn how to use Vue 3 in a Laravel app. We'll leverage the...

Watch
What's New in Vue 3

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!
Begin
14
Latest Episode in This Series

Added 5 months ago

Using Vue 3 with Laravel

In this episode, you'll learn how to use Vue 3 in a Laravel app. We'll leverage the...
Watch

Your Teacher | Andre Madarang

Visit Website
https://laracasts.s3.amazonaws.com/avatars/andre-madarang.jpg's avatar
Greetings! I'm Andre, a full-stack web developer and Laracasts instructor. My other hobbies include playing guitar, videography and gaming.

  1. Section 1 Updates

    1. Meet Vite

      Free Episode Run Time 4:10

      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.

    2. Fragments or Multiple Root Nodes

      Free Episode Run Time 4:11

      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.

    3. The Composition API

      Free Episode Run Time 10:57

      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.

    4. Composition API: Refs

      Free Episode Run Time 6:29

      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.

    5. 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.

    6. Teleport

      Free Episode Run Time 6:00

      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.

    7. Change Detection

      Free Episode Run Time 2:55

      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.

    8. Multiple V-Models

      Free Episode Run Time 5:26

      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.

    9. Global API Changes

      Free Episode Run Time 4:24

      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.

    10. Upgrading to Vue 3

      Free Episode Run Time 10:56

      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.

    2.

  2. Section 2 Experimental Features

    1. Suspense

      Free Episode Run Time 8:22

      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.

    2. <script setup> and <style vars>

      Free Episode Run Time 5:20

      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.

    3.

  3. Section 3 TypeScript

    1. Using TypeScript in Vue 3

      Free Episode Run Time 9:21

      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. Set the language to "ts" in your script, wrap your component in a defineComponent method, and you're ready to go. TypeScript offers the benefits of a typed language to JavaScript, making your code less error prone during development.

    4.

  4. Section 4 Laravel Usage

    1. Using Vue 3 with Laravel

      Free Episode Run Time 8:10 View Source

      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.

Want us to email you occasionally with Laracasts news?