CODEWITHSUNDEEP
vuexvuejs3
user14131782
user14131782

Reputation: 1068

Uncaught TypeError: Vue is not a constructor - Vuex with Vue 3

I'm trying to use Vuex with Vue 3. Here is my code in main.js:

import { createApp } from 'vue';
import App from './App.vue';
import Vuex from 'vuex';

const app = createApp(App);
app.use(Vuex);

const store = new Vuex.Store({
    state: {
        counter: 0
    }
});

app.store(store);
app.mount('#app');

When trying this, I get the following error:

Uncaught TypeError: Vue is not a constructor

I have tried using the syntax recommended in the official Vuex docs but this does not work either. Does anyone know how to fix this?

Upvotes: 2

Views: 7845

Answers (1)

Esteban Borai
Esteban Borai

Reputation: 2509

This error occurs because you are calling new Vuex.Store as is done for Vuex 3.

If you are using Vue 3, you must install Vuex 4 by issuing:

# npm
npm install --save vuex@next

# yarn
yarn add vuex@next

Then build your store and "inject" it to the Vue instance as follows:

import { createStore } from 'vuex';
import { createApp } from 'vue';

const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

const app = createApp({ /* your root component */ });

app.use(store);

Refer to Vuex docs for more details:

Vuex 4 for Vue 3

Upvotes: 5

Related Questions