Typescript autocompletion in ".vue" files "broken"

TL;DR TS

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

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 ...

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"
  ]
}

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'
})

What completely obvious configuration am I missing?

Nuxt•14mo ago•

6 replies

humblemodulo

Typescript autocompletion in ".vue" files "broken"

TL;DR TS

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

import MyCustomCom ...

import MyCustomCom ...

{
  "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'
})

What completely obvious configuration am I missing?

Typescript autocompletion in ".vue" files "broken"

Typescript autocompletion in ".vue" files "broken"

Similar Threads

Similar Threads

Similar Threads