前回でNuxt.jsの環境を作りTypeScriptで開発できるようにしました。

TypeScriptのルールなんかはまた後ほど決めて厳密に書けるようにしたいですが、 あまり厳密にしすぎると使いたいライブラリにTypeScript用の型がなかったりして 型定義ファイルを自作しないといけなくなるので一応jsで書いても動くようにしておくのがベストかなと感じます。

今回はビューの部分をPugにしたり追加でスタイルを書きたいときはSassを扱えるようにしておこうかなと思います。

というのも、UIコンポーネントを使っていてもかゆいところに手が届かなかったりすることって 状況に応じて結構でてくるのでその際は直接CSSを上書きするという方向性で環境を作っていこうと思います。

pugはいわゆるVueのtemplateタグで囲まれた部分をVueで書けるようにするものです。

これは正直好みだと思うのですが、HTMLの閉じタグを書くのが面倒ということで導入したいと思います。

というか案件がそういう構成なのでそういたいだけです（笑）

一応最初にyarn addで必要なもののインストールは済ませておきます。

yarn add pug pug-plain-loader stylus stylus-loader@4.3.3 @nuxtjs/style-resources

stylusに関しては2021/05/26現時点で最新のもの(6.0.0)が対応していないようなので 3つバージョンを下げる必要がありましたのでv4の一番新しい@3.0.2を指定しました。

Stylusにこだわりが無ければSassのほうがいいかもですね。

案件の方はSassでやって個人的にはStylusを使っていこうと思います。

そして記をインストールするだけで特に設定もなくvueの方にlangで使うものを指定すれば動きました。

前回書いたindex.vueを以下のように変更します。

<template lang="pug">
  div
    h1 テストコンポーネントの実装実験
    TestComponent(:user="testUser")
</template>

<style lang="stylus">
body 
  background-color #fcc
</style>


<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import TestComponent from "../components/TestComponent.vue";

@Component({
  components: {
    TestComponent,
  },
})

export default class IndexPage extends Vue {
  myname = {
    name : "なおきーぬ"
  }

  get testUser() {
    return this.myname
  }
}
</script>

今回はStylusで書いてますがStylusの部分をscssに置き換えれば動くと思います。

このままではmixinとかが使い回せないので読み込めるようにします。

nuxt.config.jsをイジる

書き換えた部分を抜粋します。

axiosなんかは元々入ってたので今は変更はなしです。

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/style-resources'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},

  // styls settings
  styleResources: {
    stylus: ['@/assets/stylus/_variables.styl']
  },

@nuxtjs/style-resources

これをモジュールに指定して、 次にそれを使う設定をします。

scssを使いたい人はstylusの部分をscssに変えるといいんじゃないでしょうか。

もちろんyarn add するときもstylus-loaderではなくsass-loaderにする必要があります。

vue側にstyleタグを付けてなにか書かないと読み込まれなかった

stylusを先程設定したところを起点に中でimportやら色々やってるファイルを指定するなら vue側で特にstylusを記述する必要はないかなと思ってstyleタグを消したら読み込まれなくなりました。

<style lang="stylus">
</style>

タグがないとダメなのかなと思って上記の様に空で作っても動かなかったです。

<style lang="stylus">
b
  font-weight:normal;
</style>

とりあえず試しに何でも良いので記述してみるとnuxt.config.jsで指定したファイルが読み込まれました。

ちょっとよくわからん挙動ですね……

おそらCSSはくコンポーネント毎に書くように作られているので こういう仕様なんでしょうか。

私としてはCSS関連は切り分けて管理したい派なのでこの辺の考え方のブッキングが起こってるのかも知れません。

まだNuxtに慣れなさすぎてる感じですね。

確かにメンテ性で考えるとindexでしか使わないスタイルは別のページで読み込む必要はないですからね。

かといってガッツリデザインした場合vueファイルがstyleまみれになるのでよろしくない……

ファイルを切り分けるなら別ファイルに分けてmixinですべて呼び出せるようにして index.vueはそのmixinを呼び出すだけって形がりそうなのかもですね。

とりあえず今はstylusは別に切り分けてこの方法で乗り切ってみようかと思います。

おそらくどこかで壁にぶち当たるとおもうので学ぶのはその時でいいでしょう。

flex関係のcssはstartに注意

justify-content: start;

と書いていたところがあったので怒られました。

justify-content: flex-start;

とするとエラーは消えたので一安心。

pugのファイル分けは廃止

元々はpugをファイル分けしてpugでincludeとかしてたのですが vueの場合はコンポーネント単位で読み込めるのでその必要もなさそうです。

なのでパーツにHTMLを分けたいときはコンポーネント単位でわけていきます。

それにしても普段webpack+Scss+Pugのシンプルな構成で作っていると nuxtはいろんな見えないところが多くてちょっと戸惑いますね。

使ってたら慣れてくるんでしょう。

使いにくいから使わないというのは技術者としては失格ですから頑張って覚えます。