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

Question

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?

Looking at my package.json they are vue ^3.0.0-0 and vuex ^3.5.1 — user14131782
– user14131782, Commented Aug 24, 2020 at 12:10
The package.json is not a reliable way to check the exact installed version. That said, it looks like you have Vuex 3 when you need Vuex 4. See github.com/vuejs/vue-next#vuex — skirtle
– skirtle, Commented Aug 24, 2020 at 12:15

Leo Borai · Accepted Answer · 2020-11-15 22:01:59Z

5

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

answered Nov 15, 2020 at 22:01

Leo Borai

2,5571 gold badge24 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related