Skip to content

Path Aliases

· 1 min · configuration

Path alias configuration:

tsconfig.json
{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist", "node_modules", ".local"],
  "types": ["node"],
  "compilerOptions": {
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

Aliases work in files processed by Astro, Vite, and TypeScript under the normal project pipeline. Config files (e.g., vite.config.ts, unocss.config.ts and plugins.ts) that run before Vite alias resolution may need relative imports instead.

Example:

src/components/MyComponent.tsx
import { formatDate } from '~/utils/helpers';


function MyComponent() {
  return <div>{formatDate(new Date())}</div>;
}


export default MyComponent;