New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Enhancement] Improve bundler config #795
Comments
// .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 |
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 // .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 In fact, I know that I use vite only and not webpack, so do I have to care about checking the configured bundler? |
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. |
It's not part of documentation thing. |
You may need to wait a little bit for this, see #602 (comment) |
Well, I just took a look at |
Closing as I've tested with |
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
:and within a custom Vue component I do:
'm stuck
But I get an error:
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! 🙏
The text was updated successfully, but these errors were encountered: