Nuxt.js: How can I disable html minify?

[liquidvisual]

I've tried setting minify to false as discussed here but the HTML output keeps being minified.

This is what I've tried:

generate: {
    minify: false
  }

How can I simply turn html minification off completely?

_{This question is available on Nuxt.js community (#c1906)}

[clarkdo]

Do you want to disable minify in generate or build ?

If generate, minify: false is ok, if build, pls use dev: true

[liquidvisual]

I'd like to disable it in generate. Although I didn't know build and generate were different.

[clarkdo]

Could you please describe your steps and offer a repo ?

[liquidvisual]

I'm currently placing this into my nuxt.config.js:

generate: {
    minify: false
  }

However this knowledge was only gathered via a Github post, rather than official documentation so I don't even know if this is the proper way to do this?

[clarkdo]

Documentation: https://nuxtjs.org/api/configuration-generate#minify

What you did is ok, but I'm not clear the detail of your issue. It would be better to have a repository can reproduce the issue.

[liquidvisual]

The docs are clear with how to easily disable minification with CSS and JS:

minifyCSS: true,
minifyJS: true,

However it doesn't have any info on how to turn off HTML minification, other than the below side note which links elsewhere.

You can change the default configuration of html-minifier used by nuxt.js to minify html files created during generate process.

How can I just disable HTML minification? Why is it not documented? :/

[clarkdo]

hum, I probably know your issue, did your generated file's format only compress in head and <div id="__nuxt" data-server-rendered="true"> like below ?

If yes, that shows that the minify: false has taken effect, the minified part is from vue-ssr bundleRenderer.renderToString

[clarkdo]

I will read vue docs or sources and try to figure out a solution.

[clarkdo]

Sorry for the late reply, currently the content from vue-server-renderer is continuous and no wrap, just same like the above screenshot.

We can have a discussion here to find if it's necessary to add feature to format the html when minify is false.

/cc @Atinux @pi0 @qm3ster

[qm3ster]

1. When would this be useful?
   It's generated code, it shouldn't be edited by hand or committed. If it's about exploring it in development, both chrome and firefox have
   button to format source, and editors have formatting built in or as a plugin as well.

2. Will it mess with rehydration (whitespace, anyone?)

[bjuppa]

This is probably a rare use case, but I'd like to use Nuxt to generate static docs pages for a css framework I'm working on (yeah, I know, yet another one of those... 😄)

But, in those static docs it would be great if both html and css was generated as unaffected as possible, keeping spacing, newlines, and comments to make it easy for inspection for developers reading the docs.

I agree with @qm3ster that developers usually have tools for formatting source code at hand, so I'm actually mostly interested in keeping comments within the css. I will look further in Nuxt docs to find out if I can configure generate to keep the comments.

So, a very rare use case, but it exists!

[bjuppa]

So, here's how I managed to turn minification off for all CSS.

It doesn't solve @liquidvisual's original case of not minifying html, sorry this is for CSS only.

I also apologize for any javascript mishandling, I usually work with PHP 😄
so I guess there's a cleaner way to traverse the loader options, but hey this works!

In nuxt.config.js:

module.exports = {
  generate: {
    minify: false,
  },
  build: {
    extend (config) {
      // Find the Vue loader
      const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader');
      // Loop through the loaders within the Vue loader
      Object.values(vueLoader.options.loaders).map((loader) => {
        // The css loaders we're looking for are always deeper in an array
        if (loader instanceof Array) {
          // Loop through all loaders within that array...
          loader.map((loader) => {
            if (loader.options.minimize === true) {
              // ...and switch the minimize option to false wherever it's true
              loader.options.minimize = false;
            }
          });
        }
      });
    }
  }
};

[clarkdo]

@bjuppa In nuxt-edge(nuxt 2.0 shortly), config for vue-loader has be introduced as build.vueLoader

[cmty[bot]]

This question has been resolved by @clarkdo, see answer.

[namnguyen26791]

@clarkdo hi man,
I have a problem with minify html in build mode, help me please.

[clarkdo]

@namnguyen92 Could you open a new issue and provide all information according to issue template ? Thank you so much 😸

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.