ハコザキです。
今回は高速なビルドツールとして話題のViteを使ってNuxtを動かしてみたいと思います！

Viteとは

Vite（ヴィート）はVueJSの開発者であるEvan You氏が開発したノーバンドルなビルドツールです。
ReactやSvelteなどにもサポートしており、
より速く・より無駄のない開発環境を提供することを目的としてます。

モダンブラウザには対応してますが、 IE11などのレガシーなブラウザにも対応させるには別途 @vitejs/plugin-legacyを入れる必要があります。

2021年7月時点で公式サイトが日本語対応されたとのことで、
かなりアツいビルドツールとなっております。

Node.jsのバージョンが12以降であればViteを動かすことができるため、 今回は14.8.0で実行しております。
バージョンの切り替えはnodenvなどを用いてみてください。

Vue × Vite

Vueの場合はVue3がデフォルトになっております。
ViteではVue3の他に下記のテンプレートプリセットがあります。詳細はこちら

• vanilla
• vanilla-ts
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts
• svelte
• svelte-ts

プロジェクト作成

# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+ は追加で 2 つのダッシュが必要:
npm init vite@latest my-vue-app -- --template vue

or

# yarn
yarn create vite my-vue-app --template vue

このような画面が表示されればokです。

上記コマンドの通りに実行

cd my-vue-app
yarn 
yarn dev

このような画面が表示されれば環境構築は完了でVue3での開発が可能になります！

プロジェクトの初期状態はこのような感じです。

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

また、Vue CLIで作られた環境にVite環境を入れ、 ビルドにだけViteを活用させる vue-cli-plugin-vite もあるようなので、すでにVue CLI環境で開発している方も試してみてはいかがでしょうか。

Nuxt × Vite

Nuxtの場合はテンプレートプリセットにはないため、 nuxt-vite と呼ばれるパッケージを使用します。
Nuxtプロジェクト内のWebpackの代わりにViteを使用するようにしてます。
公式サイトはこちら

※ こちらはまだ実験段階のものなので多くのnuxtモジュールとの互換性はないそうです..

プロジェクト作成

まずはNuxtプロジェクトを作成します。Nuxtのバージョンは2.15以上です。

yarn create nuxt-app my-nuxt-app

上記コマンドの通りに実行で通常のNuxtプロジェクトは作成できました。

cd my-nuxt-app
yarn dev

cd my-nuxt-app
yarn dev

Viteの設定

次に nuxt-vite をインストールします

yarn add --dev nuxt-vite

nuxt.config.jsに追記します

export default {
	...
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    'nuxt-vite' // 追加
  ],
	...
}

再度 yarn dev を実行しこのように表示されればViteモードで起動できてます！

SSRに対応させる

ビルド時に

You can enable unstable server-side rendering using `vite: { ssr: true }` in `nuxt.config`

とあるように不安定ですがssrに対応してるそうです。

nuxt.config.js

vite: {
  ssr: true
},

Rendering部分が server-side になっていることを確認しました。

Sassでエラー

Sassをつかえるようにするためこちらの記事の通りに進めると下記のエラーが出ました。

ERROR  13:15:33 [vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?

Nuxt Vite 自体のバージョンを下げると動作しました。

yarn add --dev nuxt-vite@0.1.0

StyleResourceでエラー

StyleResourceを用いて@/assets/scss/_variables.scssを読み込み、 下記の設定をしたところエラーが出ました。

nuxt.config.js

styleResources: {
  scss: ['~/assets/scss/_variable.scss'],
},

公式サイトにもありますが、StyleResourceはWebpackに依存しており nuxt-vite にはまだサポートされていないとのことでした…

代替案として記載があったようにこちらの設定に変更することで動作しました。

nuxt.config.js

...
vite: {
  ssr: true,
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/scss/_variables.scss"; ',
      },
    },
  },
},
...

この他にも公式のissueとしていくつか問題点があり、また最終更新日が2ヶ月前と少し停滞気味..?なためまだ実運用では使うのは少し危ないと思いました。
ですが確かにビルド速度は初期プロジェクトの状態でも明らかに早くなっているのを実感したので、
Nuxtのモジュール等がサポートされれば使いたいと思いました。

また、ViteでVueを扱うにはVue3がデフォルトになってますが、現在NuxtはVue3をサポートしておりません…
NuxtのVue3サポートについてはこちらのディスカッションにあるように、
2021年の8月にはパブリックベータ版が公開、2021年中には安定版がリリースされるそうです！
（ nuxt-vite がしばらくアップデートされていないのも もしかしたらVue3サポート後に再開するかもしれません）