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 { 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 🙂

Related Courses

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.

Comments

Latest Vue School Articles

How to Access Vue Refs Defined in Script Setup within Unit Tests

How to Access Vue Refs Defined in Script Setup within Unit Tests

Need to access a component’s data defined within script setup? In this article we’ll teach you how! But be warned you probably want to approach your test a little differently.
Daniel Kelly
Daniel Kelly
48 Hours of Unlimited Vue.js Learning: Your Guide to Vue School’s Free Weekend

48 Hours of Unlimited Vue.js Learning: Your Guide to Vue School’s Free Weekend

Vue School’s Free Weekend is coming! For 48 hours, you’ll get free access to over 1300 lessons across 65 expert courses. Whether you’re a beginner or advanced, this is your chance to explore new Vue.js topics.
Maria Panagiotidou
Maria Panagiotidou

Our goal is to be the number one source of Vue.js knowledge for all skill levels. We offer the knowledge of our industry leaders through awesome video courses for a ridiculously low price.

More than 200.000 users have already joined us. You are welcome too!

Follow us on Social

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