How to use `@` alias in a Vue 3 / Vite project

If you don't know how to get started with Vue 3 & Vite, I suggest reading my Creating your Vue 3 Project with Vite post.

In my projects I don't like to use full paths to import components & stylesheets.

I very much prefer @/components/HelloWorld than ./src/components/HelloWorld.

Turns out it's not possible to use @ in Vite because it doesn't work like Webpack. Instead you can use /@/ which is just as good.

To configure this alias you simply need to create a vite.config.js file at the root of your project and put this content.

import { resolve } from 'path'

module.exports = {
  alias: {
    '/@/': resolve(__dirname, './src')
  }
}

Of course you can use any alias & path you want.

After configuring this alias you can replace

import './src/assets/css/style.css'

with

import '/@/assets/css/style.css'