Pug support about gridsome

[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')
  })
}

[Doogiemuc]

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

[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]

That works, thanks!

Little typo:

api.chainWebpak => api.chainWebpack

[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.

[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 ...