Björn
Trouble getting IntelliSense to work for with Pinia in my Nuxt 3 TypeScript project.
The Problem:
When calling a Pinia action like addItem() from my store in a Vue component, IntelliSense doesn’t provide parameter or return type hints, and the action is typed as any.
My stores are written in .ts files, and all actions and state are typed explicitly.
Setup:
"nuxt": "^3.13.2",
"typescript": "^5.3.3",
"pinia": "^2.2.4",
"@pinia/nuxt": "^0.5.5",
Nuxt 3 with @pinia/nuxt module installed and configured in nuxt.config.ts.
Pinia stores are located in the stores/ directory.
TypeScript is set like this in nuxt.config,
typescript: {
strict: true,
typeCheck: true
},
and my tsconfig.json extends ./.nuxt/tsconfig.json:
{
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"paths": { "@/": ["./"] },
"types": ["@pinia/nuxt"]
},
"include": [".//*.vue", ".//*.ts"]
}
Using <script setup lang="ts"> in Vue components.
What I’ve Tried:
Added "types": ["@pinia/nuxt"] to tsconfig.json.
Ran nuxi cleanup to clear cached files.
Restarted TypeScript and the Nuxt dev server.
Explicitly imported the store with import { useMyStore } from '@/stores/myStore'.
example store:
import { defineStore } from 'pinia'
interface MyStoreState {
items: string[]
}
export const useMyStore = defineStore('myStore', {
state: (): MyStoreState => ({
items: []
}),
actions: { addItem(item: string): void { this.items.push(item) } } }) and in the component <script setup lang="ts"> import { useMyStore } from "@/stores/myStore"; const store = useMyStore(); store.addItem(); // IntelliSense shows
actions: { addItem(item: string): void { this.items.push(item) } } }) and in the component <script setup lang="ts"> import { useMyStore } from "@/stores/myStore"; const store = useMyStore(); store.addItem(); // IntelliSense shows
any for addItem
what can be the reason?
For js files in the project i get intellisense working with js doc6 replies