Vue Upgrade Next

Posted on  by admin
Version: v6

Modified6 months ago. I am trying to integrate vuejs 3 to an existing project which uses webpack.


What is a migration build?

  1. I read about vue-loader, so I am trying to use it. In the official documentation I have this:.
  2. Every time a new version of vue is released, a corresponding version of vue-template-compiler is released together.

The compiler's version must be in sync with the base vue package so that vue-loader produces code that is compatible with the runtime.

  1. This means every time you upgrade vue in your project, you should upgrade vue-template-compiler to match it as well. So, when I try to compile I get this error:.
  2. But when I try to install [email protected] I get this error:. How can I solve this problem? 127127 bronze badges. 1,91222 gold badges2222 silver badges3838 bronze badges.

Not the answer you're looking for? Browse other questions tagged javascriptvue.jswebpackvuejs3vue-loader or ask your own question.

  1. 2222 silver badges3838 bronze badges. To make vue 3 work fine with webpack without using vite or vue cli follow these steps :.
  1. init the package.json like :. install the last version of vue :.
  1. install also the dev dependencies that includes @vue/compiler-sfc which replaces vue-template-compiler. create or edit your webpack.config.js with following content :.
  1. Add dev script to run your app :. Fill the index.html with following content :. Finally run npm run dev the visit http://localhost:8080/. for a ready to use project try to clone this REPOSITORY which built by following the steps above.

3838 bronze badges.

63.1k1414 gold badges102102 silver badges127127 bronze badges.

102102 silver badges127127 bronze badges. I believe you need to use [email protected] with Vue 3.

In Vue 3 the SFC compiler package is no longer vue-template-compiler but compiler-sfc (check here).

  1. I completely agree with the suggestion to use Vue CLI to manage the project - it will save you lot of trouble managing all the dependencies (especially now when Vue 3 ecosystem is trying to catch-up with Vue 3 release and lots of tool even don't have any migration documentation vue-loader).

If you are not able to use CLI because your existing project already have Webpack config, you can still use CLI as a guide.

Just generate new project on the side, use vue inspect command to inspect Webpack config it is using and package.json for required dependencies..

Uninstalling the migration build

  1. 33 gold badges4343 silver badges6767 bronze badges. 6767 bronze badges.
  1. I upgraded a Vue2 app to Vue3 manually and I was getting this error when I was running the unit tests after upgrading all of the dependencies.

To get everything working, I also had to fix Jest's config file.

  1. In jest.config.js set the "transform" property to:.
  1. The dependencies I used to get started were from a new Vue3.0 app I created using the cli. Below are the dependencies that my cli settings got me:. Note that for my cli settings, the .eslintrc.js also has some minor changes in it for Vue3.

In a fresh install the cli makes the "extends" property as below:.

  1. 22 gold badges1010 silver badges1414 bronze badges. 1414 bronze badges. I've just installed the Webpacker gem in rails that comes with nice tasks that install Vue. Nevertheless, it installs Vue 2.x with its loader and template compiler..

  2. To bump everything to Vue 3 aand its dependencies simply run:. You're using Vue 3 now. 22 gold badges4444 silver badges5353 bronze badges.

  3. 5353 bronze badges. Warning regarding Previous Versions. The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove vue-cli.

  4. Node Version Requirement. Vue CLI 4.x requires Node.js version 8.9 or above (v10+ recommended).

You can manage multiple versions of Node on the same machine with n, nvm or nvm-windows.

To install the new package, use one of the following commands.

You need administrator privileges to execute these unless npm was installed on your system through a Node.js version manager (e.g. After installation, you will have access to the vue binary in your command line. You can verify that it is properly installed by simply running vue, which should present you with a help message listing all available commands.

  1. You can check you have the right version with this command:. To upgrade the global Vue CLI package, you need to run:.

Upgrade commands shown above apply to the global Vue CLI installation.

To upgrade one or more @vue/cli related packages (including packages starting with @vue/cli-plugin- or vue-cli-plugin-) inside your project, run vue upgrade inside the project directory:.

  1. Before you begin with Quasar, it is a good idea to get acquainted with ES6 and have a fairly good knowledge about how Vue 3 works.

(Quick overview of ES6 and ES6 complete list of features – don’t worry, you don’t need to understand ALL of ES6).

For devs experienced with reactive UIs, the Vue 3 documentation itself takes a half-day at most to read top-to-bottom and will help you understand how Quasar components can be used and configured.

Installing the migration build

  1. If you are a total beginner to Vue and reactive UI libraries and want a good tutorial, we recommend you take a look at Vue and Quasar video tutorials.

Handling Vue Methods


  1. After reading the Vue documentation, let’s clear up some of the most frequently asked questions, like “How can I use Quasar components, Vue properties, methods and events”. You’ll be building your Quasar app using *.vue files which contain multiple sections: template (HTML), script (Javascript) and style (CSS/SASS/SCSS/Stylus/Less) all in the same file. For the