Vueのtemplateでpugを利用する

Vueのtemplateでpugを利用しようとした時少し苦戦したのでめも。

pug-loaderを使用し

<template lang='pug'>
</template>

このように書くと

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

というエラーが出てすすめたなかった。

loaderを変更

Vue loaderのMigrating from v14に以下の記述が
https://vue-loader.vuejs.org/migrating.html#importing-sfcs-from-dependencies

Note that some template loaders such as pug-loader exports a compiled templating function instead of plain HTML. In order to pass the correct content to Vue's template compiler, you must use a loader that outputs plain HTML instead. For example, to support , you can use pug-plain-loader:

という訳でloaderをpug-plain-loaderに変更。

$yarn remove pug-loader
$yarn add pug-plain-loader

{
  test: /\.pug$/,
  use: ['pug-plain-loader']
},

これでコンパイルが成功した。