Как настроить работу с Pug в Vue шаблонах

1. Установка PUG
2. Настройка сборки в Laravel Mix
3. Настройка сборки в vue-cli
4. Примеры работы (v-if, v-for, :class)

Введение

Pug (известный как jade) - это отличный способ написания HTML разметки. Я работаю в компании, где все фронтенд разработчики используют его. Потому, для себя, я так же решил попробовать его в работе и настроить его обработку в моих Vue-шаблонах.

В данный момент мы занимаемся разработкой SPA приложения на основе VueJs, и именно на этом проекте я решил попробовать PUG вместе с Vue в "боевых условиях".

Прежде всего, нам нужно подключить библиотеку для работы с PUG:

npm install pug pug-plain-loader

После чего, добавим новое правило сборки в конфиг вебпака:

module: {
  rules: [
     {
        test: /\.pug$/,
        oneOf: [
           {
              resourceQuery: /^\?vue/,
              use: ['pug-plain-loader']
           },
           {
              use: ['raw-loader', 'pug-plain-loader']
           }
        ]
     }
  ]
}

Настройка Pug в Vue шаблонах в Laravel

Если вы больше специализируетесь на бекенд разработке, то, возможно, как и я, не особо знаете, как настраивать вебпак, и передавать кастомные правила сборки. Потому, остановлюсь на этом пункте, и расскажу, как на Laravel настроить обработку PUG шаблонов в Vue, и где нужно прописать вышеприведенное правило.

Откройте файл webpack.mix.js и добавьте новое правило сборки:

const mix = require('laravel-mix');

// Начало конфига загрузчика PUG
mix.webpackConfig({
   module: {
      rules: [
         {
            test: /\.pug$/,
            oneOf: [
               {
                  resourceQuery: /^\?vue/,
                  use: ['pug-plain-loader']
               },
               {
                  use: ['raw-loader', 'pug-plain-loader']
               }
            ]
         }
      ]
   }
});
// Конец конфига

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.sass', 'public/css');

Настройка Pug в шаблонах проекта vue-cli

Для кастомных настроек в Vue предусмотрен файл vue.config.js, где можно переопределить существующие или добавить новые конфигурационные параметры. Если вы развернули проект через vue-cli, но не обнаружили файла vue.config.js в корне проекта (на одном уровне с package.json), то вам просто нужно создать его самому.

И для того, чтобы обработчик PUG шаблонов заработал, достаточно добавить в vue.config.js такие настройки:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.pug$/,
          oneOf: [
            {
              resourceQuery: /^\?vue/,
              use: ['pug-plain-loader']
            },
            {
              use: ['raw-loader', 'pug-plain-loader']
            }
          ]
        }
      ]
    }
  }
}

Примеры использования

После проделанных выше действий, у вас появилась возможность писать .vue компоненты в формате PUG. Для того, чтобы система идентифицировала шаблон PUG-овским, нужно в секции template компонента указать lang="pug":

<template lang="pug">
    .pug-example
        p This is easy tutorial from me to you
        a(href="https://badcode.ru", target="_blank") More interesting stuff on badcode.ru
</template>

<script>
  export default {
  }
</script>

И мы получим ожидаемый результат:

Условные операторы, циклы в шаблонах Vue на Pug

Так же, многие интересуются, как в Pug работать с переменными, передавать параметры компонентам, задавать аттрибуты, или перебирать элементы в цикле v-for, используя PUG. В примере ниже я продемонстрирую работу по каждой из этих простых операций:

<template lang="pug">
  .pug-example
      <!--Условный рендеринг-->
      div
          p(v-if="visibleFirstBlock") First block
          p(v-else) Second block

      <!--Работа с динамическими классами -->
      div(:class="{'first-block': visibleFirstBlock, 'second-block': !visibleFirstBlock}") Info block <b>{{ value }}</b>

      <!--Работа с циклами v-for-->
      div(v-for="(item, index) in items", :key="item.key") {{ item.name }}

      <!--Обработка событий-->
      a(@click="inverseVisibility", href="#") Inverse block visibility
</template>

<script>
  export default {
    data() {
      return {
        visibleFirstBlock: true,
        value: 'Some synamic attribute',
        items: [{name: 'Vue.js', key: 'vue'}, {name: 'Nuxt', key: 'nuxt'}, {name: 'Pug', key: 'pug'}, ]
      }
    },

    methods: {
      inverseVisibility() {
        this.visibleFirstBlock = !this.visibleFirstBlock
      }
    }
  }
</script>

<style scoped>
.first-block {
  background: green;
}
.second-block {
  background: silver;
}
</style>

И в результате мы имеем:

Резюме

В этой статье я показал, как можно добавить возможность работы с шаблонами Pug в Vue.js. Показал пример, как прописать конфиги для проекта созданного через Vue-cli или Laravel. Показал, как в pug работать с синтаксисом Vue: v-for, v-if, переменными и динамическими атрибутами. Благодаря этой статье вы с лёгкостью сможете настроить сборку Vue шаблонов под работу с Pug-ом.