Vue3 New Vue

Posted on  by admin

In this article, we will start by looking at how the app initialization code works in Vue 2 apps. Then we’ll see what drawbacks it has and how those are eliminated with the new initialization syntax used in the 3rd version of the Vue framework.

Let’s start with the current way of doing initialization in Vue 2. Usually, in the src/main.js file, we’re bootstrapping the app by calling a new Vue as a constructor for creating an application instance.

This application instance will be serving all the logic throughout the lifetime of our SPA.

That all works well, and for about 3 years, we’ve been using this syntax to bootstrap our Vue apps.

However, in Vue 3 the initialization code syntax has changed.

Let’s have a look at the new syntax first and then take a look at the benefits of using it.

Know About Vue 3 Release Date

In Vue 3, we have a dedicated createApp function to do just that. The createApp function takes a root component (App.vue) as an argument and returns a Vue app instance.

So the simplest app initialization will look like this:.

  • The Vue app instance returned by the createApp is also called an application context object.

  • This object can be used to further add more functionality to the app during the bootstrapping process.

Benefits of the Vue 3 initialization code

Here’s a more advanced initialization code example:. Compared to V2, not much has changed when it comes to adding extra logic, such as plugins and components, right?

You can find a full overview of the supported methods in the Vue 3 documentation. That's good, but there’s one small but important change - we use a dedicated function, not the new Vue instance:.

So why is using that new dedicated createApp function better than using the new Vue constructor? In the Vue 2 app initialization code, we used the Vue object imported from the library to create this and all other new app instances.

With this approach, it was impossible to isolate some of the functionality to only one of the Vue instances since the Vue apps were still using the same Vue object imported from the library.

To demonstrate this, let’s look at the following example - as you can see, both vue2AppOne and vue2AppTwo will have access to a directive called myDirective:.

It might not be so common to create multiple Vue apps in a website or application. But with a project growing in size, being developed by separate teams, and the popularity of frontend microservices in mind you may at some point find yourself doing this as well.

GitHub repos #

And then it will be close to impossible to get another Vue instance with different capabilities using the v2 syntax.

The new syntax in Vue 3 allows us to make the configuration of each app as an individual custom object, since the apps are configured using a dedicated function (createApp) to create the independent instances.

The new architecture gives us the possibility to have two or more isolated Vue instances that do not share any features by default, even if they are created in one file.

Server Side Rendering

However, if you want to share some functionality between 2 instances - you can! In the following example, vue3AppOne and vue3AppTwo share the LocalePlugin but not the SearchInputComponent.

To demonstrate this behavior we’ve created a code repository with 2 simple Vue 3 instances that do not share components and directives thanks to the new createApp syntax.

Have a look at it to play with it locally. In the companion repository, we initialize two Vue 3 apps in 2 different containers on one page template, see public/index.html. One app will serve as a relatively simple header markup, while the other will be capable of using the router and working with the store.

With the Vue 3 syntax, we can easily separate them in the initialization code in the src/main.js file:.

Experimental Features

If you run the app using vue serve you should be able to see both parts working on one page.

In the console output you will see that the Main app has access to vue-router and the store using VueX while the Header app does not. If you are using vue-test-utils (version < 2.0.0) for writing test for your Vue 2 components you may have come across the cases when you need to use the createLocalVue method to avoid polluting the global Vue instance.

We have the same potential issues in our test scenarios as we have in Vue 2 apps. We pollute the global Vue instance when we add components, plugins, etc., and they’re all shared with every available Vue instance.

Vue Vite offers faster startup, hot reload, and compilation speeds than bundler-based solutions during dev.

To work around this issue, we have to use createLocalVue, which (you guessed it) creates a new local Vue instance, that is isolated. This is no longer an issue in Vue 3, since all app extensions: plugins, mixins, and global components do not mutate the global Vue instance.So when using vue-test-utils (version >=2.0.0) with Vue 3, the app init code in the test file will look like this:.

In this article, we looked at the differences between the initialization code for Vue 3 and Vue 2 apps, as well as the benefits of the new approach.

Final Thoughts

TL;DR: Vue 3 is now the new default version as of Monday, February 7, 2022!

Other changes in Vue 3:

Make sure to read the Potential Required Actions section to see if you need to make certain changes before the switch to avoid breakage.

Composition API

When Vue first started, it was just a runtime library. Over the years, it has evolved into a framework that encompasses many sub projects:.

Vue 3 Performance

The core library, i.e. the vue npm package.

The documentation, with enough content to be considered a book. The build toolchain, i.e. Vue CLI, vue-loader and other supporting packages. Vue Router for building SPA.

Vuex for state management. Browser devtools extension for debugging and profiling.

Vetur, the VSCode extension for Single-File Component IDE support. ESLint plugin for static style / error checking. Vue Test Utils for component testing. Custom JSX transforms that leverages Vue's runtime features.

VuePress for Vue-based static site generation.

This is only possible because Vue is a community-driven project.

  • Many of these projects were started by community members who later became Vue team members. The rest were originally started by me, but are now almost entirely maintained by the team (with the exception of the core library).

  • With the core releasing a new major version, all the other parts of the framework needed to move forward together. We also needed to provide a migration path for Vue 2 users. This was a massive undertaking for a community-drive team like Vue.

When Vue 3 core was ready, most other parts of the framework were either in beta or still awaiting update.

We decided to go ahead and release the core so that the early adopters, library authors and higher-level frameworks can start building with it while we worked on the rest of the framework.

At the same time, we kept Vue 2 as the default for documentation and npm installs. This is because we knew that for many users, Vue 2 still provided a more coherent and comprehensive experience until other parts of Vue 3 are refined.

Getting started with Vue 3

This soft launch process took longer than we hoped, but we are finally here: we are excited to announce that Vue 3 will become the new default version on Monday, February 7, 2022.

Outside of Vue core, we have improved almost every aspect of the framework:. Blazing fast, Vite-powered build toolchain. More ergonomic Composition API syntax via