What does the @ mean inside an import path?

Question

I'm starting out a new vue.js project so I used the vue-cli tool to scaffold out a new webpack project (i.e. vue init webpack).

As I was walking through the generated files I noticed the following imports in the src/router/index.js file:

import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' // <- this one is what my qusestion is about  Vue.use(Router)  export default new Router({     routes: [         {             path: '/',             name: 'Hello',             component: Hello         }     ] }) 

I've not seen the at sign (@) in a path before. I suspect it allows for relative paths (maybe?) but I wanted to be sure I understand what it truly does.

I tried searching around online but wasn't able to find an explanation (prob because searching for "at sign" or using the literal character @ doesn't help as search criteria).

What does the @ do in this path (link to documentation would be fantastic) and is this an es6 thing? A webpack thing? A vue-loader thing?

UPDATE

Thanks Felix Kling for pointing me to another duplicate stackoverflow question/answer about this same question.

While the comment on the other stackoverflow post isn't the exact answer to this question (it wasn't a babel plugin in my case) it did point me in the correct direction to find what it was.

In in the scaffolding that vue-cli cranks out for you, part of the base webpack config sets up an alias for .vue files:

This makes sense both in the fact that it gives you a relative path from the src file and it removes the requirement of the .vue at the end of the import path (which you normally need).

Thanks for the help!

Answer 1

This is done with Webpack resolve.alias configuration option and isn't specific to Vue.

In Vue Webpack template, Webpack is configured to replace @/ with src path:

  const path = require('path');    ...   resolve: {     extensions: ['.js', '.vue', '.json'],     alias: {       ...       '@': path.resolve('src'),     }   },   ... 

The alias is used as:

import '@/<path inside src folder>'; 

Answer 2

Also keep in mind you can create variables in tsconfig as well:

"paths": {   "@components": ["src/components"],   "@scss": ["src/styles/scss"],   "@img": ["src/assests/images"],   "@": ["src"], } 

This can be utilized for naming convention purposes:

import { componentHeader } from '@components/header';