Nuxt.js
JavaScriptフレームワーク
From Wikipedia, the free encyclopedia
Nuxt（ナクスト）は、Vue.js、Nitro、Vite をベースにして開発された、自由かつオープンソースの JavaScript ライブラリである。React をベースにしたフレームワークの Next.js に影響を受けている[1]。
.svg) | |
| 作者 | Alexandre Chopin, Sebastien Chopin, Pooya Parsa |
|---|---|
| 初版 | 2016年10月26日[1] |
| 最新版 | |
| リポジトリ | |
| プログラミング 言語 | TypeScript |
| プラットフォーム | クロスプラットフォーム |
| サイズ | 57 KB |
| サポート状況 | サポート中 |
| 種別 | JavaScript ライブラリ |
| ライセンス | MIT ライセンス[3] |
| 公式サイト |
nuxt |
概要
Nuxt は、ブラウザ側で制御されるシングルページアプリケーション（SPA）としても機能し、サーバ側で描画される静的ウェブページとしても機能する。サーバ側で描画されたページをクライアント側で読み込んだあと、ハイドレーションすることで SPA に移行する。これにより、サーバーサイドレンダリングにおける検索エンジン最適化とパフォーマンスの利点、およびクライアントサイドレンダリングにおけるインタラクティブ性の利点を得られる[4][5]。
Nuxt は、Vue.js の単一ファイルコンポーネントを使用し、サーバサイドレンダリングの複雑な機能を自動的に処理する[6]。
Nuxt は、パスに基づくルーティング、Hot module replacement、標準の TypeScript サポート、ミドルウェア、サーバロジックなど、利便性の高い機能を提供する[7]。
機能
パスに基づくルーティング
通常の Vue.js アプリケーションでは、すべてのルートを手動で登録する必要がある。Nuxt は、パスに基づくルーティングを使用して、アプリケーション内のすべてのルートを自動的に登録する[8]。
ページは app/pages/ フォルダーで宣言され、ページ ファイルの名前がルートの名前になる。ダイナミック ルートは角括弧 [] を使用して追加でき、キャッチオール ルートは JavaScript の配列スプレッド構文のように 3 つのドットと角括弧 [...] を使用して追加できる[9]。
~/pages/about.vue-/aboutに一致する~/pages/user/[id].vue-/user直下のすべてのルートに一致する~/pages/posts/[...slug].vue-/posts直下のすべてのルートに一致する~/pages/admin/[[page]].vue-/adminおよびその直下のすべてのルートに一致する
自動インポート
Nuxt は、Vue.js の API と、app/components/、app/composables/、app/utils/ フォルダーに作成されたファイルを自動的にインポートする[10]。
<script setup lang="ts">
const count = ref(1) // `ref` が自動的にインポートされる
</script>
レイアウト
Nuxt はサーバーサイド レンダリングに適応したレイアウトを標準でサポートしており、ヘッダーやフッターなどの基本的なテンプレートを複数のページで使用できる[11]。レイアウトは app/layouts/ フォルダーで宣言され、Vue.js のスロットを使用して動作する。
レイアウトを使用するには、エントリ ポイントの app.vue にページのレイアウトを切り替える <NuxtLayout> コンポーネントを追加する必要がある[11]。
<!-- app/app.vue -->
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
デフォルトのレイアウトは ~/layouts/default.vue であり、ページ コンテンツ用の <slot> を追加する必要がある。
<!-- app/layouts/default.vue -->
<template>
<div>
<AppHeader />
<slot />
<AppFooter />
</div>
</template>
ページでは、セットアップ関数またはブロックで definePageMeta ヘルパーを使用することで、カスタム レイアウトを使用できる[12]。
<!-- app/pages/about.vue -->
<script setup lang="ts">
definePageMeta({
layout: 'custom',
})
</script>