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

Techniques for Sharing Data between Vue.js Components

Techniques for Sharing Data between Vue.js Components

With the growing use of component-based architectures, large and complex apps are becoming more common. Larger applications are broken into small reusable chunks that makes it easier to build, maintain, test and understand. As this is done there is a need to share data between these pieces to create functionality and interactivity.
Charles Allotey
Charles Allotey
Vue School Launches Amazing Black Friday Early Bird Deals

Vue School Launches Amazing Black Friday Early Bird Deals

Now is the time to develop your Vue.js skills! Get a yearly plan for a massive 51% off including a free ticket to a live workshop worth $499.
Maria Panagiotidou
Maria Panagiotidou

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