Vue3 This

Posted on  by admin

With Vue 3 is now released and it’s easy to start coding up Vue 3 applications today.

In this article, we’ll look at how to learn Vue 3 from scratch, how easy it is to start using the Composition API in your Vue 2 code, how to migrate an app from Vue 2 to Vue 3, how to create a Vue 3 app from scratch using the CLI, and how to start playing with it.

If you’re interested in learning Vue from scratch starting with Vue 3 here’s what I’d recommend:.

Watch through Vue Mastery’s free Intro to Vue 3 Course. Code along with the course, using the CDN. Try installing Vue 3 using the CLI.

See below for the instructions. Take a read through the official docs. You can find the Beta version of the docs here.

Vue 3’s biggest feature (so far) is the Composition API, which provides an alternate syntax for writing larger components, reusing code across components, and using TypeScript.

This is not the new way we code components in Vue 3. This is an alternative syntax that you might choose to use based on the three reasons I formerly mentioned.

Luckily for you, this feature can be used in your Vue 2 application today by using the Vue Composition API plugin.

If you’re unsure why you’d want to use the Composition API, definitely check out my Why the Composition API video.

I’m going to assume that you already know the why, and you’re ready to start playing with the new syntax.

If you think you might want to migrate your Vue 2 app completely to Vue 3 the Vue documentation team has been working hard on a migration guide.

Here at Vue Mastery we’ve produced a Vue 2 to Vue 3 course which visually teaches the differences.

If you’re not working inside an existing Vue 2 project, you’ll want to follow these steps:. Ensure you have the latest Vue CLI installed.

Create a Vue project using the CLI. Select to use Vue 3 in the option prompts. Ensure the project works. And then run the development server with:. Then go to the appropriate local server in a browser, perhaps http://localhost:8080.

You now have a fresh Vue 3 application and you can start playing with the Vue 3 Composition API:.

  • First and foremost, there’s my Vue 3 Essentials course which teaches all the basics. Then there’s the Composition documentation as well as the API that Evan You posted online.
  • I’d also recommend downloading our Vue 3 Cheat Sheet, which has all the syntax you’ll need to start memorizing the new API. If you’re working with a new application and want to see the API in action quickly, feel free to copy and paste the following code into your App.vue.
  • Do note the difference in the import line depending on if you’re inside a Vue 3 app or Vue 2 app with the Composition API plugin.
  • If you then fire up your server you should see the following:. If you haven’t seen this syntax before, let me give you a quick rundown. In Vue 3 we’ll need to get used to doing more imports.
  • This allows bundlers to do something called tree shaking, which means if you don’t use the feature, it won’t be included in your production bundle.
  • The setup method is where all the action happens. This method gets called after beforeCreate and right before the created lifecycle hooks.
  • Notice that setup is the only function inside our component. Our code no longer gets organized by options (i.e. data, methods, computed, lifecycle hooks). ref refers to a Reactive Reference. Here we’re taking an integer and wrapping it in an object, which makes it reactive. This is simply a component method that we will call from our template. It increments capacity.value, because capacity is a reactive reference, and the value of the reference is held in the value property.

This is necessary to make a primitive (integer) reactive.

  • When using the Composition API, we must return the variables and functions that our template needs access to.
  • Yes, this is more verbose, but it also means we can control what gets exposed and we can easily trace where a property is defined.
  • This makes our component more maintainable. The rest of the code (basically the template) is nothing new.
  • If you want to watch some video lessons that teach this syntax, you’ll find that in our Vue 3 Essentials course.
  • Since your composition functions contain code you want to reuse across components, you’ll likely encapsulate them into their own files and place them in a directory.
  • I’ve seen developers create folders called use, composable, and hooks to contain these composition functions.
  • To see some examples of what these look like in the wild, Core Vue Team Member Thorsten Lünborg created some code samples you can read.

Recently in Vue London, I polled the audience to see if anyone was using the composition API in production with the Vue 2 plugin.