Install vue 3.0 in laravel

by

Update 2022

enter image description here

For those who prefer Vite, there’s a tool called Laravel Vite which is a project based on PHP package, Vite plugin and preset, you could install it as follows :

npx @preset/cli apply laravel:vite

This removes the default config in the Laravel fresh project.

For further details please check the different section in official docs

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");

More Related Contents:

  1. Vue js in laravel [closed]
  2. Vue.js 3 Event Bus
  3. How to fix ‘Unchecked runtime.lastError: The message port closed before a response was received’ chrome issue?
  4. Add global variable in Vue.js 3
  5. How to pass laravel CSRF token value to vue
  6. Laravel VueJs : `router-view` does not render the component
  7. Vue.js – validation fails for file upload in axios when multipart/form-data used in header
  8. How to fix the error “You may need an appropriate loader to handle this file type”
  9. Is it possible to change props value from method in Vue component?
  10. What should I do to use this webpacked JS library? [closed]
  11. How can I solve “Interpolation inside attributes has been removed. Use v-bind or the colon shorthand”? Vue.js 2
  12. Can Anyone Explain Laravel 5.2 Multi Auth with Example
  13. [Vue warn]: Property or method is not defined on the instance but referenced during render
  14. Chrome redirects .dev to https
  15. Laravel Eloquent vs DB facade: Why use Eloquent and decrease performance? [closed]
  16. Undefined variable: errors in Laravel
  17. how to fix ‘Access to XMLHttpRequest has been blocked by CORS policy’ Redirect is not allowed for a preflight request only one route
  18. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  19. Composer error while installing Laravel: ‘mbstring’ is missing?
  20. TypeError: this.getOptions is not a function
  21. How to pass a PHP variable to Vue component instance in Laravel blade?
  22. Vue v-on:click does not work on component
  23. How to include css files in Vue 2
  24. What is difference between use env(‘APP_ENV’), config(‘app.env’) or App::environment() to get app environment?
  25. How to access model hasMany Relation with where condition?
  26. Add sql table column before or after specific other column – by migrations in Laravel 4.1
  27. Laravel 7 Sanctum logout
  28. PHP: Generate Laravel Paginator Secure (HTTPS) Links
  29. Vue JS returns [__ob__: Observer] data instead of my array of objects
  30. Vue.js – Add class to clicked button

Leave a Comment