[Vuejs]-Why getting error 'Uncaught ReferenceError: Vue is not defined' in desktop notification using laravel vue?

by

0👍

you have missing this window.Vue = require("vue"); in

app.js

window.Vue = require("vue");
require('./bootstrap');
Vue.component('home', require('./components/Home.vue'));

put this on your package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue-loader": "^15.9.7",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"

    },
    "dependencies": {
        "laravel-echo": "^1.11.3",
        "pusher-js": "^7.0.3",
        "vue": "^2.6.12"
    }
}

then run npm run update && npm run dev

0👍

  1. First remove node_modules folder and package-lock file by running rm -rf node_modules/ package-lock.json.
  2. Remove vue dependencies vue, vue-loader and vue-template-compiler from package.json file.
  3. Now run npm install.
  4. Install vue and vue-loader by npm install vue vue-loader file-loader
  5. It will install vue 2.6.13 and vue-loader 15.9.7 and file-loader 6.2.0 version package.
  6. Install npm install vue-template-compiler --save

In app.js file

require('./bootstrap');
import Vue from 'vue';
Vue.component('home', require('./components/Home.vue'));

You don’t need to add cdn link in blade file. It will automatically added using webpack

Leave a comment