What Does the @ Mean Inside an Import Path in VueJS?

The @ symbol in VueJS is an alias for the src directory in a Vue project, simplifying the import paths. By default, Vue CLI projects come with this alias already set up. It allows you to write cleaner, shorter paths when importing files from the src directory.

Complete Setup and Configuration

Step 1: Create a Vue CLI Project

If you don’t already have a Vue project, create one using Vue CLI:

• Install Vue CLI globally if not already installed:

npm install -g @vue/cli

• Create a new Vue project:

vue create my-vue-app
cd my-vue-app

Project Structure:

Updated Dependencies:

"dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  }

Step 2: Use @ Alias in a Component

• Here’s an example of how you can use the @ alias in your Vue project.
• Import a component using the @ alias
• In the App.vue file, you can import MyComponent.vue using the @ alias instead of a relative path.

<!-- src/App.vue -->
<template>
  <div id="app">
    <MyComponent />
  </div>
</template>

<script>
// Import the component using the @ alias
import MyComponent from "@/components/MyComponent.vue";

export default {
  name: "App",
  components: {
    MyComponent,
  },
};
</script>

• Add code to "MyComponent.vue" (located in src/components/)

<!-- src/components/MyComponent.vue -->
<template>
  <div>
    <h2>This is MyComponent</h2>
  </div>
</template>

<script>
export default {
  name: "MyComponent",
};
</script>

<style scoped>
h2 {
  color: blue;
}
</style>

Step 3: Customize Aliases

By default, the @ alias points to the src folder. If you want to add more aliases or modify the existing ones, you can do so in the vue.config.js file.

• Create/Edit vue.config.js: In the root of your project (if the file doesn’t already exist), create a vue.config.js file.

// vue.config.js
const path = require("path");

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
        "@assets": path.resolve(__dirname, "src/assets"), // New alias for assets folder
        "@components": path.resolve(__dirname, "src/components"), // Alias for components folder
      },
    },
  },
};

• Use Custom Aliases: You can now use your custom aliases throughout your project. For example, if you want to import assets or components with the newly defined aliases:

// In any component, using custom aliases
import Logo from '@assets/logo.png';  // For assets
import MyComponent from '@components/MyComponent.vue';  // For components

Step 4: Run the Application

Once you have set up everything, you can run the development server to check if everything is working fine.

npm run serve

Output:

Benefits of the @ alias

• Avoid long relative paths like ../../../components/MyComponent.vue.
• Makes it clear that the import is from the src directory.
• Easier to refactor and move files without worrying about adjusting relative paths.