Paths Aliases

Instead of using relative import paths, which can be cumbersome, you can use path aliases:

import { Counter } from '../../../../components/Counter'
import { Counter } from '#root/components/Counter'

Where #root/ denotes your project's root directory.

You may need to define your path aliases at up to three different places:

vite.config.js#resolve.alias (for files processed by Vite)
tsconfig.json#compilerOptions.paths (for TypeScript)
package.json#imports (for Node.js files that aren't processed by Vite)

Vite will soon directly support path aliases set over tsconfig.json#compilerOptions.paths, see #1547 - Define path aliases only once.

Example:

/examples/path-aliases

Vite

// vite.config.js
 
export default {
  resolve: {
    alias: {
     "#root": __dirname,
    }
  }
}

The Vite config resolve.alias only applies to files that are processed by Vite. Note that some of your server files may not be processed by Vite, see the Node.js section below.

We recommend following the Node.js convention to prefix path aliases with the special character #.

TypeScript

If you use TypeScript, then TypeScript needs to know about your path aliases.

// tsconfig.json
 
{
  "compilerOptions": {
    "paths": {
      "#root/*": ["./*"]
    }
  }
}

Node.js

If you don't use vike-server then your server files aren't processed by Vite — they are directly executed by Node.js. Therefore, you must configure Node.js to resolve your path aliases:

// package.json
 
{
  "imports": {
    // JavaScript:
    "#root/*": "./*.js",
    // TypeScript:
    "#root/*": "./*.ts"
  }
}

See also:

NodeJS > Subpath imports

/examples/path-aliases/package.json

Vite's vite.config.js#resolve.alias only applies to files that are processed by Vite.

The following files are processed by Vite:

Browser files.

Runtime + files. (Config-time + files aren't processed by Vite.)

Server files, if you use vike-server.

You can use Node.js's built-in support package.json#imports or, alternatively, you can use one of many npm packages such as module-alias. (Example of using module-alias: /examples/path-aliases (@c914dad).)