Configure an import alias in Vite and TypeScript

Configure the alias in Vite, then add the matching TypeScript path so the editor resolves the same imports.

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Add this to tsconfig.app.json, or the tsconfig that includes your source files.

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

Merge this into your existing configuration. The example assumes the config file sits at the project root.

import Button from '@/components/Button.vue'

Vite alias documentation.