Install vue 3.0 in laravel Install vue 3.0 in laravel laravel laravel

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