くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > Nuxt3をほんのちょっと試してみた

Nuxt3をほんのちょっと試してみた

Nuxt.js

Nuxt3がパブリックベータになったので、ちょっとさわってみたときの備忘録。
雛形プロジェクト作って、ドキュメントを読んだ程度。。

Vue3になったのも含め、結構変わっているけど、
かなりはやくなった感じがする(´ω｀)

Nuxtのプロジェクトの作成

# プロジェクトの作成
$ npx nuxi init nuxt3-app

# ライブラリのインストール
$ cd nuxt3-app
$ npm i

・Nuxt 3 - Installation
・Nuxt 3 - Commands

Nuxt3アプリの起動/ビルド

# Dev Serverの起動(nuxi dev)
$ npm run dev -- -o
$ npx nuxi dev -o

# ビルド(nuxi build)
$ npm run build
$ npx nuxi build -o

# 起動(nuxi start)
$ npm run start
$ npx node .output/server/index.mjs

Nuxt3からNitro serverを使うようになったよう。 ビルド時に生成されるファイルは、.outputに出力されるようになっている。

・Nuxt 3 - Installation
・Nuxt 3 - Commands

ほかにも以下のコマンドがあるよう。

# Nuxt3のバージョンをアップグレード
$ npx nuxi upgrade

# vue-tscを使ったtype check
$ npx nuxi typecheck

ディレクトリ構成

雛形でのディレクトリ構成はこんな感じ。
かなりミニマムになった。

.
├── .nuxt
├── .output
├── node_modules
├── app.vue
├── nuxt.config.ts
├── package.json
├── package-lock.json
├── tsconfig.json
├── .gitignore
└── README.md

・Nuxt 3 - Nuxt directory

app.vueが登場し、pages/やlayouts/がオプショナルになった。
もちろん、従来どおり、pages/やlayouts/も利用することができる。

pages/がないと、vue-routerを除くことができ、
LPや単一ページなどvue-routerが不要な場合に、
バンドルサイズを削減できるようになっている。

ざっとみて気になったところ

書き方はかなり変わるけど、かなり便利にそうな感じがする。
あとはよく使ってるnuxtのモジュールがどうなるか。。

Incremental Static Generation(ISG)も期待。。(´ω｀)

参考にしたサイトさま