Vue-cli and CodeBlock

[christian-nils]

Hi,

I spent some time on an issue that I had with my slides. I could not render correctly my code using the CodeBlock widgets.

I used the version 4 of Vue-CLI to create my project. Eagle.js (v.0.6.0) is installed as dependency via npm.

For instance, if I have the following code in my slide:

<template id="app" lang="pug">
  .eg-theme-agrume
    .eg-slideshow
      slide
        eg-code-block(lang="bash").
          git clone https://github.com/Zulko/eaglejs-demo.git
          cd eaglejs-demo
          npm install
          npm run dev
</template>

My slide will show git clone https://github.com/Zulko/eaglejs-demo.git cd eaglejs-demo npm install npm run dev instead of:

git clone https://github.com/Zulko/eaglejs-demo.git
cd eaglejs-demo
npm install
npm run dev

Apparently Vue-CLI team modified the options of whitespace from Vue-CLI v3 to v4. So you need to add in the vue.config.js file the following code (see https://github.com/vuejs/vue/issues/10485#issuecomment-528729861) to get the expected behavior:

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

I hope it helps.

[yaodingyd]

Thanks! Are you willing to do a PR? Add a FAQ section right before Contribute and add your issue link there?

[christian-nils]

Ok, this was the first time I do a PR. So hopefully, it was correct and useful. Have a great day! And thanks for this library.