Vue: pug language has not been recognized in .vue template

8
votes

From the Vue documentation:

Processing templates is a little different, because most webpack template loaders such as pug-loader return a template function instead of a compiled HTML string. Instead of using pug-loader, we can just install the original pug.

TestComponent.vue:

<template lang="pug">
  div
    h2 {{ message }}
</template>

<script>
  export default {
    data () {
      return {
        message: 'Done!!! Done...'
      }
    }
  }
</script>

main.js:

import Vue from 'vue'
import TestComponent from './../components/TestComponent/TestComponent.vue'

new Vue({
  el: '#app',
  render: h => h(TestComponent)
});

Error:

NonErrorEmittedError: (Emitted value instead of an instance of Error) 
  Error compiling template:

  div
    h2 {{ message }}

  - Component template requires a root element, rather than just text.

Used dependencies versions:

  • "webpack": "^4.7.0"
  • "vue": "^2.5.16"
  • "vue-loader": "^15.2.4",
  • "vue-template-compiler": "^2.5.16",
  • "pug": "^2.0.3"
1
javascriptwebpackvue.jsvuejs2
Install pug-loader: github.com/pugjs/pug-loader – DigitalDrifter
It says in the documentation you need to use pug-plain-loader – Ohgodwhy
Note: the documentation link you've provided is for vue-loader v14 but you're using v15. – Phil

1 Answers

6
votes

You need to set up Webpack to use the Pug language loader, otherwise your template is being parsed as HTML, and your template indeed as HTML doesn't have a root tag (a single html element that surrounds all other elements).

You need to set this up: https://www.npmjs.com/package/pug-loader

According to a comment you might also need: https://www.npmjs.com/package/pug-plain-loader