I have Vue 3 app with TypeScript. I use AutoImport (unplugin-auto-import) in this way:
vite.config.ts:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
AutoImport({
// dts: true,
// targets to transform
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/, // .md
],
imports: [
'vue',
'vue-router',
'pinia',
{
'@/stores': ['useStores'],
},
{
'@/common/constants': ['useConstants'],
},
],
}),
Components({
resolvers: [ElementPlusResolver()],
dts: true,
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
})
But, all keywords in .vue files are underscored with red lines.
Why is this happening if they are autoimported?
try to configure tsconfig.app.json, include auto-imports.d.ts file
{
... ...,
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "./auto-imports.d.ts"],
... ...
}