I've been struggling to make Pug templates work with Vue class-based components using a separate file for the pug template. The documentation suggests that adding this code should do the trick:
// webpack.config.js -> module.rules
{
test: /\.pug$/,
oneOf: [
// this applies to `<template lang="pug">` in Vue components
{
resourceQuery: /^\?vue/,
use: ['pug-plain-loader']
},
// this applies to pug imports inside JavaScript
{
use: ['raw-loader', 'pug-plain-loader']
}
]
}
However, it doesn't seem to be working as expected. I keep encountering this error:
(Emitted value instead of an instance of Error) template syntax error Component template requires a root element, rather than just text.
Here's my component 'HelloWorld.ts':
import { Component, Prop, Vue } from 'vue-property-decorator'
//import WithRender from '!vue-template-loader!pug-plain-loader!./hello-world.pug' <-- This works fine
import WithRender from './hello-world.pug'
@WithRender
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string
}
No matter how I configure the loaders or move them around in vue.config.js, I can't seem to get it to work properly.
Interestingly, if I use the following loader short form, it works perfectly:
import WithRender from '!vue-template-loader!pug-plain-loader!./hello-world.pug'
If anyone has any suggestions on what I might be doing wrong, please let me know. This issue is really frustrating me.