Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Muhammad.shahid.shah's avatar

Uncaught ReferenceError: Vue is not defined

i watched the tutorial lets "flash messaging with vue - lets build a forum", i installed npm but at the end of installation there were some errors, but still i tried some vue code and it compiles and worked until i try to create instance of vue and create globals in bootstrap.js. here my bootstrap.js and app.js and also note: in console i get the following error(Uncaught ReferenceError: Vue is not defined at Object.VERSION (app.js:1025) at webpack_require (app.js:20) at Object. (app.js:980) at webpack_require (app.js:20) at Object. (app.js:965) at webpack_require (app.js:20) at app.js:63 at app.js:66)

app.js:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('flash', require('./components/Flash.vue'));

const app = new Vue({
    el: '#app'
});

bootstrap.js:

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


window.events = new Vue();

window.flash = function (message) {
    window.events.$emit('flash', message);
};


0 likes
2 replies
Muhammad.shahid.shah's avatar
Level 2

solved: in bootstrap.js i didn't required vue

we have to add the following to bootstrap.js

window.Vue = require('vue');

9 likes

Please or to participate in this conversation.