Not indented with @vue/cli-service version 4

[janober]

As soon as @vue/cli-service version 4 gets used it does somehow not indent anymore. So be clear. Instead of it looking like this:

{
    "key1": "value1",
    "key2": "value2"
}

it looks like this:

{
"key1": "value1",
"key2": "value2"
}

The problem seems to be that in the span elements with the class json-tree-indent the content ( ) is missing for some reason.

Guess the author probably knows what causes the problem if he reads the breaking changes which can be found here: https://github.com/vuejs/vue-cli/blob/dev/CHANGELOG.md

[jameswragg]

Just hit the same issue & found this work-around: https://github.com/vuejs/vue/issues/10485#issuecomment-528729861 hope it helps.

The underlying issue looks like its a bug in the Vue template compiler itself: https://github.com/vuejs/vue/issues/11059

[KennethLindalen]

Try changing your vue.config.js file into this:

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(args => {
                args.compilerOptions.whitespace = 'preserve'
            })
    }
}

Problem being in version 4 it does not preserve the whitespaces.

[myst729]

Hi guys, does this package work well with Vue 3.x now?