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))
}
}
});
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Twitter at https://twitter.com/jason_watmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some Vue 3 Help?
Search fiverr to find help quickly from experienced Vue 3 developers.