Import Aliases in Vite

Perhaps, you're moving from Vue CLI to Vite as your build tool of choice and in the process you realize that the @ alias no longer works 😱.

This was exactly my experience, as well as my reaction. How in the world was I going to avoid such nasty looking imports as this ../../../someComponent.vue?

After a bit of googling and tinkering I found that the solution is actually fairly straightforward.

Vite takes a resolve.alias config option that it passes on to @rollup/plugin-alias as it's entries option. All that's needed is to pass it an absolute path to the src directory of our project.

// vite.config.js
import { fileURLToPath, URL } from 'node: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))
    }
  }
})
})

Give your development command a restart and you should be off to the races!

Bonus Tips

As a bonus, here are a couple other things I've run into moving from Vue CLI to Vite, that I hope will save you a bit of time 🙂

• require won't work anymore for importing images (see docs for handling static assets in Vite)
• when importing single file components you must include the .vue at the end

Related Courses