
Notice the setup method is being used, and it worked! A Few Take-Aways 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’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. I’d also recommend downloading our Vue 3 Cheat Sheet, which has all the syntax you’ll need to start memorizing the new API. Then there’s the Composition documentation as well as the API that Evan You posted online.

Then go to the appropriate local server in a browser, perhaps You now have a fresh Vue 3 application and you can start playing with the Vue 3 Composition API: How to learn the Composition APIįirst and foremost, there’s my Vue 3 Essentials course which teaches all the basics. Ensure the project works $ cd project_nameĪnd then run the development server with: $ npm run serve Select to use Vue 3 in the option prompts.Ĥ. Ensure you have the latest Vue CLI installed $ npm install -g $ yarn global add Create a Vue project using the CLI $ vue create project_nameģ. If you’re not working inside an existing Vue 2 project, you’ll want to follow these steps:ġ. Here at Vue Mastery we’ve produced a Vue 2 to Vue 3 course which visually teaches the differences. 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. I’m going to assume that you already know the why, and you’re ready to start playing with the new syntax. If you’re unsure why you’d want to use the Composition API, definitely check out my Why the Composition API video. Luckily for you, this feature can be used in your Vue 2 application today by using the Vue Composition API plugin. This is an alternative syntax that you might choose to use based on the three reasons I formerly mentioned. This is not the new way we code components in Vue 3. 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. How to use Vue 3’s Composition API in Vue 2

You can find the Beta version of the docs here. Code along with the course, using the CDN Watch through Vue Mastery’s free Intro to Vue 3 CourseĢ. If you’re interested in learning Vue from scratch starting with Vue 3 here’s what I’d recommend:ġ. 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. With Vue 3 is now released and it’s easy to start coding up Vue 3 applications today.
