posva / unplugin-vue-router

Next Generation file based typed routing for Vue Router
https://uvr.esm.is
MIT License
1.47k stars 67 forks source link

The newly created ". vue" file does not recognize automatically imported hooks generated through "unplugin auto import", such as "onMounted" #361

Closed CoderWeiJ closed 3 months ago

CoderWeiJ commented 3 months ago

Issue Description:

The newly created ". vue" file does not recognize automatically imported hooks generated through "unplugin auto import", such as "onMounted".VSCode must be restarted to recognize.

Steps to Reproduce:

  1. install package
    pnpm add -D unplugin-vue-router unplugin-auto-import vue-router
  2. config
    
    // the vite plugins

import vue from '@vitejs/plugin-vue'; import AutoImport from 'unplugin-auto-import/vite'; import VueRouter from 'unplugin-vue-router/vite'; import { VueRouterAutoImports } from 'unplugin-vue-router'; import type { PluginOption } from 'vite';

export function createPlugins(env: ImportMetaEnv): PluginOption[] { return [ VueRouter({ routesFolder: ['src/views'], dts: 'src/types/auto/auto-router.d.ts', extensions: ['.page.vue', '.vue'], }), vue(),

AutoImport({
  imports: [
    VueRouterAutoImports,
    {
      'vue-router/auto': ['useLink'],
    },
    'vue',
  ],
  dts: 'src/types/auto/auto-imports.d.ts'
}),
    ];

}


```typescript
// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router/auto';

const router = createRouter({
  history: createWebHistory(),
});

export default router;

// main.ts
import { createApp } from 'vue';

import App from './App.vue';

import router from '@/router';

createApp(App)
  .use(router)
  .mount('#app');
/* tsconfig.json */
{
  "compilerOptions": {
    "target": "ES2020",
    "jsx": "preserve",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "useDefineForClassFields": true,

    "baseUrl": ".",
    "module": "ESNext",

    /* Bundler mode */
    "moduleResolution": "bundler",
    "paths": {
      "@/*": ["src/*"]
    },
    "resolveJsonModule": true,
    "types": ["unplugin-vue-router/client"],
    "allowImportingTsExtensions": true,

    /* Linting */
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noEmit": true,
    "isolatedModules": true,
    "skipLibCheck": true
  },
  "references": [{ "path": "./tsconfig.node.json" }],
  "include": ["build/**/*.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.d.ts"]
}
  1. the problem image