Alias

[Small-Systems]

I'm having trouble using alias with your vite config file. Previously I would use:

'@': fileURLToPath(new URL('./src', import.meta.url))

and then <image src="@/assets/image.jpg />

However, this doesn't work with your setup (/src is not getting prepended to the path). Maybe it's because of the root option?

I've also tried "@": path.resolve(__dirname, "./src")

Basically I can not get images/files/fonts in the assets folder to resolve correctly. Any ideas/hints? Thank you (and thanks for the great work on this).

[johannschopplich]

You can use the built-in alias ~ instead:

https://github.com/johannschopplich/kirby-vue3-starterkit/blob/28ffbb6f5baf7b3f854eafcf1c82bf4afe75ff9e/vite.config.js#L19

If you want to add @ for personal preference, you can add it to the list of current prefixes:

resolve: {
  alias: {
    "@/": `${resolve(__dirname, root)}/`,
    "~/": `${resolve(__dirname, root)}/`,
  },
},

Also, make sure to follow the static assets instructions to let Vite resolve assets for local development.