koehr.ing/content/til/2022-02-22.md

{ .title = "Adding aliases in vite with typescript needs the same alias in tsconfig", .date = @date("2022-02-22T00:00:00"), .author = "koehr", .draft = false, .layout = "til.html", .description = "", .tags = [], .custom = { .source = "" }, }

For example:

The following vite.config.ts:

import { fileURLToPath, URL } from "url"
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "~": fileURLToPath(new URL("./src", import.meta.url)),
      "~component": fileURLToPath(new URL("./src/components", import.meta.url)),
      "~composable": fileURLToPath(new URL("./src/composables", import.meta.url)),
      "~lib": fileURLToPath(new URL("./src/lib", import.meta.url)),
    }
  }
})

will need this in tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "~/*": [ "./src/*" ],
      "~component/*": [ "./src/components/*" ],
      "~composable/*": [ "./src/composables/*" ],
      "~lib/*": [ "./src/lib/*" ]
    }
  }
}

The asterixes in the syntax are important (alias/* => ./path/*).