1. vue-cli-plugin-pug
Vue CLI 3 plugin to add pug templating to your components and compilation of .pug template files
vue-cli-plugin-pug
Package: vue-cli-plugin-pug
Created by: jaeming
Last modified: Mon, 23 May 2022 13:06:36 GMT
Version: 2.0.0
License: MIT
Downloads: 22,357
Repository: https://github.com/jaeming/vue-cli-plugin-pug

Install

npm install vue-cli-plugin-pug
yarn add vue-cli-plugin-pug

vue-cli-plugin-pug

npm version
Vue CLI 3 plugin to add pug templating to your components and compilation of .pug template files

Getting Started

Either add the plugin from the vue ui interface, or run the following in your Vue-cli 3 project:

 vue add pug

You can now start using pug templates in your components:

 <template lang='pug'>
  div
    h1 Hello World!
</template>

The plugin will also convert .pug files to html, so you can add entries to vue.config.js and get a (build) output file of ./dist/public/index.html:

 module.exports = {
  pages: {
    index: {
      entry: './src/main.js',
      template: './src/index.pug'
    }
  }
}

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin