Nuxt - HTML Injection by Webpack plugin

Viewed 271

Currently I'm migrating a Vue.js App to an Nuxt.js App. In our previous setup we used favicons-webpack-plugin to generate favicons during compile-time. These were then injected into the HTML with html-webpack-plugin.

As we want to achieve the same functionality after the migration we need a way to generate these favicons. We came across nuxt-rfg-icon Nuxt-plugin but it does not provided the same feature-set (less generated favicons & the favicons are converted by an online service).

Generally speaking one could use webpack-plugins in Nuxt. So i tried integrating the webpack-plugin, but these favicons are only injected in one of two generated HTML-files. A index.spa.html (favicons present) and a index.ssr.html (favicons not present). When the Page is rendered by Nuxt on the serverside it seems to use the index.ssr.html (seems expected).

So I made a little dive into the @nuxt/webpack package to get some info about how Nuxt configures webpack. There I found this code:

// Generate output HTML for SSR
if (buildOptions.ssr) {
  plugins.push(
    new HtmlWebpackPlugin__default['default']({
      filename: '../server/index.ssr.html',
      template: appTemplatePath,
      minify: buildOptions.html.minify,
      inject: false // Resources will be injected using bundleRenderer
    })
  );
}

There it says that webpack should disable the automatic injection because the bundleRenderer is doing this. Unfortunately I could not find any resources online on how to inject the HTML of a webpack-plugin into the bundleRenderer. Maybe this is not possible or even intended?

So here is my actual question: How can i get Nuxt to work with the favicons-webpack-plugin?

0 Answers
Related