Vue Answers

What does the @ mean inside an import path in Vue.js?

Spread the love

In Vue.js, the @ symbol inside an import path is typically used as a shorthand alias for the src directory in our project.

This convention is often set up by Vue CLI when creating a new Vue.js project.

Here’s how it typically works:

Vue CLI setup

When we create a new Vue.js project using Vue CLI, it sets up webpack aliases to make it easier to import modules from specific directories.

By default, @ is aliased to the src directory, which is where our Vue.js components, assets, and other source files are typically located.

Usage in import paths

We can use @ in import paths to reference files or modules within the src directory without needing to specify the full relative path.

For example:

import MyComponent from '@/components/MyComponent.vue';

In this example, @/components/MyComponent.vue would resolve to src/components/MyComponent.vue.


While @ is a convention commonly used for the src directory, we can customize webpack aliases in our Vue CLI project’s configuration if needed.

Using @ in import paths can make your code cleaner and more concise, especially when dealing with deeply nested directory structures.

It also helps to decouple our components and modules from specific directory structures, making it easier to refactor or reorganize our project in the future.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *