ヌクスト
ヌクスト
原作者アレクサンドル ショパン、セバスチャン ショパン、プーヤ パルサ
初回リリース2016年10月26日[ 1 ] ( 2016年10月26日)
安定版リリース
4.2.2 [ 2 ] ウィキデータで編集する / 2025年12月9日 （2025年12月9日）
リポジトリ
書かれたタイプスクリプト
プラットフォームクロスプラットフォーム
サイズ57 KBの生産
タイプフルスタックウェブフレームワーク
ライセンスMITライセンス[ 3 ]
Webサイトnuxt.com​

Nuxtは、 Vue.js、Nitro、Viteをベースにした無料かつオープンソースのフルスタックWebフレームワークです。Nuxtは、 Vue JavaScriptライブラリではなくReactをベースにした同様のフレームワークであるNext.js [ 4 ]に触発されています。

Nuxt が Vue 単体よりも優れている主な利点は、その汎用的なレンダリングシステムです。このフレームワークは、ブラウザ内のシングルページアプリケーション(SPA) としても、サーバーレンダリングされた静的ウェブサイトとしても機能します。サーバーレンダリングされたページは、ロード後に完全な SPA に「ハイドレーション」されます。これにより、ウェブサイトは、クライアントレンダリングアプリケーションのインタラクション性に加えて、サーバーレンダリングされたサイトの検索エンジン最適化とパフォーマンスのメリットを享受できます。[ 5 ] [ 6 ] Nuxt はサーバーレンダリング機能の大部分を開発者から抽象化しているため、Vue のシングルファイルコンポーネント(SFC) システムを使用した従来の SPA と同様の開発エクスペリエンスを実現できます。[ 7 ]

Nuxtは、その主力であるユニバーサルレンダリングメカニズムに加えて、パスベースのルーティング、ホットモジュール置換（HMR）、すぐに使用できるTypeScriptのサポート、ミドルウェアとサーバーロジックなど、他の多くの利点と生活の質を向上させる機能も提供します。[ 8 ]

特徴

パスベースルーティング

通常のVue.jsアプリケーションではすべてのルートを手動で登録する必要がありますが、Nuxtはパスベースのルーティングを使用してアプリケーション内のすべてのルートを自動的に登録します。[ 9 ]

ページはフォルダ内で宣言されpages/、ページファイル名がルート名になります。動的なパラメータは角括弧で追加でき、キャッチオールルートはJavaScriptの配列スプレッド構文と同様に、3つのドットと角括弧で追加できます。[ 10 ]

  • /pages/about.vue- /about と一致します。
  • /pages/user/[id].vue- /user 直下のすべてのルートに一致します。
  • /pages/posts/[...slug].vue- /posts 下のすべてのルートに一致します。
  • /pages/admin/[[page]].vue- /admin に加えて、その直下のすべてのルートと一致します。

自動インポート

NuxtはほとんどのVueコンポジションAPI関数とヘルパー関数をおよびフォルダからcomposables/自動的にインポートしますutils/。[ 11 ]

<スクリプトの設定> // ref は自動的にインポートされますconst count = ref ( 0 ); // useRoute も自動的にインポートされますconst route = useRoute (); </スクリプト><テンプレート> <スパン> {{ count }} </スパン> </テンプレート>

レイアウト

NuxtはSSR対応のレイアウトを標準でサポートしており、類似のページでヘッダーやフッターなどの基本テンプレートを共通化できます。レイアウトはlayouts/フォルダ内で宣言され、ネイティブのVueスロットを使用して動作します。

Nuxtプロジェクトでレイアウトを有効にするには、アプリケーションのエントリポイントに、各ページのレイアウトを切り替えるコンポーネントapp.vueを含める必要があります。 [ 12 ]NuxtLayout

<!-- サンプル app.vue ファイルの内容 --> < template > < NuxtLayout > < NuxtPage /> </ NuxtLayout > </ template >

デフォルトのレイアウトは にありlayouts/default.vue、ページ コンテンツ用のスロットを含める必要があります。

<!-- サンプルレイアウトファイルの内容 --> < template > < CustomNavbar /> < slot /> < CustomFooter /> </ template >

definePageMetaページはセットアップ関数またはブロック内のヘルパーを使用することでカスタムレイアウトを使用することができます。 [ 13 ]

<スクリプト設定> definePageMeta ({ layout : "custom" , }); </スクリプト>< template > <!-- これでカスタムレイアウトのスロットが埋められます --> </ template >

ミドルウェア

Nuxtはアプリケーションにミドルウェアのサポートを追加し、ナビゲーションの変更間でサーバーロジックを実行できるようにします。グローバルミドルウェアファイルとページ固有のミドルウェアファイルの両方がサポートされています。 [ 14 ]

ミドルウェアはmiddleware/フォルダ内に宣言されており、現在のルートと以前のルートをパラメータとして受け取る関数をエクスポートします。そこから、abortNavigationやnavigateToといったグローバルに利用可能なヘルパーを使用してナビゲーションを制御できます。[ 15 ] [ 16 ]

export default defineNuxtMiddleware (( to , from ) => { // ナビゲーションロジックif ( to . params . id === "0" ) return abortNavigation (); return navigateTo ( `/users/ ${ to . params . id } ` ); });

サーバーAPI

Nuxtは、フォルダを使用してサーバーAPIルートとハンドラーを生成することもできますserver/。フォルダに配置されたファイルはserver/apiAPIルートとなり、フォルダに配置されたファイルはserver/routesルートファイルとなります。違いは最終的なファイルの場所（server/apiパスにapiプレフィックスを追加する）です。[ 17 ]

// server/api/hello.tsをエクスポートします。defaultdefineEventHandler (( event ) => { return { some : "data here" , }; });

これを、コンポーザブルを使用してコンポーネントから呼び出すことができるようになりましたuseFetch。

<スクリプトの設定> const { data } = await useFetch ( '/api/hello' ) </スクリプト><テンプレート> <プレ> {{データ}} </プレ> </テンプレート>

参照

参考文献

  1. ^ 「Nuxtの最初の公開リリース」。Npm 。
  2. ^ 「リリース 4.2.2」 2025年12月9日. 2025年12月10日閲覧。
  3. ^ "Nuxt/LICENSE" . GitHub . 2023年12月19日閲覧。
  4. ^ 「Nuxt 初の一般公開リリース」 . Npm . 2017年3月23日閲覧。
  5. ^オモレ、オラインカ (2019 年 3 月 18 日)。「Nuxt: ユニバーサル Vue.js アプリケーション フレームワーク」サイトポイント。2020 年6 月 18 日に取得。
  6. ^ Berning, Dave (2018-04-16). 「Nuxtを使ったサーバーサイドレンダリング入門」 . Alligator.io . 2018年7月2日閲覧。
  7. ^ 「Vue.js開発・Nuxtの概念」 . Nuxt . 2025年2月9日閲覧。
  8. ^ 「Nuxt入門・Nuxtを使ってみよう」 . Nuxt . 2025年2月9日閲覧。
  9. ^ 「ルーティング · Nuxtを使い始める」 . Nuxt . 2025年3月6日閲覧。
  10. ^ "pages/ · Nuxt ディレクトリ構造" . Nuxt . 2023年8月19日時点のオリジナルよりアーカイブ。2025年3月6日閲覧。
  11. ^ 「自動インポート · Nuxt の概念」 . Nuxt . 2025年3月6日閲覧。
  12. ^ 「Views · Nuxtを使い始める」 . Nuxt . 2025年3月6日閲覧。
  13. ^ "layouts/ · Nuxt ディレクトリ構造" . Nuxt . 2025年3月6日閲覧。
  14. ^ "middleware/ · Nuxt ディレクトリ構造" . Nuxt . 2025年3月6日閲覧。
  15. ^ "abortNavigation · Nuxt Utils" .ナクスト。2025 年 3 月 6 日に取得。
  16. ^ "navigateTo · Nuxt Utils" . Nuxt . 2025年3月6日閲覧。
  17. ^ "server/ · Nuxt ディレクトリ構造" . Nuxt . 2025年3月6日閲覧。
「 https://en.wikipedia.org/w/index.php?title=Nuxt&oldid=1331100583」から取得