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

ottaviane's avatar

vue on Laravel 7.0 blocked after npm audit fix

Hi all, I'm working on a project with laravel 7.0 and vue . After I made a npm operation (npm audit fix) I begun to obtain a lot of problems with npm compiler. I solved those confilcts, now my npm compiles all, but my site is over with this message in the console: "Uncaught TypeError: Vue is not a constructor" What appens? I'm not able to solve it. This is some code: the webpack.mix.js

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

mix
 .vue()
 /* CSS */
 .sass('resources/sass/main.scss', 'public/css/oneui.css')
 .sass('resources/sass/oneui/themes/amethyst.scss', 'public/css/themes/')
 .sass('resources/sass/oneui/themes/city.scss', 'public/css/themes/')
 .sass('resources/sass/oneui/themes/flat.scss', 'public/css/themes/')
 .sass('resources/sass/oneui/themes/modern.scss', 'public/css/themes/')
 .sass('resources/sass/oneui/themes/smooth.scss', 'public/css/themes/')
 .sass('resources/sass/Documents/documents_layout.scss', 'public/css/') //scs custom per il layout base

.js('resources/js/Login/appLogin.js', 'public/js')
.js('resources/js/Template/appTemplate.js', 'public/js')
.js('resources/js/main/mainApp.js', 'public/js')
.js('resources/js/oneui/app.js', 'public/js/oneui.app.js')
.js('resources/js/Template/Appunti/appAppunti.js', 'public/js/appunti.app.js')

.options({
    processCssUrls: false
});

and this is my mainApp.js

require('../bootstrap');

window.Vue = require('vue');
window.Vuex = require('vuex');

//PUNTO D'INGRESSO
Vue.component('main-component', require('./mainComponent.vue').default);
Vue.component('left-toolbar', require('./Left/leftToolbar.vue').default);
Vue.component('left-list', require('./Left/leftList.vue').default);
Vue.component('right-toolbar', require('./Right/rightToolbar.vue').default);
Vue.component('right-list', require('./Right/rightList.vue').default);
Vue.component('doc-adder', require('./Right/docAdder.vue').default);
Vue.component('wyswig', require('./Right/wyswig.vue').default);
Vue.component('icon', require('./Right/icon.vue').default);
Vue.component('allegati', require('./Right/allegati.vue').default);

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

and this is my 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.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} 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');

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    return response;
 }, function (err) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    console.log('Errore intercettato',err.response);
    console.log("guest:",guest);
    if(err.response.status === 401 || err.response.status === 409 || err.response.status === 411){
        if(!guest){
            location.reload();
            //return Promise.reject(err);
        }
    }
 });
 //avviamo un interceptor di sessione scaduta ... ogni 60 secondi interroga il backend
 setInterval(function(){ axios.get("/getIfSessionIsValid")}, 60000);


//  import Vue from vue;

window.Vue = require('vue');
window.Vuex = require('vuex');

//eventi
export const EventBus = new Vue();

May you help me please? What code can I insert in this post? Hi. Thanks

0 likes
6 replies
wingly's avatar
wingly
Best Answer
Level 29

Try changing this window.Vue = require('vue'); to window.Vue = require('vue').default;

2 likes
MaverickChan's avatar

delete node_modules directory , then run npm install again

1 like
sr57's avatar

@ottaviane

Nice to to know that it works, you should also close the thread by choosing the best answer.

Please or to participate in this conversation.