Nuxt.js
 |
.svg?lang=ja) | |
| 作者 | Alexandre Chopin, Sebastien Chopin, Pooya Parsa |
|---|---|
| 初版 | 2016年10月26日[1] |
| 最新版 | |
| リポジトリ | |
| プログラミング 言語 | TypeScript |
| プラットフォーム | クロスプラットフォーム |
| サイズ | 57 KB |
| サポート状況 | サポート中 |
| 種別 | JavaScript ライブラリ |
| ライセンス | MIT ライセンス[3] |
| 公式サイト |
nuxt |
Nuxt（ナクスト）は、Vue.js、Nitro、Vite をベースにして開発された、自由かつオープンソースの JavaScript ライブラリである。React をベースにしたフレームワークの Next.js に影響を受けている[1]。
概要
[編集]Nuxt は、ブラウザー側で制御されるシングルページ アプリケーション（SPA）としても機能し、サーバー側で描画される静的 Web サイトとしても機能する。サーバー側で描画されたページをクライアント側で読み込んだあと、ハイドレーションすることで 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>
関連項目
[編集]脚注
[編集]出典
[編集]- ^ a b “Nuxt の最初の一般公開リリース” (英語). npm. 2025年10月14日閲覧。
- ^ “Release 4.2.0”. 25 October 2025. 2025年10月25日閲覧.
- ^ “Nuxt のライセンス” (英語). GitHub. 2025年10月14日閲覧。
- ^ Omole, Olayinka (2019年3月18日). “Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps” (英語). SitePoint. 2025年10月14日閲覧。
- ^ Berning, Dave (2018年4月16日). “Getting Started with Server-Side Rendering Using Nuxt.js” (英語). DigitalOcean. 2025年10月14日閲覧。
- ^ “Vue.js Development · Nuxt Concepts v4” (英語). Nuxt. 2025年10月14日閲覧。
- ^ “Introduction · Get Started with Nuxt v4” (英語). Nuxt. 2025年10月14日閲覧。
- ^ “Routing · Get Started with Nuxt v4” (英語). Nuxt. 2025年10月14日閲覧。
- ^ “pages · Nuxt Directory Structure v4” (英語). Nuxt. 2025年10月14日閲覧。
- ^ “Auto-imports · Nuxt Concepts v4” (英語). Nuxt. 2025年10月14日閲覧。
- ^ a b “Views · Get Started with Nuxt v4” (英語). Nuxt. 2025年10月14日閲覧。
- ^ “layouts · Nuxt Directory Structure v4” (英語). Nuxt. 2025年10月14日閲覧。