Vuejs 3 webpack : Problem with vue-template-compiler

Question

I am trying to integrate vuejs 3 to an existing project which uses webpack. I read about vue-loader, so I am trying to use it.

In the official documentation I have this:

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. 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:

Vue packages version mismatch:  - [email protected] (/home/alejo/playground/parquesFrontend/node_modules/vue/index.js) - [email protected] (/home/alejo/playground/parquesFrontend/node_modules/vue-template-compiler/package.json)  This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler. If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest. 

But when I try to install [email protected] I get this error:

❯ npm install [email protected] npm ERR! code ETARGET npm ERR! notarget No matching version found for [email protected]. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist.  npm ERR! A complete log of this run can be found in: npm ERR!     /home/alejo/.npm/_logs/2020-11-17T02_52_46_458Z-debug.log 

How can I solve this problem?

Answer 1

To make vue 3 work fine with webpack without using vite or vue cli follow these steps :

1. init the package.json like :

{     "private": true,     "name": "vue-3",     "description": null,     } 

2. install the last version of vue :

npm i --save vue@next vue-loader@next

3. install also the dev dependencies that includes @vue/compiler-sfc which replaces vue-template-compiler

npm i -D @vue/compiler-sfc css-loader file-loader mini-css-extract-plugin  url-loader webpack webpack-cli webpack-dev-server 

• @vue/compiler-sfc
• css-loader
• file-loader
• mini-css-extract-plugin
• url-loader
• vue-loader
• webpack
• webpack-cli
• webpack-dev-server

4. create or edit your webpack.config.js with following content :

const path = require("path"); const { VueLoaderPlugin } = require("vue-loader"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");  module.exports = (env = {}) => ({   mode: env.prod ? "production" : "development",   devtool: env.prod ? "source-map" : "cheap-module-eval-source-map",   entry: [     require.resolve(`webpack-dev-server/client`),     path.resolve(__dirname, "./src/main.js")   ].filter(Boolean),   output: {     path: path.resolve(__dirname, "./dist"),     publicPath: "/dist/"   },   resolve: {     alias: {       // this isn't technically needed, since the default `vue` entry for bundlers       // is a simple `export * from '@vue/runtime-dom`. However having this       // extra re-export somehow causes webpack to always invalidate the module       // on the first HMR update and causes the page to reload.       vue: "@vue/runtime-dom"     }   },   module: {     rules: [       {         test: /\.vue$/,         use: "vue-loader"       },       {         test: /\.png$/,         use: {           loader: "url-loader",           options: { limit: 8192 }         }       },       {         test: /\.css$/,         use: [           {             loader: MiniCssExtractPlugin.loader,             options: { hmr: !env.prod }           },           "css-loader"         ]       }     ]   },   plugins: [     new VueLoaderPlugin(),     new MiniCssExtractPlugin({       filename: "[name].css"     })   ],   devServer: {     inline: true,     hot: true,     stats: "minimal",     contentBase: __dirname,     overlay: true,     injectClient: false,     disableHostCheck: true   } });  

5. Add dev script to run your app :

{     "private": true,     "scripts": {         "dev": "webpack-dev-server"     },     "dependencies": {         "vue": "^3.0.2"     },     "name": "vue-3",     "description": null,     "devDependencies": {       ...     } }  

6. Fill the index.html with following content :

<link rel="stylesheet" href="/dist/main.css" /> <div id="app"></div> <script src="/dist/main.js"></script> 

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.