jaeming / vue-cli-plugin-pug

Vue CLI 3 plugin to add pug templating to your components

vue-cli-plugin-pug

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

vue-cli-plugin-pug's Issues

Update pug version to 3.0.0, please

It was released about 5 months ago :)

Feature Request: Add a Generator

Plugin vue-cli-plugin-pug does not have a generator to invoke the terminal outputs. I think replacing

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

with

<template>
  #app
    img(alt='Vue logo' src='./assets/logo.png')
    HelloWorld(msg='Welcome to Your Vue.js App')
</template>

as well as the template tag of HelloWorld.vue would be nice.

如何读取 htmlWebpackPlugin.options.title ？

如题

Vue watcher hangs after a Pug template error

Hi,

I've been really enjoying this plugin but this glitch keeps nagging my workflow.
From time to time, I make a syntax error (various reasons) and the compiler stops watching.
I'm running node:10-alpine docker image on the latest vue ... stack.

// package.json
{
  "dependencies": {
    ...
    "vue": "^2.5.22",
    "vue-router": "^3.0.2",
    "vuetify": "^1.4.2",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
    ...
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-cli-plugin-vuetify": "^0.4.6",
    "vue-template-compiler": "^2.5.22",
    "vuetify-loader": "^1.1.1"
  }
}

For example, I was building this template for a spinner loader thing and my IDE auto-completed indeterminate with an =, from the development flow, I hit alt-tab, IDE saves, watcher compiles and:

<template lang="pug">
  v-layout(justify-space-around)
    v-progress-circular(width="5" size="150" indeterminate=)
</template>

 10% building 0/1 modules 1 active ...e/node/app/src/views/import/Loading.vue(node:16) UnhandledPromiseRejectionWarning: Error: Pug:3:58
    1|
    2| v-layout(justify-space-around)
  > 3|   v-progress-circular(width="5" size="150" indeterminate=)
----------------------------------------------------------------^
    4|

Syntax Error: Unexpected token
    at makeError (/home/node/app/node_modules/pug-error/index.js:32:13)
    at Lexer.error (/home/node/app/node_modules/pug-lexer/index.js:59:15)
    at Lexer.assertExpression (/home/node/app/node_modules/pug-lexer/index.js:87:12)
    at Lexer.attributeValue (/home/node/app/node_modules/pug-lexer/index.js:1253:10)
    at Lexer.attribute (/home/node/app/node_modules/pug-lexer/index.js:1114:30)
    at Lexer.attrs (/home/node/app/node_modules/pug-lexer/index.js:1279:20)
    at Lexer.callLexerFunction (/home/node/app/node_modules/pug-lexer/index.js:1456:23)
    at Lexer.advance (/home/node/app/node_modules/pug-lexer/index.js:1493:15)
    at Lexer.callLexerFunction (/home/node/app/node_modules/pug-lexer/index.js:1456:23)
    at Lexer.getTokens (/home/node/app/node_modules/pug-lexer/index.js:1512:12)
    at lex (/home/node/app/node_modules/pug-lexer/index.js:12:42)
    at Object.lex (/home/node/app/node_modules/pug/lib/index.js:99:27)
    at Function.loadString [as string] (/home/node/app/node_modules/pug-load/index.js:44:24)
    at compileBody (/home/node/app/node_modules/pug/lib/index.js:86:18)
    at Object.exports.compile (/home/node/app/node_modules/pug/lib/index.js:242:16)
    at Object.module.exports (/home/node/app/node_modules/vuetify-loader/lib/loader.js:43:42)
(node:16) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:16) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

And the watcher hangs. I need to restart the docker container which means I need to C^c, run docker-compose restart front, docker-compose logs -f front and wait for the compilation (thanks to Webpack4 it's significantly less). Sometimes the socket doesn't reconnect and I need to refresh... 20 times per day :(

Thanks!

Invoking the plugin from vue UI never ends.

Issue:
After installing the plugin with Vue UI, the plugin is invoked but never finishes.

Steps to reproduce:

• Use Vue UI to create a vanilla Vue project.
• Add vue-cli-plugin-pug from the Vue UI.
• The UI reaches the following screen:
  
• Invoking never finishes

There appear to be a bunch of 404's:

plugin doesn't work in Vue CLI v4.2.2

Hi !
I have create vue create my-vue

I just try that step in your manual:
Either add the plugin from the vue ui interface, or run the following in your Vue-cli 3 project: vue add pug

After I update template in app.vue to pug
template
#app
img(alt='Vue logo', src='./assets/logo.png')
helloworld(msg='Welcome to Your Vue.js App')

And in browser i see this error

Failed to mount component: template or render function not defined.

Could You please fix it ?
Best Regards.

Hangs on error in .pug files

Hangs on error in .pug files.

This issue occurs when importing a separate .pug file into a .vue file using the include directive inside template
After the error appears, everything freezes, the code hot update stops working

Unable to run it with TypeScript in Vuejs

Unable to run it with TypeScript in Vuejs