Setup ViteJS and Typescript to use import alias

Vite + Typescript import aliases.md

Vite + Typescript import aliases

This is how you add import aliases in a vite project that uses Vite.

It requires you to update both your tsconfig file as well as your vite config so that vite knows how to import the aliases.

tsconfig.jcon

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}

vite.config.ts

import { defineConfig } from 'vite'
import path from 'path'
import { fileURLToPath } from 'url'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

export default defineConfig({
  // add this resolve config
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './src'),
    },
  },
})