[Vuejs]-How to use @/xxxx/component.vue to import vuejs component?

0πŸ‘

It is your webpack configuration that is responsible for mapping the @ symbol to your components directory.

If you are using Laravel Mix, you can add something like this to your webpack.mix.js file:

mix.webpackConfig({
resolve: {
    alias: {
        "@": path.resolve(
            __dirname,
             "resources/assets/js/components"
            )
        }
    }
});

So your file should look like the following:

const path = require('path')
const mix = require('laravel-mix')

mix.webpackConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "resources/js/coreui/")
        }
    }
});

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css'); 
πŸ‘€George Hanson

0πŸ‘

in your package.json add:

"jest": {
  "moduleNameMapper": {
      "@/(.*)$": "<rootDir>/src/$1"
   },
}

at the bottom of the json

πŸ‘€silva96

Leave a comment