Skip to main content

What does the @ symbol do in javascript imports?

12th October, 2022

Updated: 12th October, 2022

    For example:

    import Component from '@/components/component'
    import DocCardList from '@theme/DocCardList';

    In the code I'm looking at it behaves like ../ going up one level in the directory relative to the file path, but I'd like to know more generally what it does. Unfortunately I can't find any documentation online due to the symbol searching problem

    The meaning and structure of the module identifier depends on the module loader or module bundler. The module loader is not part of the ECMAScript spec. From a JavaScript language perspective, the module identifier is completely opaque. So it really depends on which module loader/bundler you are using.

    You most likely have something like babel-plugin-root-import in your webpack/babel config.

    Basically it means from the root of the project.. it avoids having to write things like import Component from '../../../../components/component'

    Know it's old, but I wasn't exactly sure how it's defined, so looked it up, came by, dug a little deeper and finally found this in my Vue-CLI (Vue.js) generated Webpack config

    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
        '@': path.join(__dirname, '..', dir)

    so it's an alias which in this case points to the root of vue-cli generated src directory of the project

    This is a general Webpack feature and not limited to Vue



    Created on: 12th October, 2022

    Last updated: 12th October, 2022

    Tagged With: