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:

```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:

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

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