nuxt.js(v2)でpug/stylusを利用する

pugやstylusなどのインデント記法は、見やすく、そして、誰が書いても綺麗になる(整形ツールいらない)ので好き。
nuxtでは、NPMパッケージをインストールするだけで使える。素晴らしい。

nuxt.js(v2)は設定済みの想定
↓
nuxt.js(v2)の導入方法

1.NPMパッケージをインストール

本体とコンパイルするためのlodaerをインストール
※nuxt.js(v2)から、pug-plain-loaderが必要になっている。忘れずに。

// pug
$ npm i pug pug-loader pug-plain-loader

// stylus
$ npm i stylus stylus-loader

2.動作確認用の記述

pages/index.vueに動作確認用の記述をする。

<template lang="pug">
.container
  h1.red Hello {{ name }}!
</template>

<script>
export default {
  data () {
    return {
      name: '名前'
    }
  }
}
</script>

<style lang="stylus">
.container
    background-color red
    height 100vh
    display flex
    align-items center
    justify-content center
.red
    color #fff
</style>

3.動作確認

$ npm run dev

---

以上…なんだこの簡単さは。すごいぞnuxt!

おまけ
scssを利用したい場合は、

// pug
$ npm i pug pug-loader pug-plain-loader

// scss
$ npm i node-sass sass-loader

<template lang="pug">
.container
  h1.red Hello {{ name }}!
</template>

<script>
export default {
  data () {
    return {
      name: '名前'
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: red;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.red {
  color: #fff;
}
</style>

でインストール。

Link

以下、公開中のnuxt.js(v2)関連の記事一覧

技術よりの記事

1. nuxt.js(v2)のインストール〜ESLint設定まで
2. nuxt.js(v2)の作業ディレクトリを整理
3. nuxt.js(v2)のベースURLをターミナルからコントロール
4. nuxt.js(v2)でpug/stylusを利用する
5. nuxt.js(v2)でIE11対応をする（CSS編）
6. nuxt.js(v2)でIE11対応をする（JS編）
7. nuxt.js(v2)で絶対パス(https~)を取得する方法
8. nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
9. nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす

よく使うプラグインのお話

1. nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
2. nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
3. nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!

まとめ系

1. nuxt.js(v2)でgenerate納品する前にやっておきたい設定
2. nuxt.jsにおける「components」ディレクトリの規約（案）