Dungeon Keeper

Вы можете попробовать @webdiscus/pug-loader, он позволяет использовать отступ в темплейте:

<template lang="pug">
    .app-container
        h1 Hello Pug!
</template>

Установить Pug loader:
npm i --save-dev @webdiscus/pug-loader

Изменить "vue.config.js" согласно следующему конфигу:

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,

  chainWebpack: (config) => {
    const pugRule = config.module.rule('pug');

    // clear all existing pug loaders
    pugRule.uses.clear();
    pugRule.oneOfs.clear();
  },

  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.pug$/,
          oneOf: [
            // allow import of Pug in JavaScript
            {
              exclude: /\.vue$/,
              loader: '@webdiscus/pug-loader',
              options: {
                method: 'compile', // compile Pug into template function
              },
            },
            // allow <template lang="pug"> in Vue components
            {
              loader: '@webdiscus/pug-loader',
              options: {
                method: 'html', // render Pug into pure HTML string
              },
            },
          ],
        },
      ],
    },
  },
});

В темплейт куда надо пробросить переменные, добавьте в самое начало "block variables":

tmpl1.pug

block variables

body
    include /views/header.pug text=data.header
    include /views/footer.pug text=data.footer

В темплейт откуда пробрасывается переменная, добавьте "append variables":

tmpl2.pug

append variables
  const data = {header: 'Наш заголовок', footer: 'Наш футер'}

include tmpl1.pug

Или если преременные из темплейта страницы нужно пробросить в layout:

page-about.pug

extends layout.pug

append variables
  const data = {header: 'Наш заголовок', footer: 'Наш футер'}

То в layout.pug будут доступен обьект data.

P.S.: рекомендую использовать новый pug-plugin для Webpack. Он сильно облегчает использование Pug.