# Adding aliases in vite with typescript needs the same alias in tsconfig

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/*`).