'How can i add components from index.js?

I want to import my components from index.js, this file index.js i created in components folder

index.js like this:

export const Component1 = () => import('./forms/Component.vue')

currently i am importing like this

import Component1 from '../components/forms/Component'

and i want to import like this:

import { Component1 } from '@/components'

do this is possible?

vue.jsvuejs3


Solution 1:[1]

You need to add this line to your webpack.config.js and restart webpack.

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve(__dirname, 'src/'), // this line
    },
    extensions: ['*', '.js', '.vue', '.json']
},

Solution 2:[2]

Your components directory would need to have an index.js file which exports the components as named exports.

export { default as Component1 } from './src/components/Component1/Component1.vue'

The problem with this is that the order of the components becomes important when importing each other.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Erenn
Solution 2 Blowsie

Related Questions