Nuxt•13mo ago

Typescript autocompletion in ".vue" files "broken"

TL;DR TS

import

import

import

import autocompletion works in ".ts" files, but no longer works in ".vue" files

Note: Had been saving the application locally, but didn't have a

git commit

git commit

git commit

git commit that I could roll back to (in case it's code/config related)

Hi All,

Currently using VS Codium.

I'm not sure what's gone wrong, but I am no longer getting proper autocomplete functionality in ".vue" files. All ".ts" files work just fine.

For example, if I begin typing

import MyCustomCom ...

import MyCustomCom ...

import MyCustomCom ...

import MyCustomCom ... in ".ts" files, I'll begin to get component and file recommendations. However, this functionality is completely gone in ".vue" files.

I did update to the latest version of "Vue Official" in the last 24 hours, and that seems to be when things went wrong. However, I've tried force rolling back to earlier versions, but nothing changes.

My current (now veeeeeery different) "tsconfig.json" looks like so:

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "types": [
      "@types/node",
      "@nuxt/image",
      "@nuxt/types",
      "@trpc/client",
      "@trpc/server",
    ],
    "baseUrl": ".",
    "paths": {
      "@@/app/*": [
        "./app/*"
      ],
      "~~/server/*": [
        "./server/*"
      ]
    }
  },
  "include": [
    ".nuxt/nuxt.d.ts",
    "./types/**/*",
    "./app/**/*.{ts,js}",
    "./server/**/*.{ts,js}" // Removed the trailing comma here
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "types": [
      "@types/node",
      "@nuxt/image",
      "@nuxt/types",
      "@trpc/client",
      "@trpc/server",
    ],
    "baseUrl": ".",
    "paths": {
      "@@/app/*": [
        "./app/*"
      ],
      "~~/server/*": [
        "./server/*"
      ]
    }
  },
  "include": [
    ".nuxt/nuxt.d.ts",
    "./types/**/*",
    "./app/**/*.{ts,js}",
    "./server/**/*.{ts,js}" // Removed the trailing comma here
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "types": [
      "@types/node",
      "@nuxt/image",
      "@nuxt/types",
      "@trpc/client",
      "@trpc/server",
    ],
    "baseUrl": ".",
    "paths": {
      "@@/app/*": [
        "./app/*"
      ],
      "~~/server/*": [
        "./server/*"
      ]
    }
  },
  "include": [
    ".nuxt/nuxt.d.ts",
    "./types/**/*",
    "./app/**/*.{ts,js}",
    "./server/**/*.{ts,js}" // Removed the trailing comma here
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "types": [
      "@types/node",
      "@nuxt/image",
      "@nuxt/types",
      "@trpc/client",
      "@trpc/server",
    ],
    "baseUrl": ".",
    "paths": {
      "@@/app/*": [
        "./app/*"
      ],
      "~~/server/*": [
        "./server/*"
      ]
    }
  },
  "include": [
    ".nuxt/nuxt.d.ts",
    "./types/**/*",
    "./app/**/*.{ts,js}",
    "./server/**/*.{ts,js}" // Removed the trailing comma here
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

nuxt.config.ts looks like so:

import { defineNuxtConfig } from "nuxt/config"
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },
  devtools: { enabled: false },
  typescript: {
    strict: true,
    typeCheck: true
  },
  build: {
    transpile: ['trpc-nuxt']  // Add these
  },
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  compatibilityDate: '2024-12-21'
})

import { defineNuxtConfig } from "nuxt/config"
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },
  devtools: { enabled: false },
  typescript: {
    strict: true,
    typeCheck: true
  },
  build: {
    transpile: ['trpc-nuxt']  // Add these
  },
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  compatibilityDate: '2024-12-21'
})

import { defineNuxtConfig } from "nuxt/config"
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },
  devtools: { enabled: false },
  typescript: {
    strict: true,
    typeCheck: true
  },
  build: {
    transpile: ['trpc-nuxt']  // Add these
  },
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  compatibilityDate: '2024-12-21'
})

import { defineNuxtConfig } from "nuxt/config"
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },
  devtools: { enabled: false },
  typescript: {
    strict: true,
    typeCheck: true
  },
  build: {
    transpile: ['trpc-nuxt']  // Add these
  },
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  compatibilityDate: '2024-12-21'
})

What completely obvious configuration am I missing?

kapa.ai•12/22/24, 8:24 PM

Hi @humblemodulo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•12/22/24, 8:24 PM

----------------------
Based on the information provided in your question and the knowledge sources available, it seems you're experiencing issues with TypeScript autocompletion in .vue.vue files in your Nuxt project. Let's address this problem step by step:

First, make sure you have the lang="ts"lang="ts" attribute in your <script><script> tag in .vue.vue files. As mentioned in this Stack Overflow answer (https://stackoverflow.com/questions/78004968), forgetting to add this attribute can cause TypeScript-related issues in Vue Single File Components (SFCs):

<script setup lang="ts">
// Your TypeScript code here
</script>

<script setup lang="ts">
// Your TypeScript code here
</script>

Ensure that you have the latest version of the Volar extension installed in VS Codium. Volar is the official Vue language support extension for Visual Studio Code (and VS Codium). Nuxt TypeScript docs (https://nuxt.com/docs/guide/concepts/typescript#type-checking) recommend using the official Vue extension for accurate types for your components.
Make sure you have enabled Volar's Takeover Mode. This is crucial for TypeScript support in Vue files. You can do this by disabling the built-in TypeScript extension for your workspace.
Your `tsconfig.json` extends the Nuxt-generated TypeScript configuration, which is good. However, you might want to be cautious about overriding paths, as mentioned in the **Nuxt TSConfig documentation** (<https://nuxt.com/docs/guide/directory-structure/tsconfig>):"Overwriting options such as `"compilerOptions.paths"` with your own configuration will lead TypeScript to not factor in the module resolutions from `./.nuxt/tsconfig.json`. This can lead to module resolutions such as `#imports` not being recognized."
In your `nuxt.config.ts`, you have enabled strict mode and type checking, which is good for catching type errors:

typescript: {
  strict: true,
  typeCheck: true
}

typescript: {
  strict: true,
  typeCheck: true
}

kapa.ai•12/22/24, 8:24 PM

If the problem persists, you might want to try generating a fresh .nuxt/tsconfig.json.nuxt/tsconfig.json file. You can do this by running npx nuxi preparenpx nuxi prepare in your project directory.
Lastly, make sure you have the necessary TypeScript and Vue-related dependencies installed in your project, including typescripttypescript and vue-tscvue-tsc.

If after trying these steps you're still experiencing issues, it's possible that there might be a bug or compatibility issue with the specific versions of Nuxt, TypeScript, or Volar you're using. In that case, you might want to check the Nuxt GitHub issues (https://github.com/nuxt/nuxt/issues) for any reported problems similar to yours or consider opening a new issue there.

Remember, the TypeScript integration in Nuxt is quite complex and involves multiple components working together. Sometimes, issues can arise from version mismatches or conflicts between these components.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•12/22/24, 8:24 PM

@924898811162288160 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

humblemoduloOP•12/23/24, 6:37 AM

Literally had to nuke my extensions and reinstall only relevant ones. Everything works now (at least in the context of Nuxt/Vue). I'll begin reinstalling other extensions later and post back if I find the culprit.

Neon•12/25/24, 8:44 AM

Yesterday vue extention got an update for new typescript compatibility stuff, so it should work now, although it doesnt highlight the components still

Typescript autocompletion in ".vue" files "broken"

Similar Threads

Similar Threads

Similar Threads