Laravel Mix with Vue-loader

I try to use vue-loader with webpack.mix.js without success

My configuration

const mix = require('laravel-mix');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

mix
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                }
            ]
        },
        plugins: [
            new VueLoaderPlugin()
        ]
    })
    .js('resources/js/app.js', 'public/js')
    .extract(['vue', 'vee-validate'])
;

The error I get is

Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.

Some support!

bobbybouwmann

6 years ago

Level 88

Can you show your app.js file? It seems you're not using vue-loader correctly there!

papa

6 years ago

Level 3

@BOBBYBOUWMANN -

window.Vue = require('vue');

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue.component('login-form', require('./components/Login.vue').default);


const app = new Vue({
    el: '#app',
    mounted() {
        console.log('asd');
    }
});