'Vue.js 3 and typescript : Property '$store' does not exist on type 'ComponentPublicInstance

Can't find anything to solve this seemingly obvious issue.

Just upgraded from Vue 2 to Vue 3 and Vuex with Typescript.

this.$store doesn't seem to be accessible, despite following the Vue 3 instructions.

ERROR in src/components/FlashMessages.vue:28:25 TS2339: Property '$store' does not exist on type 'ComponentPublicInstance<{}, {}, {}, { getAllFlashMessages(): Word; }, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, { getAllFlashMessages(): Word; }, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>'.

    26 |     computed: {
    27 |         getAllFlashMessages (): FlashType {
  > 28 |             return this.$store.getters.getFlashMessages;
       |                         ^^^^^^
    29 |         },
    30 |     },
    31 |

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import './assets/styles/index.css'

const app = createApp(App)

app.use(store)
app.use(router)
app.mount('#app')

store.ts

import { createStore } from 'vuex'
import FlashType from '@/init'

export default createStore({
    state: {
        flashMessages: [] as FlashType[],
    },

    getters: {
        getFlashMessages (state) {
            return state.flashMessages
        }
    },

FlashMessages.vue

<script lang="ts">
import { defineComponent } from "vue";
import FlashType from "@/init";

export default defineComponent({
    name: "FlashMessages",

    data () {
        return {};
    },

    computed: {
        getAllFlashMessages (): FlashType {
            return this.$store.getters.getFlashMessages;
        },
    },

init.ts

export type FlashType = {
    kind: 'success' | 'error';
    message: string;
    time: number;
}

Any wisdom appreciated :)

File structure

├── .editorconfig
├── client
│   ├── babel.config.js
│   ├── CONTRACTS.md
│   ├── cypress.json
│   ├── jest.config.js
│   ├── package.json
│   ├── package-lock.json
│   ├── postcss.config.js
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   └── robots.txt
│   ├── README.md
│   ├── src
│   │   ├── App.vue
│   │   ├── assets
│   │   │   ├── logo.png
│   │   │   └── styles
│   │   │       └── index.css
│   │   ├── components
│   │   │   ├── admin
│   │   │   │   ├── AdminAdd.vue
│   │   │   │   ├── AdminList.vue
│   │   │   │   ├── AdminWord.vue
│   │   │   │   ├── EmotionAdd.vue
│   │   │   │   ├── EmotionsList.vue
│   │   │   │   └── Emotion.vue
│   │   │   └── FlashMessages.vue
│   │   ├── init.ts
│   │   ├── main.ts
│   │   ├── registerServiceWorker.ts
│   │   ├── router
│   │   │   └── index.ts
│   │   ├── shims-vue.d.ts
│   │   ├── store
│   │   │   └── index.ts
│   │   └── views
│   │       ├── About.vue
│   │       ├── Admin.vue
│   │       ├── Emotions.vue
│   │       └── Home.vue
│   ├── tsconfig.json
│   └── vue.config.js
├
└── server
    ├── api
    ├── api.bundle.js
    ├── index.ts
    ├── logger
    │   └── logger.ts
    ├── models
    ├── nodemon.json
    ├── package.json
    ├── package-lock.json
    ├── router
    │   ├── db.ts
    │   └── emotions.ts
    ├── tsconfig.json
    └── webpack.config.js

This is my first time properly using eslint, so I'm not sure if I've set it up correctly.. I ended up with a different tsconfig in /client and /server directories.

client/tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": "./",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Solution 1:^[1]

I had a similar error but in VS Code. As of Vuex 4, this is the preferred method:

// vuex-shim.d.ts

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // Declare your own store states.
  interface State {
    count: number
  }

  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

Docs: https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#typescript-support

And I had to disable then enable Vetur again.

Solution 2:^[2]

Try adding

app.provide("$store", store);

in your main.ts file before mounting. This method works on my side and the final code looks like

...
let app = createApp(App);
app.provide("$store", store);
app.use(store);
app.mount("#app");

Solution 3:^[3]

For those using VS Code and Vue with TypeScript via vue-class-component and/or vue-property-decorator there may be no need in adding more type declarations. The issue could be solved with tsconfig.json . Namely with its include property.

You will see missing this.$store definition error if the file you are seeing this error is not in the list of globs in the include property.

Note as in the code below if you omit the tests/.... glob from the include array the error will appear in the files matcing this glob. If you add the glob back the error will disappear.

   "include": ["src/**/*.ts", "src/**/*.vue", "tests/e2e/.fixtures/**/*.ts"]

Solution 4:^[4]

I did the same thing that the solutions above showed, but in addition, I created a globalProperty for the app.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const app = createApp(App);
app.config.globalProperties.$store = store;
app.use(router).mount('#app');

Solution 5:^[5]

I had a lot of problems trying to configure vuex with typescript and options API. Regardless of the API you use, I strongly recommend you to use Pinia as it is a typescript ready solution and is very similar to Vuex

Solution 6:^[6]

Vuex doesn't provide typings for this.$store property out of the box. When used with TypeScript, you must declare your own module augmentation. Reference

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	jeti
Solution 2	Old Panda
Solution 3	Valentine Shi
Solution 4	Lucas Kenji
Solution 5	Mithsew
Solution 6	????

'Vue.js 3 and typescript : Property '$store' does not exist on type 'ComponentPublicInstance

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]