[Vuejs]-How can I import by "@"?

by

1👍

✅

The @ symbol is often used in conjunction with a bundler like webpack to set up aliases, which are shortcuts to specific paths within your project. However it doesn’t automatically map to packages within your node_modules directory.

In a Vue project, you typically import Vue like this:

import Vue from 'vue';

or, if you’re using Vue 3:

import { createApp } from 'vue';

If you want to set up an alias that allows you to import modules with the @ symbol, you would have to configure that in your bundler (like webpack or Vite).

Here’s an example of how you might set up an alias with webpack:

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // Alias '@' to the 'src' directory
    },
  },
};

Once that’s set up, you can use the @ symbol to refer to anything inside the src directory. But this won’t change how you import packages from node_modules, like Vue.

In your case, you don’t need to set up an alias to import Vue; just use the standard import statement for the version of Vue you’re using.

👤MaikeruDev

Leave a comment