Laravel-mix: Use vue-svg-inline-loader with Laravel-Mix

[Darkecudoua]

This is not a direct issue but I struggle configuring this with laravel mix. I implemented this in the frontend, on Vue2, and I used the basic webpack config file. In the meantime, the dev team implemented the backend on Laravel along with Laravel-mix. Since then, vue-svg-inline-loader has stopped working. I think the culprit is the misconfiguration, as with laravel mix I do not have the "vue.config.js" file anymore, but I have "webpack.mix.js".

I tried this:

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: "vue-loader",
                        options: { /* ... */ }
                    },
                    {
                        loader: "vue-svg-inline-loader",
                        options: { /* ... */ }
                    }
                ]
            },
        ]
    },
});

and

```mix.webpackConfig({
module : {
rules : [
{
use : [
'vue-svg-inline-loader',
{
loader: 'vue-svg-inline-loader',
options : {}
},
]
},
]
},
});

What am I missing?

My initial, vue.config.js file

module.exports = {
css: {
loaderOptions: {
sass: {
data: '@import "@/css/all.scss";'
}
}
},
chainWebpack: config => {
config.module
.rule("vue")
.use("vue-svg-inline-loader")
.loader("vue-svg-inline-loader")
.options({ /* ... */ });
}
}
```

Thank you

• Laravel Mix Version: 4.1.2
• Node Version: v10.16.0
• NPM Version: v6.9.0
• OS: macOS Mojave 10.14.6

[devonzara]

You could try override instead of webpackConfig...

mix.override(config => {
    config.module.rules.push({
        test: /\.vue$/,
        use: [{ loader: 'vue-svg-inline-loader' }]
    })
});

Alternatively, Jeffrey covered the topic of inlining SVGs in [ a free video ] and takes it a step further in [ a premium video ] on Laracasts a few months ago...

[Darkecudoua]

This appears to fix the problem. Thank you @devonzara !