search

oliverfindl / vue-svg-inline-plugin

Vue plugin for inline replacement of SVG images with actual content of SVG files.
MIT License
33 stars 3 forks source link

inlining at build time? #9

Closed Ragnar-Oock closed 3 years ago

Ragnar-Oock commented 3 years ago

On my vue2 projects, I used https://github.com/oliverfindl/vue-svg-inline-loader that performed the inlining at build time and thus reducing the amount of HTTP request when visiting the page.

Is there a way to setup this plugin to perform the inlining at build time?

oliverfindl commented 3 years ago

Hello,

unfortunately no. This plugin runs in client (browser). You could still use vue-svg-inline-loader if you are using Webpack. If not, then you should search for similar loader / plugin in yours bundler ecosystem.

If you have more questions, feel free to ask here.

Thanks.

Ragnar-Oock commented 3 years ago

I'm using Vite/Rollup, so I'll need to search some more. Just by curiosity have you planned on developing build time inlining on this plugin or another (I really appreciate the works you've done on the webpack one).

Thanks for your time.

oliverfindl commented 3 years ago

Hello,

inline replacement of SVG files at build time with this plugin is impossible, because this plugin registers to Vue instance, which is accessible only in client (browser), with exception of SSR (which is not supported by this plugin either). Like I stated above, I already have solution for Webpack, which is builder of my choice. I don't have plans to create similar solution for Rollup, because I'm not familiar with this technology. Generally, I wouldn't recommend using Vite on anything else than Hello World like projects. Even if I created something for Rollup, it won't work in development mode in Vite, because its not using Rollup there...

If you have more questions, feel free to ask here.

Thanks.

Ragnar-Oock commented 3 years ago

Thanks for your answers, I'll close the issue.

OzzyTheGiant commented 3 years ago

Not exactly sure how this is implemented in a regular Vue app, but if you are using Gridsome, you can check to see if the context is loading in a Client:

// main.js

export default function (Vue, { router, head, isClient }) {
    // Plugins
    if (isClient) Vue.use(VueSvgInlinePlugin)
    // ... load other plugins, components after this
}

Seems to work for me; build runs fine and I can see my svgs loading using sprite mode. I'm on Gridsome 0.7.23 and Vue 2.6.12