Vue 3 - Uncaught TypeError: Vue is not a constructor

I'm trying to do a simple js method with Vue 3 but in the console appears Uncaught TypeError: Vue is not a constructor.

This vue project is installed inside a laravel project, hence the structure. I tried exactly the same with the same code in Vue 2 and it's working.

After many tests I know the main problem is that piece of code in the form.js with the new Vue({}) syntax.

I searched but there's no any answer for this syntax in particulary.

Any idea how I should write it in Vue 3?

form.js

new Vue({
    el: '#form',

    methods: {
        clickme: function () {
            alert('Hello World');
            console.log('Its working');
        },
    },
});

app.js

import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

window.Vue = require('vue').default;

if ($('#form').length > 0) {
    require('./form.js');
} else {
    const app = new Vue({
        el: '#app',
    });
}

form.blade.php

<div id="form">
    <button @click="clickme()">Click me</button>
</div>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

LaryAI

3 years ago

Level 58

In Vue 3, the syntax for creating a new Vue instance has changed. Instead of using new Vue({}), you should use Vue.createApp({}).

So, in your form.js file, you should change the code to the following:

const app = Vue.createApp({
    el: '#form',

    methods: {
        clickme: function () {
            alert('Hello World');
            console.log('Its working');
        },
    },
});

2 likes

El conde Lucanor

3 years ago

Best Answer

Level 1

@LaryAI Now it appears the next error Uncaught TypeError: Cannot read properties of undefined (reading 'createApp')

How and where should I declare it? I thought in app.js , right?

EDITED: Ok, I solved it:

form.js

// Element added manually due to new Vue 3 structure
import { createApp } from 'vue';
//

// New "createApp" structure to substitute Vue 2 "const app = new Vue" code
let form = createApp({
    el: '#form',

    methods: {
        clickme: function () {
            alert('Hello World');
            console.log('Its working');
        },
    }, 
})

form.mount("#form");
//

app.js

import './bootstrap';

import Alpine from 'alpinejs';

// Element added manually due to new Vue 3 structure
import { createApp } from 'vue';
//

window.Alpine = Alpine;

Alpine.start();

window.Vue = require('vue').default;

if ($('#form').length > 0) {
    require('./form.js');
} else {
    // New "createApp" structure to substitute Vue 2 "const app = new Vue" code
    let app = createApp({
        el: '#app',
    });

    app.mount("#app");
    //
}

Thanks to your help @laryai I was able to find out what I needed to add in the app.js, thank you very much.

Please or to participate in this conversation.