Plan to support Vite (Vue 3) or Webpack 5 ?

[mrleblanc101]

Hi,
Any plan to support Vue 3 and Vite ?
I know you recommend using vue-svg-inline-plugin in the README, but that package is quite different.
With the recommended package, I have to import the SVG in the <script>, define it as a component in the option API or use defineComponent in setup and then use it as a Vue component in the <template>.
I liked this plugin because it still used plain <img /> tag instead of Vue component, and I could use the SVG directly instead of have to do 2 prior step every time (import, define component).

[mrleblanc101]

Otherwise does this plugin still work with Vue 3 if I use the Webpack 5 ?
For exemple, Nuxt 3 allow you to use either Vite or Webpack 5. https://nuxtjs.org/announcements/nuxt3-rc/
If this plugin is compatible with Webpack 5, this would solve my problem.

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  builder: 'webpack' // default: 'vite'
})

[mrleblanc101]

Maybe using unjs/unplugin would allow vue-svg-inline-loader to work with all the bundlers:
https://github.com/unjs/unplugin

As part of our deep integration with both Vite and Webpack, we also created unjs/unplugin : a unified plugin system for build tools, which enables writing universal plugins that work in Rollup, Vite and Webpack.

[oliverfindl]

Hello,

Any plan to support Vue 3 and Vite ?

Vite is not supported because this is Webpack loader and Vite is not based on Webpack. Therefore this plugin is not compatible with Vite.

I know you recommend using vue-svg-inline-plugin in the README, but that package is quite different.
With the recommended package, I have to import the SVG in the <script>, define it as a component in the option API or use defineComponent in setup and then use it as a Vue component in the <template>.
I liked this plugin because it still used plain <img /> tag instead of Vue component, and I could use the SVG directly instead of have to do 2 prior step every time (import, define component).

This is not how vue-svg-inline-plugin works. You need to register it once (in main file) and then it works pretty similar to this loader - it still uses <img /> tags. But let me warn you first, it has its own issues with Vite.

Otherwise does this plugin still work with Vue 3 if I use the Webpack 5 ?
For exemple, Nuxt 3 allow you to use either Vite or Webpack 5. https://nuxtjs.org/announcements/nuxt3-rc/
If this plugin is compatible with Webpack 5, this would solve my problem.

I'm using it with Vue 3 and Webpack 5 without any issues. Not sure about Nuxt.

Maybe using unjs/unplugin would allow vue-svg-inline-loader to work with all the bundlers: https://github.com/unjs/unplugin

This loader is based on Webpack API and unplugin is based on Rollup API. Therefore my code base is not compatible.

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

Thanks.

[mrleblanc101]

Vite is not supported because this is Webpack loader and Vite is not based on Webpack. Therefore this plugin is not compatible with Vite.

I understand that this is a Webpack plugin. But it's called VUE-svg-inline-loader, not WEBPACK-svg-inline-loader so the @next branch could be a Vite implementation of the same feature as Vite is the future of Vue, Webpack support will ne removed in a future version I believe.

This is not how vue-svg-inline-plugin works. You need to register it once (in main file) and then it works pretty similar to this loader - it still uses tags. But let me warn you first, it has its own issues with Vite.

You are right, I was looking at the documentation of the wrong plugin by mistake (https://github.com/jpkleemans/vite-svg-loader) as I was looking at alternative at the same time.

I'm using it with Vue 3 and Webpack 5 without any issues. Not sure about Nuxt.

Good to know, we'll explore both Webpack 5 and Vite and weight our option before migrating. If it work with Webpack 5 it should work with Nuxt 3 (using the Webpack 5 builder and not the Vite builder) out of the box.

This loader is based on Webpack API and unplugin is based on Rollup API. Therefore my code base is not compatible.

Wrong, the whole point of unjs/unplugin is to make plugin that work with any builder. Using unplugin would allow vue-svg-inline-loader to work with Rollup, Webpack and Vite at the same time. Of course, it would be a substantial rewrite I think.

[oliverfindl]

Hello,

I understand that this is a Webpack plugin. But it's called VUE-svg-inline-loader, not WEBPACK-svg-inline-loader so the next branch could be a Vite implementation of the same feature as Vite is the future of Vue, Webpack support will be removed in a future version I believe.

• This loader was created before Vite even existed. It was vue-cli 2 back then and it was based on Webpack 2.
• Webpack is explicitly mentioned on first line under heading in readme.
• Not to be offensive, but I'm not obliged to fulfill anyones requests or wishes. Next guy could start complaining, that he is using JSX/TSX or Pug and this loader doesn't work for him... I'm familiar with Webpack, I'm using Webpack in my projects and I created (and published) this package to fulfill my own needs. If anyone wishes to use Vite, its his choice. Still, its open source and anyone can fork and create Vite alternative for his own needs. I have no motivation for such task because I'm not a Vite user.

Wrong, the whole point of unjs/unplugin is to make plugin that work with any builder. Using unplugin would allow vue-svg-inline-loader to work with Rollup, Webpack and Vite at the same time. Of course, it would be a substantial rewrite I think.

I'm not familiar with it, but according to its description:

unplugin extends the excellent Rollup plugin API as the unified plugin interface and provides a compatible layer base on the build tools used with.

It looks to me, that its based on Rollup API. This plugin is using Webpack API internally and therefore its not compatible - it needs to be rewritten to use Rollup API and then it could work in all supported loaders by unplugin. Unfortunately, I don't have capacity or motivation for such task.

Thanks.

[mrleblanc101]

If anyone wishes to use Vite, its his choice.

It's not really a choice, that's where the Vue Team decided to go. You are basically saying that this plugin is dead and won't receive further update to follow the ecosystem. Fine, just make it clear.

It looks to me, that its based on Rollup API.

Yes as I said it would probably need a rewrite but at least it would be compatible with Vue 2 (Webpack) and Vue 3 (Vite) and Nuxt 3 (either).

Unified plugin system for Vite, Rollup, Webpack, and more

[oliverfindl]

Hello,

It's not really a choice, that's where the Vue Team decided to go. You are basically saying that this plugin is dead and won't receive further update to follow the ecosystem. Fine, just make it clear.

Well, I'm still supporting this loader for Webpack based projects. I'm hesitating to mark it as deprecated because it is not (at least from my side, can't be responsible for direction, that Vue Team decided to go) and clearly it has some user base, that is actively using it (around 10k - 15k downloads per week). Not to mention all other frameworks from #53 (comment), that are still based on Webpack.

Thanks.