vuejs3auto-import

AutoImport (unplugin-auto-import) and TypeScript errors


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.

enter image description here

enter image description here

Why is this happening if they are autoimported?


Solution

  • try to configure tsconfig.app.json, include auto-imports.d.ts file

    {
      ... ...,
      "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "./auto-imports.d.ts"],
      ... ...
    }