Replacing with commented JS?

I’m using Laravel Mix and merged the webpack config example with it… I got it to replace the img but it’s a line of javascript that’s commented out…

Logo.vue:

<template>
    <img svg-inline src="imgs/logo-black.svg" class="fill-current text-red-500">
</template>

Laravel Mix Config:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copyDirectory('resources/imgs', 'public/imgs')
    .options({
        processCssUrls: false,
        postCss : [
            tailwindcss('resources/sass/tailwind.config.js'),
            discardComments({removeAll: true}),
        ],
    })
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: [
                        {
                            loader: 'vue-loader',
                        },
                        {
                            loader: 'vue-svg-inline-loader',
                        }
                    ]
                }
            ]
        }
    });

What it’s injecting into my HTML:

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

Any ideas what I may have done wrong?

[oliverfindl]

Hello,

mentioned approach in (free) Laracast video is probably not something you want to use in production. By using <div v-html="require(`../../images/badges/${achievement.icon}`)"></div> (example code from video), all SVGs (and other files if present) from ../../images/badges/ (and its subdirectories) will end up (or at least, try to) in your app bundle.

If you are interested in more information, I created a dummy repo with more detailed description and a dummy vue-cli app to demonstrate this behavior.

If you have more questions, feel free to ask here, or create new issue in mentioned repo .

Thanks

[Mheetu]

That’s a valid point, but if you’re not using an icon pack or lazy loading, as I am not… it isn’t really a concern. There’s also the argument that some prefer caching upfront to avoid the loading screens and additional HTTP requests later. It comes down to use-case and preference, I suppose.

This approach is more dynamic and also allows me to use it in my blade files (since I’m not creating a SPA). Additionally, the site I’m building is small and the assets are added to the project as needed, not in bulk.

But thanks for taking the time to explain the concern and create the demo, definitely worth noting for any larger projects I may work on.