How to use in combination with Laravel Mix?

[MarcoTroost]

Hi,

Thanks to the contributors for making vue components more easy to use!

I would very much like to use this plugin in my project, but i unfortunately don't seem to get it to work using Laravel Mix. Mix doesn't produce an error, but i can't autoload vue components either.

Webpack.mix.js:

const mix = require('laravel-mix');
const Components = require('unplugin-vue-components/webpack');

mix.webpackConfig({
    plugins: [
        Components({
            dirs: ['./resources/js/components']
        })
    ]
});

mix.js('resources/js/main.js', 'public/js').vue();

main.js:

import { createApp } from 'vue';
import BalmUI from 'balm-ui'; 
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; 

const app = createApp({});

app.use(BalmUI);
app.use(BalmUIPlus);

app.mount('#app');

Expected behaviour is that the component ./resources/js/components/RecoverPassword would be imported & initialized automatically.

Hope you can help.

thanks in advance & with kind regards,

Marco

[prestonholt]

@MarcoTroost I was able to get it working with the following configuration:

webpack.mix.js:

const mix = require('laravel-mix')
mix
  .js('resources/js/app.js', 'public/js')
  .vue()
  .postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
  ])
  .webpackConfig(require('./webpack.config'))

if (mix.inProduction()) {
  mix.version()
}

webpack.config.js:

const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve('resources/js'),
    },
  },
  plugins: [
    require('unplugin-vue-components/webpack')({
      dirs: [path.resolve('resources/js/components')],
    }),
  ],
}

[ddiazepam]

@prestonholt that works for me. The problem is that if i rename component I have to 're-run' watcher to get that component discovered again

[MarcoTroost]

@prestonholt Alas, it doesn't work for me. No errors, but components aren't autoloaded either...

node: 17.2 laravel-mix: 6.0.39 npm: 8.1.4

:(