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 doc3 Replies
Hi @Björn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in your question and the knowledge sources available, it seems you're experiencing issues with TypeScript IntelliSense for Pinia stores in your Nuxt 3 project. Let's address this problem step by step.
1. First, ensure that your Pinia store is properly typed. Your example store looks correct, but make sure all your stores follow this pattern.
2. The issue might be related to how Nuxt 3 handles auto-imports and type generation. According to the Nuxt 3 documentation on TypeScript (https://nuxt.com/docs/guide/concepts/typescript), Nuxt generates TypeScript declaration files automatically, including those for Pinia stores.
3. To ensure that these auto-generated types are recognized, make sure your
tsconfig.json extends the Nuxt-generated configuration:
This looks correct in your setup.
4. One possible reason for the IntelliSense issues could be that the types are not being generated correctly or are not up to date. Try running the following command to regenerate the Nuxt types:
5. If the problem persists, it might be related to how you're importing and using the store. Instead of importing the store directly, try using the useStore composable provided by Pinia:
6. Make sure you have the latest versions of Nuxt, Pinia, and the Pinia Nuxt module. Your versions seem to be relatively recent, but you might want to check for any updates.
7. If you're still experiencing issues, it might be worth checking if there are any conflicts with other TypeScript configurations or plugins in your project.
8. Lastly, as mentioned in the Nuxt documentation on TypeScript (https://nuxt.com/docs/guide/concepts/typescript#type-checking), you can enable type checking at build or development time by setting the typeCheck option in your nuxt.config.ts:
You've already done this, which is good.
If none of these solutions work, the issue might be more complex and could require further investigation. In that case, you might want to create a minimal reproducible example and seek help from the Nuxt or Pinia community forums.
Remember that JavaScript files using JSDoc for type hints might work differently from TypeScript files, which could explain why you're seeing different behavior for JS files in your project.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@566315935485526016> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I got IntelliSense working! , The issue was caused by conflicting extensions. Disabling some unnecessary Vue-related extensions fixed it.
Interestingly, IntelliSense worked in my other Nuxt 3 projects with the same extensions, so the conflict seems to have been project-specific. Maybe i18 had something to do with it also