Contents of the "vite.config.ts file

Using path aliases in a Vue.js project

The developer experience on Vue.js projects can greatly improve using a simple configuration. Here is how you will make sure your imports are not relatively declared.

I find this trick very handy once you have set it up.

In JavaScript projects

Add the alias to jsconfig.json to have intellisense super powers and the advatange of absolute paths:

1
2
3
4
5
6
7
8
{
  "compilerOptions": {
     ...
     "paths": {
      "@/*": ["./src/*"]
    }
    ...
}

In TypeScript projects

  1. Install the package: @types/node as dev dependency.
  2. Import the fileURLToPath and URL
1
import { fileURLToPath, URL } from "node:url";
  1. Add the resolve option in vite.config.ts :
1
2
3
4
5
   resolve: {
       alias: {
         "@": fileURLToPath(new URL("./src", import.meta.url)),
       },
     },
  1. Add the alias to tsconfig.json to avoid ESLint complaints and have intellisense super powers:
1
2
3
4
5
6
7
8
{
"compilerOptions": {
  ...
  "paths": {
    "@/*": ["./src/*"]
  }
  ...
}
License GPLv3 | Terms
Built with Hugo
Theme Stack designed by Jimmy