[Vuejs]-How do i properly use pinia store on Vue3 + Pinia + Typescript

by

2👍

✅

So, i figured it out myself by trying multiple things. Nothing is wrong with Pinia.
My major issue was, i started the project without typescript and started to implement it after on "some file"

If you want to enable typescript, switch all your .js file in .ts
This is not needed for .vue
Then here is a list of various i’ve done to make everything work :

Use this tsconfig :

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": "./assets", //this is your working folder, usually ./ only, since i'm using webpack encore + symfony i adapted it
    "types": [
      "webpack-env"
    ],
    "paths": { // very important to make your import @app work
      "@app/*": [
        "*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "assets/**/*.ts",
    "assets/**/*.tsx",
    "assets/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Add shims-vue.d.ts inside your main folder (/assets for me), i still dont know why this is needed but it saved me

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
}

Dont forget this when creating components

<script lang="ts">

Dont forget to turn your main.js or app.js into .ts
And adapt webpack.config.js encore

.addEntry('app', './assets/app.ts')
.addAliases({
     '@app': path.resolve(__dirname, 'assets/') //usefull for @app/ in import, you can also only use @, adapt it on your desire
})

After this you will get a lot of compiled error related to things to adapat in your code.

One trick is .vue file not gonna be imported and throw "module not found"

For example, i had to switch from :

import App from './App';

To :

import App from './App.vue';

If everyone have better practice, feel free to share and i will adapt my answer

👤ThomasL

1👍

Try giving the defineStore a name as a first argument then the options object as the second argument. Just as you did on your authStore.

from:

export const useCountryStore = defineStore( {
    id: "country",
    state: () => ({
        countries: [],
        errors: []
    } as CountryState)
})

to:

export const useCountryStore = defineStore("country", {
    id: "country",
    state: () => ({
        countries: [],
        errors: []
    } as CountryState)
})
👤Andres Abadia

Leave a comment