Nuxt.js

Nuxt（ナクスト）は、Vue.js、Nitro、Vite をベースにして開発された、自由かつオープンソースの JavaScript ライブラリである。React をベースにしたフレームワークの Next.js に影響を受けている。

 概要 

Nuxt は、ブラウザ側で制御されるシングルページアプリケーション（SPA）としても機能し、サーバ側で描画される静的ウェブページとしても機能する。サーバ側で描画されたページをクライアント側で読み込んだあと、することで SPA に移行する。これにより、サーバーサイドレンダリングにおける検索エンジン最適化とパフォーマンスの利点、およびクライアントサイドレンダリングにおけるインタラクティブ性の利点を得られる。

Nuxt は、Vue.js の単一ファイルコンポーネントを使用し、サーバサイドレンダリングの複雑な機能を自動的に処理する。

Nuxt は、パスに基づくルーティング、Hot module replacement、標準の TypeScript サポート、ミドルウェア、サーバロジックなど、利便性の高い機能を提供する。

 機能 

 パスに基づくルーティング 

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

ページは app/pages/ フォルダーで宣言され、ページ ファイルの名前がルートの名前になる。ダイナミック ルートは角括弧 [] を使用して追加でき、キャッチオール ルートは JavaScript の配列スプレッド構文のように 3 つのドットと角括弧 [...] を使用して追加できる。

 ~/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/ フォルダーに作成されたファイルを自動的にインポートする。

<script setup lang="ts">
const count = ref(1) // `ref` が自動的にインポートされる
</script>

 レイアウト 

Nuxt はサーバーサイド レンダリングに適応したレイアウトを標準でサポートしており、ヘッダーやフッターなどの基本的なテンプレートを複数のページで使用できる。レイアウトは app/layouts/ フォルダーで宣言され、Vue.js のスロットを使用して動作する。

レイアウトを使用するには、エントリ ポイントの app.vue にページのレイアウトを切り替える <NuxtLayout> コンポーネントを追加する必要がある。

<!-- 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 ヘルパーを使用することで、カスタム レイアウトを使用できる。

<!-- app/pages/about.vue -->
<script setup lang="ts">
definePageMeta({
  layout: 'custom',
})
</script>

 関連項目 

 Vue.js
 Vite
 Next.js
 Angular
 Web アプリケーション フレームワーク

 脚注 

 出典 

 外部リンク 




カテゴリ:ウェブアプリケーションフレームワーク
カテゴリ:JavaScriptウェブアプリケーションフレームワーク
カテゴリ:静的サイトジェネレーター