Published: February 02 2023

Vue 3 + Vite - Add Path Alias @ to Src in Vite Config

Tutorial built with Vue 3.2.45 and Vite 2.9.15

This is a super quick post to show how to configure a path alias to map the at symbol (@) to the project src folder in Vue 3 with Vite. The path alias enables import statements to be prefixed with @ (e.g. import { MyComponent } from '@/components';) and removes the need for long relative paths (e.g. import { MyComponent } from '../../../components';).

The way to do it is by adding the following config to your vite.config.js:

resolve: {
    alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
    }
}

The alias is added under the resolve property of the config and maps the @ symbol to the src path using the fileURLToPath node utility function.

Example Vite Config with Path Alias @

This is an example Vue 3 vite.config.js file that includes a path alias @ to the project src directory.

import { fileURLToPath, URL } from '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))
        }
    }
});

 


Need Some Vue 3 Help?

Search fiverr to find help quickly from experienced Vue 3 freelance developers.


Follow me for updates

I share all new blog posts on Twitter and Facebook.


When I'm not coding

My wife and I are attempting to ride motorcycles around Australia and vlog about it on YouTube.


Comments


Supported by