How to use Vue 3 without the CLI
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.
The fragment will not be rendered in a DOM tree despite being a normal DOM which helps in binding component functionality into a single element without creating a redundant DOM node.
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:.
Other changes in Vue 3:
Ensure you have the latest Vue CLI installed. Create a Vue project using the CLI. Select to use Vue 3 in the option prompts.
Other Minor Vue v3.0 Features and Improvements:
- 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.
How to create a Vue 3 app
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.
How to learn the Composition API
New Custom directives API
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.
Multiple root elements (template syntax )
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.
How to use Vue 3’s Composition API in Vue 2
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.
The only three that raised their hands were on the core team. So would I dive into using this in a new application for a client?
However, would I use this on a side project to get familiar with the syntax?
Just like with Vue 2, you can still load up Vue 3 in a plain HTML file to play with it in your browser.
Here’s a simple example working from an index.html file that you can create yourself on your desktop. Sure enough, when I open my browser I get my name printed out. After getting this to work, I realized that I should be able to use the new Composition API.
Notice the setup method is being used, and it worked!
Now that it’s released, it’s a great time to start learning Vue 3 and even to use it in new projects.
The only problem you might run into is that supporting libraries are still getting updated.
However, if you run into any problems, I’m sure with some googling you’ll find the answer to your problems.
- Vue 3.0 has been officially launched on the 18th of September.
- The project was currently in beta or Release candidate status in early spring.
- It moved towards the general release with the stabilization of the Vue 3 core.
- The team has already published the Vue 3.0 docs and a migration guide to let you know what has changed.
- Vue 3.0 is expected to be smaller, more maintainable, and easier to use, which can be migrated from the existing Vue 2 applications to version 3.0 to use the latest features.
Better TypeScript support
- Vue framework has etched its place in the market and into the hearts of many web developers in the last couple of years. With a lot of exciting features, Vue team has worked on some major additions and improvements that culminates in a beta version of Vue 3, making its way to the final release.
- In this article we will walk you through the new features of Vue 3.0, its updates, setups, and a few more information about the release process and your first steps with Vue 3.0.
- In the last few years, there has been changes in the landscape of Vuejs development.
- The community has grown from a small upstart to a fully-fledged SPA library.
With version 3 on the horizon, the team has added a few supports to augment the library, simplify coding on Vue, and adopt modern techniques of Web development.
Let's dig into the main new features of Vue 3.0 that will guide you through the development of Vue applications.
- The components in Vue 2.0, were created with the object-based Options API.
- One of the new features of Vue 3.0 is that it has added a set of function-based APIs that is called Composition API.
- These APIs have been added to address issues faced by Vue 2 for very large projects.
Should I start learning Vue 2 or Vue 3?
The Composition API has caused the most controversy with the Vue community.
It can be seen as a new way of developing components which is a stark change to the Options API.
The Composition API was launched as a plugin a few months back however in Vue 3.0 it doesn't have to be installed like a plug-in like before.
It is now in-built into the package and can be used without any additional setup.
Vue 3 features & changes
The main reason behind the formulation of Composition API is to improve the quality of the code by allowing decouple features of the logic.
Can I use Vue 3 or should I still use Vue 2 for a new project?
This helps in seeing the features as they were added.
In addition to this, the Composition API makes it easier for the types to infer, that supports the typescript in a better way.
Vue 3.0 lets you build components and allows the new API to co-exist with the Options API, without replacing it.
Composition API provides more flexible code organization and logic reuse capabilities along with other improvements.