Having Trouble Finding Vue Component Definition Using Vite Alias in Import Path

Question

When I click on the Component within the code snippet:

import Component from '@/components/Component.vue';

I am unable to navigate to its definition when using vite alias. Seeking a potential solution.

Answer 1

Answer №1

If you choose to set up Vue using npm init Vite, it is important to create an alias for the use of @.

In your vite.config.js file:

import path from 'path';
export default defineConfig({
    plugins:[...],
    resolve:{
        '@': path.resolve(__dirname,'./src')
    },
})

Additionally, ensure that you review the tsconfig.json file if you are working with TypeScript or using Visual Studio Code.

In your tsconfig.js file:

   "paths":{
      "@/*": [
        "./src/*"
      ]
   }

It's worth noting that src can be modified to suit any environment paths.

Answer 2

If you choose to set up Vue using npm init Vite, it is important to create an alias for the use of @.

In your vite.config.js file:

import path from 'path';
export default defineConfig({
    plugins:[...],
    resolve:{
        '@': path.resolve(__dirname,'./src')
    },
})

Additionally, ensure that you review the tsconfig.json file if you are working with TypeScript or using Visual Studio Code.

In your tsconfig.js file:

   "paths":{
      "@/*": [
        "./src/*"
      ]
   }

It's worth noting that src can be modified to suit any environment paths.