Vue.jsでPugを使ってみる

やること

HTMLが簡単に書けるテンプレートエンジンであるPugをVue.jsで使ってみます。

環境構築

vue-cliのインストール

VueCLIを使うので入れていない場合はインストールします。

$ npm install -g @vue/cli

プロジェクトの作成

適当な名前でプロジェクトを作成します。
--defaultはセットアップをデフォルト設定で行うことを指定するオプションです。

$ vue create pug-test --default
$ cd pug-test

Pug関連のパッケージのインストール

次にVue.jsでPugを使うために必要なパッケージをインストールします。
プロジェクトのルートフォルダへ移動したことを確認してから以下のコマンドを実行してください。
ESLintを無効にしている場合はeslint-plugin-pugを含める必要はありません。

$ npm install --save-dev pug pug-plain-loader eslint-plugin-pug

vueファイルでの使い方

さっそく使ってみます。

src/App.vueを開いて1行目にlang="pug"を追加してください。
これはtemplateタグ内でPugを使用するという宣言です。

# App.vue
<template lang="pug>
...略

Pugが有効になっているはずなので適当に書いてみます。

<template lang="pug">
  div
    h1 This is a Pug example
    #container
      p Hello world!
</template>

ファイルを変更して保存したら
コマンドラインでnpm run serveとしてください。
ブラウザでlocalhost:8080を開いてきちんと表示されて入れば成功です。