Vue.js 3 and typescript : Property '$store' does not exist on type 'ComponentPublicInstance
Next to shims-vue.d.ts
file create another file called shims-vuex.d.ts
with the following content :
import { Store } from '@/store';// path to store filedeclare module '@vue/runtime-core' { interface ComponentCustomProperties { $store: Store; }}
For more check the Typescript support section for more details
I had a similar error but in VS Code.As of Vuex 4, this is the preferred method:
// vuex-shim.d.tsimport { 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.
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");