According Vue.js documentatin to use pug pre-processor in Single File Components, pug-plain-loader (not pug-loader) required:
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
What if besides Singe File Components (.vue files) I also need to import pug templates to TypeScript classes, provided by vue-property-decorator package (based on vue-class-component)?
I have to see the example only for html template loading:
@Component({
template: require('./MyComponent.html')
})
export default class MyComponent extends Vue {
//...
}
What if need to use pug instead?
@Component({
template: require('./RegularButton.pug')
})
export default class RegularButton extends Vue {
//...
}
In this case, pug-plain-loader should not be used:
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <button @click="onClickEventHandler">{{ lettering }}</button>
@ ../ReusableComponents/RegularButton/RegularButton.ts 18:18-48
@ ./SPA_Test.ts
I know that first I need to install pug-loader. But how I need to harmonize my webpack config with pug-plain-loader settings?
// ...
module: {
rules: [
{
test: /\.ts?$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.json5$/,
loader: 'json5-loader'
},
{
test: /\.(yml|yaml)$/,
use: ['json-loader', 'yaml-loader']
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
]
}
NonErrorEmittedError: (Emitted value instead of an instance of Error)
Errors compiling template:
text "export default "" outside root element will be ignored.
1 | export default "<div class=\"container\"><h1>{{ pageTitle }}</h1><hr><div><div>V-Model Test:</div><div>{{ vModelTestProperty }}</div><div><input type=\"text\" v-model=\"vModelTestProperty\"></div></div><hr><div><div>{{ defaultTextLabel }}</div><div><RegularButton :lettering=\""Non default button text"\" :onClickEventHandler=\"executeTest\"></RegularButton></div></div></div>"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
at Object.emitError (C:\Users\i\Documents\PhpStorm\InHouseDevelopment\mylib\node_modules\webpack\lib\NormalModule.js:165:14)
at Object.module.exports (C:\Users\i\Documents\PhpStorm\InHouseDevelopment\mylib\node_modules\vue-loader\lib\loaders\templateLoader.js:61:21)
@ ./SPA_Test.vue?vue&type=template&id=cabf1cca&lang=pug& 1:0-422 1:0-422
@ ./SPA_Test.vue
@ ./SPA_Test.ts
Component:
<template lang="pug">
.container
h1 {{ pageTitle }}
hr
div
div V-Model Test:
div {{ vModelTestProperty }}
div: input(type='text' v-model='vModelTestProperty')
hr
div
div {{ defaultTextLabel }}
div: RegularButton(:lettering='"Non default button text"' :onClickEventHandler='executeTest')
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class SPA_Test extends Vue {
private pageTitle: string = 'SPA related test';
private vModelTestProperty: string = 'Inputted characters will be displayed here';
private defaultTextLabel: string = 'Default text';
public executeTest(): void {
console.log('Test O\'K');
}
}
</script>
I don't thing that @Hammerbot's solution is wrong; maybe it is a part of right solution. Anyway, with settings
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
all works, unless .pug
could not be imported inside @Component
decorator:
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({
//template: require('./RegularButton.pug') // error will occur
template: '<button @click="onClickEventHandler">{{ lettering }}</button>'
})
export default class RegularButton extends Vue {
@Prop({default: 'Default text', type: String}) private readonly lettering!: string;
@Prop({default: (): void => {}, type: Function}) private readonly onClickEventHandler!: () => {};
}
According to Vue.js official documentation, to use vue-loader
with pug-plain-loader
, you need to configure loader rule as follows:
If you also intend to use it to import
.pug
files as HTML strings in JavaScript, you will need to chainraw-loader
after the preprocessing loader. Note however addingraw-loader
would break the usage in Vue components, so you need to have two rules, one of them targeting Vue files using aresourceQuery
, the other one (fallback) targeting JavaScript imports:// 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'] } ] }
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