Import Aliases in Vite

Written by Daniel Kelly

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 { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  resolve:{
    alias:{
      '@' : path.resolve(__dirname, './src')
    },
  },
  plugins: [vue()]
})

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 🙂

Learn Vue.js 3 With Vue School

Leave a Reply

Your email address will not be published. Required fields are marked *

Up Next:

What is a Vue.js Composable?

What is a Vue.js Composable?