Pug support

[lobo-tuerto]

Hello guys,

I tried to add support for Pug templates by doing:

yarn add pug pug-plain-loader --dev

Then changed an HTML template from:

<template>
  <Layout>
    <h1>About us</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.</p>
  </Layout>
</template>

<script>
export default {}
</script>

To:

<template lang="pug">
layout
  h1 About us
  p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.
</template>

<script>
export default {}
</script>

And I'm seeing this error:

 error  in ./src/pages/About.vue?vue&type=template&id=2c11fd19&lang=pug&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 
  Error compiling template:
  
  layout
    h1 About us
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.
  
  - Component template requires a root element, rather than just text.


 @ ./src/pages/About.vue?vue&type=template&id=2c11fd19&lang=pug& 1:0-408 1:0-408
 @ ./src/pages/About.vue
 @ ./src/.temp/routes.js
 @ ./node_modules/gridsome/app/router.js
 @ ./node_modules/gridsome/app/app.js
 @ ./node_modules/gridsome/app/entry.client.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true ./node_modules/gridsome/app/entry.client.js

Is there an easy way to accomplish this?

Cheers,
VA

[hjvedvik]

Hi, you can use chainWebpack in your gridsome.config.js file to add the pug loader :)

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('pug')
      .test(/\.pug$/)
      .use('pug-plain-loader')
        .loader('pug-plain-loader')
  }
}

[lobo-tuerto]

Hello, I'm still seeing the same error, I'm not using .pug files, but .vue files.

For example:

src/pages/About.vue:

<template lang="pug">
layout
  h1 About us
  p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.
</template>

This is my current gridsome.config.js:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('pug')
      .test(/\.(pug|vue)$/)
      .use('pug-plain-loader')
      .loader('pug-plain-loader')
  },
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        typeName: 'Post',
        route: '/blog/:slug'
      }
    }
  ]
}

I'm using Pug inside SFC Vue files.

[hjvedvik]

Sorry, I just notices there is a bug with chainWebpack in v0.3.. Will have that fixed asap :) But you can create a gridsome.server.js file and use the server API instead. The Vue Loader uses the .pug config when parsing Pug templates in SFC.

module.exports = function (api) {
  api.chainWebpack(config => {
    config.module
      .rule('pug')
      .test(/\.pug$/)
      .use('pug-plain-loader')
        .loader('pug-plain-loader')
  })
}

[lobo-tuerto]

That works, thanks!

Little typo:

api.chainWebpak => api.chainWebpack

[lobo-tuerto]

I'm reopening this, since this is related to an upcoming fix.

[lobo-tuerto]

Closing this as it's been fixed by: 2cc5850

[gringolalia]

thank you @hjvedvik that was it in my case ...

[Doogiemuc]

Just for reference if anyone else googles this: https://github.com/gluons/gridsome-plugin-pug