What Does the @ Mean Inside an Import Path

What does the @ mean inside an import path?

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>';

What does the @ symbol do in javascript imports?

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'

Edit: One reason it exists is because import Component from 'components/component' doesn't do that but instead search in the node_modules folder

How to import vue components?

You have 2 way to import component the first local if this components will be used in only one or 2 page you can import it like this

<script> 
import ButtonCounter from './ButtonCounter.vue' 
export default { components: { ButtonCounter } } 
</script>

If this components will be used by too much page you can import it globaly like this in the main.js

import MyComponent from './App.vue' 
app.component('ButtonCounter', ButtonCounter)

vue js import from node_modules

Importing using only the package name will always look in the node_modules folder, regardless of whether the node_modules is in the current directory, the parent directory, or the global directory. Unless if the path is preceded by ./, ../, etc.

---

Related Topics