Install vue 3.0 in laravel
Update October 2020
Now with laravel-mix v6
you could run Vue 3 code in Laravel App:
1. Installation :
npm i -D laravel-mix@next vue@next @vue/compiler-sfc vue-loader@next
then
npm i
before doing that try to remove the following dependencies from package.json
which some of them are added by php artisan ui vue
:
vue
vue-template-compiler
laravel-mix
2. Config:
in the package.json
change the scripts to the following ones:
"scripts": { "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "production": "mix --production"}
webpack.mix.js
should contain :
const mix = require('laravel-mix');mix.js('resources/js/app.js', 'public/js').vue();
The minimum content of resources/js/app.js
import { createApp } from 'vue';import App from './components/App.vue'createApp(App).mount("#app")
In order to avoid this confusing steps clone this REPOSITORY and start coding.
OLD ANSWER
Laravel doesn't support vue 3 yet, but you could try out laravel-mix-vue3 :
Installation :
npm install @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-mix-vue3 --save-dev
Usage :
Configure in webpack.mix.js
as follows :
const mix = require("laravel-mix");require("laravel-mix-vue3");mix.vue3("resources/js/app.js", "public/js");
Update
Laravel mix v6 is now in beta, use the guide here to upgrade and use Vue v3.
Old answer
You don't need to use the vue3 plugin. I got working as follows:
Install Vue3, Vue3 loader and the compiler:
npm install vue@next vue-loader@next @vue/compiler-sfc
Then in your app.js import vue from the esm bundle:
import { createApp } from 'vue/dist/vue.esm-bundler.js';
Then create your app and mount it:
createApp({}).mount('#app')
Now just build your assets as usual with mix
npm run dev