⚡

【Nuxt Vite】Nuxt3はまだだけど、現行NuxtにVite導入してPugとStylusを使用するまで

2021/12/31に公開

JavaScript

Nuxt

Vue.js

tech

概要

Nuxt3は、2021年12月現在でbeta版です。
Vue3を使用していたり、TypeScriptが使いやすくなっていたりと大きな進化があるようですが、バンドラーツールに焦点を絞るとWebpack5 or Viteを使用しているようです。
自分でも試してみたのですがViteを使用しているNuxt3は開発体験がめちゃくちゃいいです。
ほんとサクサク動きます。
じゃあNuxt3使っていこうぜとなるのですが、 beta版ですしSSGまだ使えないしで実践投入はまだ先になりそうです。
そこで、Viteだけ先行体験してみようということで、現状のNuxtにVite組み入れてサクサク開発体験をしてみようと思います。

Version

nuxt v2.15.8
nuxt-vite v0.3.5

手順

Nuxtのインストール

まずはNuxtをインストールしてください。新しいことはないです。

yarn create nuxt-app <project-name>
cd <project-name>
yarn dev

Viteのインストール

Nuxt Viteという、NuxtにViteを入れられるモジュールがあるのでありがたく使います。ちなみにこのモジュールはすでにdepricatedであり、NuxtV2からV3を橋渡しするバージョンであるNuxtBridgeに吸収されています。

yarn add --dev nuxt-vite

nuxt.config

viteをnuxtに設定してみましょう。

nuxt.config.js

export default {
  buildModules: [
    'nuxt-vite'
  ]
}

これでviteが動作しました！

Pugを使う

続いてpugですが、これは簡単でpugをインストールするだけで動きました。

yarn add --dev pug

Stylusを使う

続いてstylusをインストールします。

yarn add --dev stylus

これで各コンポーネントで使えるようにはなるのですが、
一番やりたいことはグローバルに設定した変数や関数を使えるようになることですよね。
今まで@nuxtjs/style-resourcesを使えばできたのですが、今回WebpackじゃなくてViteつかってるのでこのモジュールは使えません。
ここはViteの設定で解決します。

先に答えから書くとこちら。

nuxt.config.js

import path from "path";

export default {

  buildModules: [
    'nuxt-vite'
  ],

  vite: {
    ssr: true,
    css: {
        preprocessorOptions: {
            stylus: {
                sourceMap: false,
                imports: [path.resolve(__dirname, 'assets/_stylus/style.styl')]
            },
        },
    },
  },
}

僕はassets/_stylus/style.stylを設定しているのですが、場所・名前は好きなところでよいです。
この設定、めちゃくちゃ詰まったのですがこちらのgithubのissueで解決できました。

ちなみにこれはNuxt3でも使えます！

最後に

まだNuxt Viteは実験的な機能であり、これに対応していないmoduleが多いことはご了承ください、というか僕も半信半疑ですが今のところ困ったところはないです！
webpack使ってないってことは、〇〇_loaderとかが全部使えないってことですからね。
開発が早くなる分には嬉しいですが、今まで長い時間かけて学習してきたwebpackの知見全部いらなくなるわけですから、フロントエンドの進化の早さは本当に恐ろしいですね。

以上です。