Laravel-mix: Vue-loader options.

[kamerat]

I see no docs on how to interact with vue-loader trough .mix

https://vue-loader.vuejs.org/en/options.html has more options than what you have included in the docs/options.md.

I would want to use the preservewhitespace. However, I cannot seem to find any what to add this option by today. Am I looking at the wrong place, or?

Simply adding vue-loader as a rule in webpackConfig did not seem to work. Looked like it initialized vue-loader twice and broke it with Failed to mount component: template or render function not defined

How do we go with adding custom vue-loader options?

[isometriq]

Same here, maybe there is way to get the config and alter it somehow..

[isometriq]

Actually according to this
https://github.com/JeffreyWay/laravel-mix/blob/master/docs/quick-webpack-configuration.md

It should do a deep merge

[isometriq]

mix.preLoaders() and mix.postLoaders() are available
https://github.com/JeffreyWay/laravel-mix/commit/e45503786c0fa50a13cc0755bcf9c18eff569e5d

but otherwise it seems the whole config is needed
https://github.com/JeffreyWay/laravel-mix/issues/875

[isometriq]

actually its

mix.options({
        vue: {
            preLoaders: {

            }
            postLoaders: {

            }
        }
    })

[kamerat]

Lifesaver, thank you @isometriq!

[kamerat]

If more people stumble across this, this commit:
https://github.com/JeffreyWay/laravel-mix/commit/8e8aeff20407dc12630a4b835f408d855994cc2a makes this much easier. You can now add vue-loader options directly;

mix.options({
        vue: {
            preserveWhitespace: false
        }
    })

PS: If you like me skimmed though the Vue docs and did not fully understand the preserveWhitespace, this will save you some time.

If set to false, the whitespaces between HTML tags in templates will be ignored. (ref docs)

This means <span>foo</span> <br> becomes <span>foo</span><br>. It will not remove the whitespace between the text inside the node.

[mezhevikin]

@BlitZz96 Hello. I'd like to remove whitespaces from vue templates. I added your code to my webpack.mix.js.

   mix.options({
        vue: {
            preserveWhitespace: false
        }
    });

But in any case I'm getting the whitespaces.
What's wrong?

[ghost]

Please notice that preserveWhitespace and whitespace is compilerOptions. Not options of vue-loader but vue-template-compiler.
Correct way to set this is:

mix.options({
  vue: {
    compilerOptions: {
      whitespace: 'condense'
    }
  }
})

This github issue shows on the top of my search result page. So I just leave the right answer here.