Problem installing Pinia on Vue 2.7 with Typescript

[souellet13]

Hi!
I'm trying to install Pinia on Vue.js 2.7/Typescript, but I get an error when I add the required code to add to main.ts in order to install the plugin and inject the created pinia at the root of the app.

What I added to the main.ts:

`import { createPinia, PiniaVuePlugin } from "pinia"

Vue.use(PiniaVuePlugin)

const pinia = createPinia()

export default new Vue({
i18n,
vuetify,
router,
store,
pinia,
render: (h) => h(App)
}).$mount("#app")`

And I get the following compilation error:

`src/main.ts:58:3
TS2769: No overload matches this call.

Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin> | undefined): CombinedVueInstance<...>', gave the following error.

Argument of type '{ i18n: VueI18n; vuetify: Vuetify; router: VueRouter; store: Store<IRootState>; pinia: Pinia; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin>'.

  Object literal may only specify known properties, and 'pinia' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin>'.

Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin> | undefined): CombinedVueInstance<...>', gave the following error.
Argument of type '{ i18n: VueI18n; vuetify: Vuetify; router: VueRouter; store: Store; pinia: Pinia; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin>'.

  Object literal may only specify known properties, and 'pinia' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin>'.

Overload 3 of 3, '(options?: ComponentOptions<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 7 more ..., ComponentOptionsMixin> | undefined): CombinedVueInstance<...>', gave the following error.

Argument of type '{ i18n: VueI18n; vuetify: Vuetify; router: VueRouter; store: Store<IRootState>; pinia: Pinia; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 7 more ..., ComponentOptionsMixin>'.

  Object literal may only specify known properties, and 'pinia' does not exist in type 'ComponentOptions<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 7 more ..., ComponentOptionsMixin>'.

56 |   router,
57 |   store,

58 | pinia,
| ^^^^^
59 | render: (h) => h(App)
60 | }).$mount("#app")
61 |`

Does someone has an idea about what is missing in order to fix this? It seems that some types are missing, but I thought the plugin adds the the required types? Thanks!

[souellet13]

Out of curiosity, is there other people here that use the same stack that I have?
Pinia + Vue 2.7 + Typescript

I ask the question because I wonder if Pinia works with Typescript only in Vue 3.
The installation instructions on the Pinia website aren't working for us out of the box.

In order to fix this error, I had to redeclare locally the pinia option:

declare module "vue/types/options" {
  interface ComponentOptions<V> {
    pinia?: Pinia;
  }
}

The one in the pinia.d.ts file isn't found by the ts linter even if I declare types: ["pinia"] in the tsconfig.

[rudolfbyker]

Out of curiosity, is there other people here that use the same stack that I have?

I have recently started migrating my Vuex stores to Pinia in Vue 2.7 with Typescript. I have not reached the point of testing yet. Will do so soon, and let you know if it works for me.

[souellet13]

Cool! Thanks!

[rudolfbyker]

My project works with Vue 2.7 + Typescript + Pinia. I did not see the errors that you see. Can you copy your project to a temp folder, and remove as much as possible, until you have the smallest possible set of files that demonstrates the problem?

[qiaodou-w]

i have the same problem， do you solve the problem?

[mbelluzzi]

Did you get any fix working ? I'm having the exact same problem on typescript + vue 2.7 + pinia