DEV Community

loading...

How to setup Vue 3 with Laravel 8 ?

boussadjra profile image Brahim Originally published at stackoverflow.com Updated on ・1 min read

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
Enter fullscreen mode Exit fullscreen mode

npm i
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

webpack.mix.js should contain :

    const mix = require('laravel-mix');

    mix.js('resources/js/app.js', 'public/js').vue();

Enter fullscreen mode Exit fullscreen mode

The minimum content of resources/js/app.js

import { createApp } from 'vue';
import App from './components/App.vue'
createApp(App).mount("#app")
Enter fullscreen mode Exit fullscreen mode

In order to avoid this confusing steps clone this REPOSITORY and start coding.

if this article helped you please don't to forget to upvote my answer here

Discussion (1)

pic
Editor guide
Collapse
sp86 profile image
Sergiy Chystiakov

Hello. I am trying to run your example with a command 'npn run watch-poll'. The console throws an error prntscr.com/x4mqd0. I took the code from the github. Commands 'composer install' and 'npm install' completed. What could be the reason? Thank you in advance.