[Enhancement] Improve bundler config

[ptandler]

I started to migrate my homepage from VuePress 1 to 2 and also used this opportunity to give Vite a try.

With VuePress 1 and web pack, I used the vue-svg-loader plugin to allow inline SVG. I'm stuck to port this to VuePress 2 and Vite.

I found vite-svg-loader which looks pretty comparable. But I've got no idea how to use it.

In the documentation I read that one can add custom Vite config via viteOptions:

const svgLoader = require('vite-svg-loader')
// ...
module.exports = {
// ...
  bundlerConfig: {
    viteOptions: {
      plugins: [svgLoader()]
    }
  },
// ...
}

and within a custom Vue component I do:
'm stuck

<template>
    <ComponentLogo/>
</template>
<script>
import logo from "./stack-overflow-logo.svg?inline"

export default {
    name: "name",
    props: {
// ...
    },
    components: {ComponentLogo: logo},
//...
  }
</script>

But I get an error:

Uncaught (in promise) DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('.../global-components/Social/stack-overflow-logo.svg?inline') is not a valid name.
    at createElement

I interpret this that the imported SVG is treated as HTML or JS, but not SVG. Correct?

Coming back from this specific case to my general point: I really would appreciate to get a better explanation, and ideally also some complete and working examples of how to use Vite options and plugins. Thanks! 🙏

[Mister-Hope]

// .vuepress/config.ts
import svgLoader from "vite-svg-loader";

export default {
  // ...
  plugins: [
    // ...
    {
      name: "svg-loader",
      onInitialized: (app) => {
        if (app.bundler.endsWith("vite")) {
          app.bundlerConfig.viteOptions.plugins.push(svgLoader());
        } else {
          // do samething with webpack
        }
      },
    },
  ],
};

Try this

[ptandler]

Hi @Mister-Hope, thanks for your suggestion. I just needed to tweak it a bit: The first thing I noticed is that it should be app.options.bundler, while app.bundler is undefined. And then, the plugins array can be empty. So I use this now:

// .vuepress/config.ts
import svgLoader from "vite-svg-loader";

export default {
  // ...
  plugins: [
    {
      name: "svg-loader",
      onInitialized: (app) => {
        console.log(JSON.stringify(app.options))
        if (app.options.bundler.endsWith("vite")) {
          app.options || (app.options = {});
          app.options.bundlerConfig || (app.options.bundlerConfig = {});
          app.options.bundlerConfig.viteOptions || (app.options.bundlerConfig.viteOptions = {});
          app.options.bundlerConfig.viteOptions.plugins || (app.options.bundlerConfig.viteOptions.plugins = []);
          app.options.bundlerConfig.viteOptions.plugins.push(svgLoader());
        } else {
          // do same thing with webpack
        }
      },
    },
  ]
};

However, my original issue remains: This should be part of the docs!

And: As the docs say that I can add bundlerConfig.viteOptions to the VuePress config, why do I have to do it this way via the onInitialized hook? Really not straightforward for a thing that I regard as quite common use case.

In fact, I know that I use vite only and not webpack, so do I have to care about checking the configured bundler?

[Mister-Hope]

It seems that svgloader needs to be loaded after vueLoader to work, but currently it can only be loaded before vueLoader, I had a discussion with meteorlxy of this yesterday, we will add a new option in feature to solve this, allowing you edit the config after vuepress config is injected.

[Mister-Hope]

It's not part of documentation thing.

[Mister-Hope]

You may need to wait a little bit for this, see #602 (comment)

[meteorlxy]

It seems that svgloader needs to be loaded after vueLoader to work, but currently it can only be loaded before vueLoader

Well, I just took a look at vite-svg-loader. Seems that it has enforce: 'pre':

https://github.com/jpkleemans/vite-svg-loader/blob/816f309a7235dad6d26d24aff045218a023f2d29/index.js#L13

[meteorlxy]

Closing as I've tested with import IconComponent from './foo.svg?component' and it works well.