Nuxt
.svg) | |
| 作者 | 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）としても機能し、サーバ側で描画される静的ウェブページとしても機能する。サーバ側で描画されたページをクライアント側で読み込んだあと、ハイドレーションすることで 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>
関連項目
[編集]脚注
[編集]出典
[編集]- 1 2 “Nuxt の最初の一般公開リリース” (英語). npm. 2025年10月14日閲覧。
- ↑ “Release 4.6.0”. 5 October 2026. 2026年10月6日閲覧.
- ↑ “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日閲覧。
- 1 2 “Views · Get Started with Nuxt v4” (英語). Nuxt. 2025年10月14日閲覧。
- ↑ “layouts · Nuxt Directory Structure v4” (英語). Nuxt. 2025年10月14日閲覧。