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: - vue@3.0.2 (/home/alejo/playground/parquesFrontend/node_modules/vue/index.js) - vue-template-compiler@2.6.12 (/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 vue-template-compiler@3.0.2 I get this error:
❯ npm install vue-template-compiler@3.0.2 npm ERR! code ETARGET npm ERR! notarget No matching version found for vue-template-compiler@3.0.2. 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?
Advertisement
Answer
To make vue 3 work fine with webpack without using vite or vue cli follow these steps :
- init the
package.json
like :
{ "private": true, "name": "vue-3", "description": null, }
- install the last version of vue :
npm i --save vue@next vue-loader@next
- install also the dev dependencies that includes
@vue/compiler-sfc
which replacesvue-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
- 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 } });
- 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": { ... } }
- 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.