How to import index.vue by just mentioning the parent directory name

[Ericteen]

If I need to import an index.js file which is in directory named dir1, I can import it using import file1 from '@/components/dir1' but somehow it doesn't work with .vue extension files.

I have to explicitly mention the file name such as import Foo from @/components/Foo/index.vue.

What changes do I have to make in the settings in order to import the .vue extension file without mentioning the filename?

vite.config.js file is below

export default defineConfig({
  plugins: [vue()],
  resolve: {
    extensions: ['.js', '.ts', '.vue']
  }
})

[patak-dev]

Answer in discord: https://discord.com/channels/804011606160703521/804061748051050507/812242578275303424

[zedrdave]

that channel no longer seem accessible… any way to get the answer here?