danielstgt / laravel-mix-svg-vue

A Laravel Mix extension to inline SVG files with Vue.js and automatically optimize them with SVGO
MIT License
38 stars 9 forks source link

How to use with Jetstream(Inertia) #7

Closed BKirev closed 3 years ago

BKirev commented 3 years ago

Hey,

I have this in app.js:

import SvgVue from 'svg-vue3';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin, SvgVue)
    .mount(el);

and the following in webpack.mix.js

require('laravel-mix-svg-vue');

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

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

But when I use it as explained in the README, I get this: [Vue warn]: Failed to resolve component: svg-vue

Pretty sure I'm missing something small, but can't figure it out.

danielstgt commented 3 years ago

Hey, I think you need multiple use() for registering plugins.

Could you change this

.use(InertiaPlugin, SvgVue)

to this

.use(InertiaPlugin)
.use(SvgVue)
BKirev commented 3 years ago

Ah, I knew it'll be something like this. That worked. Thank you!