Gridsome 安裝 Pug | 點燈坊

在 Gridsome 內也可在 HTML Template 使用 Pug，只要安裝 Pug Plugin 即可。

Version

Gridsome 0.7.23
Pug 3.0.2

Gridsome Project

$ gridsome create gridsome-pug

使用 Gridsome CLI 建立 Gridsome project。

Add Pug

$ yarn add --dev pug gridsome-plugin-pug

使用 Yarn 安裝 Pug 與 Pug Plugin。

Gridsome Config

gridsome.config.js

module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: 'gridsome-plugin-pug',
      options: {
        pug: { /* Options for `pug-plain-loader` */ },
        pugLoader: { /* Options for `pug-loader` */ }
      }
    }
  ]
}

在 plugins 下設定使用 gridsome-plugin-pug。

Component

src/pages/Index.vue

<template lang='pug'>
div HelloWorld
</template>

在 HTML template 內使用 Pug。

Conclusion

• 只要安裝 Pug plugin 就可簡單在 HTML template 使用 Pug

Reference

Gridsome, gridsome-plugin-pug