Banner
Home / Blog / Import Aliases in Vite
Import Aliases in Vite

Import Aliases in Vite

Daniel Kelly
Daniel Kelly
September 9th 2021

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 🙂

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Latest Vue School Articles

Migrating from Vue 2 To Vue 3 – New Features

Migrating from Vue 2 To Vue 3 – New Features

Welcome back, fellow Vue.js enthusiasts, in this part of our series we take the next step as we dive headfirst into the exciting world of some of Vue 3's brand-new features!
Charles Allotey
Charles Allotey
Vue.js Forge 3 in Review

Vue.js Forge 3 in Review

This article gives a review of some of the major events and experiences from the recently ended Vue.js Forge Episode 3 where developers from all over the world got to work with ChatGPTand Vue.js.
Charles Allotey
Charles Allotey

© All rights reserved. Made with ❤️ by BitterBrains, Inc.