How to setup Webpack so that will be able to use Pug in both Single File Components (.vue) and "vue-class-component" classes?
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
.pugfiles as HTML strings in JavaScript, you will need to chainraw-loaderafter the preprocessing loader. Note however addingraw-loaderwould 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'] } ]}
The working solution is:
{ test: /\.pug$/, oneOf: [{ resourceQuery: /^\?vue/, use: ["pug-plain-loader"] }, { use: [ "html-loader", "pug-html-loader" ] }]}