I made a change in my vite.config.ts to allow recognition of index.vue files as entry points.
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
extensions: ['.js', '.ts', '.vue', '.json'] // new line added
},
server: {
port: 3000
}
})
This configuration allows me to do the following:
import MyComponent from '@/components/MyComponent' // automatically imports index.vue
The structure of the MyComponent folder is:
MyComponent
|
+---index.vue
|
+---Subcomponent1.vue
|
+---Subcomponent2.vue
While it works and automatically imports index.vue, there is an issue with its proper resolution. An error occurs:
Cannot find module '../components/MyComponent' or its corresponding type declarations.ts-plugin(2307)
Because of this error, I am unable to navigate to index.vue when attempting to view the definition.
Despite the error, the component is displayed correctly. For a working example, you can check it out here.