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:
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With