Nuxt 3の最初の観察

We are excited to open source Nuxt 3 after more than a year of intense development. On top of supporting Vue 3 or Vite, Nuxt 3 contains a new server engine, unlocking new full-stack capablities to Nuxt server and beyond.

Introducing Nuxt 3 Beta

Nuxtの目標は、念頭に置いて偉大な開発者の経験を維持しながら、直感的で、ウェブ開発を行うことです.オリジナルのバージョンSébastien Chopin in October 2016 次の機能をエミュレートします.しかし、代わりにVueと反応する.バージョン3はover a year in the making そして、以下から成りますcore packages :

コアエンジンnuxt3

バンドル@nuxt/vite-builder and @nuxt/webpack-builder

コマンドラインインターフェースnuxi

サーバーエンジン@nuxt/nitro

開発キット@nuxt/kit

Nuxt 2ブリッジ:@nuxt/bridge

これらのパッケージは、Web上で構築する開発者向けの多くの一般的な懸念を管理するためのライブラリの選択を提供します.

反応性とWebコンポーネントをもたらすJavaScriptフレームワークVue.js

ホットモジュール置換をサポートするバンドルWebpack 5 and Vite 両方とも

レガシーブラウザーをサポートしながら最新のJavaScript構文を記述するためのトランスポーターesbuild

開発とサポートにアプリケーションを提供できるサーバserver-side rendering またはAPIルート-h3

クライアント側ナビゲーションを扱うためのルーティングライブラリvue-router

これらのツールをキュレーションして、統合することに加えて、Nuxtもページと構成要素を管理するためにディレクトリ構造規則を提供します.

Nuxt 2プロジェクトをNuxt 3に移行する方法
Nuxt 2プロジェクトを持っていない場合は、セクションに進んでください
現時点ではNuxt 3の移行ガイドにNuxt 2はない、それは潜在的により多くの変更が来るために推奨されています.チームは、NXT橋の形で可能な限りスムーズにするために安定した移行ガイドとツールを提供するために働いています.あなたが既存のNuxT 2プロジェクトを持っているならば、チームは強くあなたが壊変変化を避けている間、Nuxt橋を新しい特徴で実験するために始めることを勧めます.ブリッジは、Nuxtモジュールをインストールして、有効にすることによって、新しいNuxt 3機能を経験することができる前方互換性層です.
すべてのNuxt 2モジュールは、彼らがブリッジに移行するか、彼らがすでにガイドラインに従っているならば、Nuxt 3とフォワード互換性を持つべきです.すべてのモジュール@nuxt/kit 彼らはNuxt 3/ブリッジのみの機能に依存していない限り、Nuxt 2プロジェクト(ブリッジなしで)と後方互換性があります.Nuxt 3はネイティブ的にtypescriptとecmascriptモジュールをサポートしているので、CommonJackの構文を避けるのは便利です__dirname , __filename , require() , and module.exports できるだけ.

オンラインで試してください
我々はゼロからNuxtアプリケーションを構築する予定です.しかし、あなたはどちらかであなたのブラウザーでNuxtStackBlitz or CodeSandBox .

ゼロからNuxt 3プロジェクトをつくってください
プロジェクトは3つのファイルだけから始まります.

.gitignore 誤ってコミットされないものをコミットするのを避ける

package.json スクリプトと依存関係を定義するには

app.vue Vueアプリケーションを表示するには

ディレクトリを作成しますpages とapi 後で.

mkdir ajcwebdev-nuxt3
cd ajcwebdev-nuxt3
touch package.json app.vue
echo 'node_modules\n.DS_Store\n*.log\n.nuxt\nnuxt.d.ts\n.output' > .gitignore

この記事のすべてのコードを見つけることができますon my GitHub .

アプリケーションファイルapp.vueThe app.vue ファイルは、Nuxt 3アプリケーションの主なコンポーネントです.Nuxt 3 ,pages/ ディレクトリはオプションで、存在しない場合はNuxtは含まれませんvue-router 依存.これは、ランディングページまたはルーティングを必要としないアプリケーションで作業するときに便利です.

<!-- app.vue -->

<template>
  <div>
    <h2>ajcwebdev-nuxt3</h2>
  </div>
</template>

app.vue NuXTアプリケーションの主なコンポーネントとして機能します.これはJavascriptやCSSのようなグローバルなものになり、すべてのページに含まれています.
package.jsonあなたのpackage.json , 次のスクリプトを追加しますdev , build , and start ) とともにlatest バージョンnuxt3 開発依存.

{
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "start": "node .output/server/index.mjs"
  },
  "devDependencies": {
    "nuxt3": "latest"
  }
}

NuxiはNuxt 3用の新しいCLIです.

nuxi dev - 開発サーバ

nuxi build - 生産資産を作る

また、私たちはstart ノードを使用して、サーバーのために生成された束の出力を実行するスクリプトnuxi build .

開発サーバ
The yarn dev コマンドは、開発モードでNuXTアプリを起動し、ホットモジュールの置換が含まれます.を含めることができます--open フラグを自動的に起動後にブラウザを開きます.

yarn dev

CLIは、実行中のアプリケーションとパフォーマンスのメトリクスにリンクを表示します.

Nuxt CLI v3.0.0-27237303.6acfdcd

  > Local:    http://localhost:3000/
  > Network:  http://192.168.1.242:3000/

ℹ Vite warmed up in 592ms
✔ Generated nuxt.d.ts
✔ Vite server built in 903ms
✔ Nitro built in 112 ms

オープンlocalhost:3000 あなたのアプリケーションを参照してください.


ビルドフォープロダクション
The yarn build コマンドは、生産のためにあなたのNuxTアプリケーションを構築します.それは.output 配備される準備ができているあなたのアプリケーション、サーバーと依存関係をもつディレクトリ.

yarn build

Nitroは独立している独立型サーバDISTを生成しますnode_modules . 出力は、両方のランタイムコードを使用してNuXTサーバーを任意の環境で実行し、静的なファイルを提供しています.ネイティブストレージ層も、マルチソース、ドライバとローカル資産をサポートするために実装されます.

ページディレクトリ
The pages/ ディレクトリはオプションです.app.vue , vue-router 含まれないでください、あなたのアプリケーション束サイズを減らしてください.しかし、あなたがそれを含むならば、nuxtは自動的に統合しますVue Router とマップpages/ ディレクトリをアプリケーションのルートにします.

rm -rf app.vue
mkdir pages
touch pages/about.vue pages/index.vue

削除app.vue で、以前のホームページのコンテンツが含まれますindex.vue .

<!-- pages/index.vue -->

<template>
  <div>
    <h2>ajcwebdev-nuxt3</h2>
  </div>
</template>

また、作成about.vue アバウトページ.人々があなたのものについてのものを知っていることを確認するために、以下のコードを含めてください.

<!-- pages/about.vue -->

<template>
  <div>
    <h2>This page tells you stuff about things!</h2>
  </div>
</template>

オープンlocalhost:3000/about .


サーバエンジン
Nuxt 3はNitroと呼ばれる新しいサーバエンジンによって供給されます.ニトロは開発・生産に使われる.これは、ノードのクロスプラットフォームのサポートが含まれます.JS、ブラウザー、およびサービスの労働者とボックスのサーバーレスサポート.その他の機能は、APIルート、自動コードの分割、非同期ロードチャンク、およびハイブリッド静的/無制限のモードが含まれます.サーバAPIエンドポイントと内部的に使用するミドルウェアh3 をニトロに加える.

ハンドラは、直接処理されたJSONレスポンスのオブジェクト/配列を直接返すことができます

ハンドラは約束を返すことができます.res.end() and next() もサポートされている).

ボディー解析、クッキー処理、リダイレクト、およびヘッダーのためのヘルパー機能

ニトロは、グローバルに利用可能なルートの直接の呼び出しを許可します$fetch ヘルパー.これは、ブラウザ上で実行されている場合は、サーバーへのAPI呼び出しを行いますが、サーバー上で実行する場合は、関連する関数を呼び出すだけで、追加のAPI呼び出しを保存します.The $fetch API使用ohmyfetch です.

JSON応答を自動的に解析する

リクエスト本体とparamsを自動的に処理するContent-Type ヘッダ追加

APIルート用のサーバディレクトリ
The server/ ディレクトリには、プロジェクトのAPIエンドポイントとサーバーミドルウェアが含まれます.これは、Nuxtアプリケーションのバックエンドロジックを作成するために使用されます.Nuxtは自動的に任意のファイルに読み込まれます~/server/api APIエンドポイントを作成するディレクトリ.各ファイルはAPIリクエストを処理するデフォルト関数をエクスポートします.

mkdir -p server/api
touch server/api/hello.js

次のコードを追加しますhello.js .

// server/api/hello.js

export default (req, res) => '<h2>Hello from Nuxt 3</h2>'

オープンlocalhost:3000/api/hello .


Netlifyへの配備
あなたがJamstackプラットホームでそれを展開することができないならば、フレームワークのポイントは何ですか?

touch netlify.toml

[build]
  command = "yarn build"
  publish = "dist"
  functions = ".output/server"

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/index"
  status = 200

リポジトリの作成

git init
git add .
git commit -m "the nuxt best thing"
gh repo create ajcwebdev-nuxt3
git push -u origin main

NetLifyアカウントにレポを接続します.

ビルドコマンドと発行ディレクトリはnetlify.toml ファイル.

最後に、カスタムドメインを与えます.

オープンajcwebdev-nuxt3.netlify.app/ .