nuxt とは？初心者が知っておくべき基本と使い方共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

nuxt とは？初心者にもわかる基本解説

nuxt とは、Vue.js を使ってウェブアプリを作るためのフレームワークです。nuxt は「サーバーサイドでページを生成する機能（SSR）」や「静的なサイトをつくる機能（SSG）」を簡単に使えるようにしてくれます。初心者でも扱えるように、ページの作り方や設定のコツをまとめました。

nuxt の大きな特徴は、ファイル構成だけでルーティング（URL と対応するページ）を自動的に作れること、コードの分割を自動で行い読み込みを速くすること、そして プラグインやモジュールを追加しやすいこと です。これらの機能のおかげで、複雑な設定を自分で書く時間を減らせます。

使い始める流れはこうです。まず新しい nuxt プロジェクトを作成し、pages ディレクトリに自分のページを作ります。nuxt はこの pages ディレクトリを検知して自動的に URL を作ってくれます。次に layouts や components を使って画面の共通部分をまとめ、store でデータを管理します。必要なら プラグイン や モジュール を追加して機能を拡張します。

nuxt は サーバーサイドレンダリング（SSR） と 静的サイト生成（SSG） の両方を使い分けられます。初心者にはまず SSR/SSG の概念を知ることが大切です。SSR は初回表示を速くするのに向いており、SSG は静的なページをたくさん作るときに便利です。これらを使い分けると、訪問者が快適にページを読むことができます。

最後に、nuxt のメリットと注意点です。メリットは、開発が速いこと、SEO 対策が自然にやりやすいこと、そして拡張性が高いことです。注意点としては、初心者のうちは公式のドキュメントを読み、サンプルを丁寧に追いながら進めることです。複雑な機能をいきなり使おうとせず、基本を固めることが大切です。

特徴	ファイル構成だけでルーティングが決まる、SSR/SSG 対応、モジュールで拡張可能
用途	サーバーサイド表示が必要なサイト、静的サイト、ダッシュボードなど
学習難易度	Vue 知識があれば取り組みやすい。公式ドキュメントを順に追うと良い

nuxt を使わなくても Vue.js の学習は続きますが、nuxt を取り入れると開発が楽になり、実務での活用範囲も広がります。まずは小さなプロジェクトから始めて、徐々に慣れていきましょう。

nuxtの関連サジェスト解説

nuxt ui とは: nuxt ui とは、Nuxt.js 向けの UI 部品を集めたライブラリやデザインシステムの総称です。Nuxt は Vue をベースにしたフレームワークで、サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)が得意です。見た目のデザインを自分でゼロから作ると時間がかかるので、nuxt ui のような UI 材料を使うと開発速度が上がり、全体のデザインの統一感も保てます。使い方は大まかに三つです。まず、パッケージを導入します。次に、アプリに読み込み、公式ドキュメントの指示に従って設定を行います。最後に、ページのテンプレート上で提供されている部品（ボタン、カード、フォーム、ナビゲーションなど）を呼び出して使います。部品名はライブラリごとに違いますが、一般に色・サイズ・形を props や属性で調整し、テーマを変更して全体の見た目を一括で変えることができます。nuxt ui の利点は、デザインの一貫性、アクセシビリティを意識した部品が揃っている点、レスポンシブ対応、そして開発を速く進められる点です。一方で注意点もあります。ライブラリに依存する設計になるため、軽量化やカスタマイズが難しくなることがあるのと、学習コストがかかることです。小規模なサイトではむしろオーバースペックになり得るので、必要性を見極めて導入すると良いでしょう。
nuxt nitro とは: nuxt nitro とは、Nuxt.js の新しいサーバーエンジンのことです。Nuxt は Vue.js を使った人気のあるフレームワークですが、Nitro はその背後で動く“動く仕組み”をまとめた名前です。Nitro は SSR（サーバーサイドレンダリング）、SSG（静的サイト生成）、API ルートの実行といった処理を一本のエンジンで扱えるように設計されています。さらに Nitro は環境を選ばず動かせるアダプター機能を持っており、従来のサーバー環境だけでなく、Node.js のほか、サーバーレスな環境やクラウドの様々な実行環境にも対応します。これにより、開発者は同じコードベースで複数のデプロイ先を使い分けられます。使い方はとてもシンプルです。Nuxt 3 のプロジェクトを作成すると Nitro が自動で組み込まれ、特別な設定をしなくても動き始めます。デプロイ時にアダプターを選ぶだけで、Vercel・Netlify・Node 環境など、どこにホストしても動く設計です。アダプターは nuxt.config で設定します。例えば vercel アダプターを使えば Vercel 側の最適化を活用できます。Nitro の利点は、ページの表示速度を速く保ちながら、開発時の負担を減らせる点です。Nuxt Nitro を理解すると、サーバーサイドの処理がどのように分離され、どの環境でも同じコードで運用できるという点が見えてきます。初心者でも覚えるポイントは、『Nitro は Nuxt の中のサーバーエンジンで、アダプターを介して実行環境を変えられる』ということです。
nuxt store とは: nuxt store とは、Nuxt.js アプリケーションの中でデータの“現在の状態”を一か所に集めて管理する仕組みのことです。普通のウェブページでは、ページごとにデータを作ることもできますが、複数のページで同じ情報を使うと、矛盾が起きやすく、管理が大変になります。そこで store を使えば、ユーザーがログインしているかどうか、買い物かごの中身、表示済みの記事のリストなどを一つの場所で更新・参照できます。Nuxt.js では、特に状態を一元的に管理するための仕組みとして Vuex というライブラリが使われます。Nuxt 2 のプロジェクトでは store フォルダが自動的に認識され、store/index.js を作るだけで準備が整います。state で現在のデータを用意し、getters で読み出す方法、mutations でデータを変える方法、actions で非同期処理を扱う方法を定義します。以下は基本的な例です。 // store/index.js export const state = () => ({ user: null, cart: [] }) export const getters = { isLoggedIn(state) { return !!state.user }, cartCount(state) { return state.cart.length } } export const mutations = { setUser(state, user) { state.user = user }, addToCart(state, item) { state.cart.push(item) } } export const actions = { login({ commit }, user) { commit('setUser', user) } } このように定義したデータは、ページや部品から this.$store.state.cart のように参照したり、mapState で結びつけて表示することができます。Nuxt の便利さは、データを一か所で管理できる点と、サーバーサイドとクライアントの両方で同じデータを扱える点です。ただし Nuxt 3 では Vuex の代わりに Pinia という新しいストアを使う流れが主流になっています。分かりやすさを優先して、まずは Nuxt 2 の Vuex の使い方を覚え、将来 Nuxt 3 へ移行する時は Pinia の導入を検討すると良いでしょう。
nuxt.config.ts とは: nuxt.config.ts とは、Nuxt.js のプロジェクト全体を決める設定ファイルです。ファイル名は nuxt.config.ts で、TypeScript を使って書きます。Nuxt にとってこのファイルは“地図”のような役割で、アプリがどんな機能を持つか、どんなプラグインを使うか、写真（関連記事：写真ACを三ヵ月やったリアルな感想【写真を投稿するだけで簡単副収入】）のように静的な情報をどう配布するかを指示します。主な役割は次の通りです。まずグローバルに読み込む CSS やフォント、使うモジュールをここで指定します。次に runtimeConfig でサーバーのURLや秘密のキーを安全に設定できます（public と private に分けて扱います）。他にもページのルールやビルドの設定、Vite の設定などをここに集めます。書き方の例は次のとおりです。import { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({ css: ['~/assets/styles.css'], runtimeConfig: { public: { apiBase: 'https://api.example.com' } }})このように nuxt.config.ts に書いた設定は、開発サーバを動かすときやビルドするときに Nuxt が読み込みます。TypeScript で書く利点は、型チェックのおかげでスペルミスや間違いを早く見つけられることと、エディタの補完が効くことです。初心者のうちは最初は迷うかもしれませんが、設定の仕組みを理解するとサイト作りが楽になります。
nuxt composables とは: nuxt composables とは、Vue 3 のコンポジション API を使って、アプリ内で繰り返し使う処理をまとめた小さな関数のことです。Nuxt 3 では /composables ディレクトリに置くと、自動的に利用でき、useFetch や useAsyncData などの組み込み関数と組み合わせてデータ取得や状態管理を一元化できます。これにより、同じ機能を複数のページで再利用でき、コードの見通しがよくなり、保守もしやすくなります。実務では、データの取得・整形・キャッシュ・エラーハンドリングなどを1つの composable にまとめ、必要なときだけその関数を呼び出す形にします。作成した composable は、use で始まる名前を付けると Nuxt/Vue の慣習に合い、例として useUserData や useTheme などと名付けると理解しやすくなります。Nuxt 3 ではこの /composables ディレクトリのファイルは自動的に読み込まれるため、各ページで別途 import する手間が省け、コードの一本化が進みます。実際の使い方としては、まず自分の機能を分けて小さな関数として作成し、必要なデータや操作を返すようにします。例えば API からのデータ取得を1か所にまとめると、API の仕様変更にも対応しやすく、テストもしやすくなります。
nuxt composable とは: nuxt composable とは、再利用可能なロジックを関数としてまとめたものです。Vue 3 の Composition API を使い、状態や処理を1つの単位として切り出します。Nuxt 3 ではこのような関数を ~/composables 配下に置くと、ページやコンポーネント内で簡単に呼び出せるようになります。一般には use で始まる名前をつけるのが習慣で、useCart、useUser などの形で作成します。これにより、データの取得、状態管理、イベントの処理などを複数の画面で共有でき、コードの重複を減らせます。なお、Nuxt 3 には useFetch、useAsyncData、useState などの便利なヘルパーがあり、それと組み合わせて使うとさらに強力です。使い方の基本としては、まず ~/composables に新しいファイルを作成します。例えば useCart.js では、カートの item 配列を保持する state、アイテムを追加する関数、合計金額を計算する算出値を返します。コード例は以下の通りです：export const useCart = () => { const items = ref([]); const add = (item) => items.value.push(item); const total = computed(() => items.value.reduce((sum, i) => sum + (i.price || 0), 0)); return { items, add, total };};このようにしておくと、ページ間で同じカートのロジックを再利用できます。使い方は、コンポーネントの setup 関数内でconst { items, add, total } = useCart();と呼ぶだけです。 Nuxt 3 では composables はグローバルに近い形で利用でき、ファイルを増やしていくことで機能を分割できます。利点としては、コードの再利用性向上、テストのしやすさ、UIとロジックの分離による保守性の向上があります。一方、サーバーサイドとクライアントサイドでの実行タイミングには注意が必要で、localStorage のようなクライアント専用処理は条件分岐や process.client などを使って分ける必要があります。初心者でも、まずは小さな composable から作って徐々に拡張していくと良いでしょう。
nuxt.config.js とは: nuxt.config.js とは、Nuxt.js というウェブアプリ開発の枠組みを使うときに欠かせない設定ファイルです。プロジェクトの根幹となる場所に置かれ、nuxt.config.js という名前で保存します。中身は基本的にオブジェクトと呼ばれるデータの集合で、Nuxt にこの設定を渡すために export default の形で記述します。よく使われる項目には head、css、plugins、modules、build、router などがあります。head ではページのタイトルやメタタグ、説明文、ソーシャルメディア用の情報を設定します。css には全ページで使うグローバルな CSS ファイルを登録します。plugins にはアプリ起動時に実行したい処理を準備します。modules には Nuxt の機能を後から追加する拡張を並べ、build にはビルド時の動作を調整します。router ではルーティングの挙動を変えることができます。これらの設定をうまく使うと、検索エンジンに伝える情報の最適化や、ページの読み込み速度の改善、外部サービスとの連携がしやすくなります。初心者の人はまず head の使い方や global CSS の登録方法から試してみると理解が深まります。設定を変更したら開発サーバを再起動して反映させることを忘れずに。nuxt.config.js は、同じコードベースで別のサイト用に設定を変える際にも非常に役立つ便利な機能です。

nuxtの同意語

Nuxt.js: Vue.js をベースにした、サーバーサイドレンダリング（SSR）・静的サイト生成（SSG）・SPAを統合して開発できる人気のフレームワークの正式名称。
Nuxt: Nuxt.js の略称で、口語的・短縮形の呼び方。
Nuxt.js フレームワーク: Nuxt.js を指す別名の表現。フレームワークとしての機能を示す言い方。
Vue.js の SSR フレームワーク: Vue.js アプリのサーバーサイドレンダリングを実現するための専用フレームワークという説明表現。
Vue.js の静的サイト生成フレームワーク: Vue.js ベースのアプリを静的サイトとして生成できる機能を持つフレームワークという説明表現。
SSR/SSG 対応の Vue フレームワーク: サーバーサイドレンダリングと静的サイト生成の両方に対応する Vue 用フレームワークという意味。
静的サイト生成対応の Vue フレームワーク: 静的サイト生成機能を前面に出して説明する表現。
サーバーサイドレンダリング対応 Vue アプリのフレームワーク: Vue アプリの SSR に対応するためのフレームワークという意味。
Vue アプリ向けのサーバーサイドレンダリングフレームワーク: Vue アプリ開発で SSR を実現するためのフレームワークという説明。

nuxtの対義語・反対語

クライアントサイドレンダリング (CSR): ブラウザ側でレンダリングを完結させ、サーバーサイドのレンダリングを使わない設計のこと。サーバーはデータを配信する役割に留まり、画面の描画はクライアントのJavaScriptで行います。
素のVue.js: Nuxtを使わずVue.js本体だけで開発する方法。ルーティングやデータ取得、SSR/SSG機能を自前で実装・組み合わせて動作させる必要があります。
素のHTML/CSS/JavaScript: フレームワークを使わず、基本のHTML・CSS・JavaScriptだけで作るアプローチ。依存性を減らせますが、機能面は自分で補完します。
静的サイト主体のアプローチ: ビルド時に全ページを静的に生成して公開する設計。サーバーサイドの動的レンダリングを前提としない運用が特徴です。
サーバーサイドレンダリングを前提とした他のフレームワーク: Nuxt以外の、SSRを前提に設計されたフレームワークのこと。例としてNext.js（React）などがあります。
手作りの軽量ビルド環境だけで構築するスタイル: 外部の大規模ツールに依存せず、自分たちでビルド・デプロイパイプラインを組んでウェブアプリを作る開発スタイル。
CMS依存型のウェブサイト: WordPressやDrupalなどのCMSにデータと表示ロジックを任せるウェブサイト。サーバーサイド処理とデータ管理をCMSに依存します。

nuxtの共起語

Nuxt.js: Vue.js をベースにした、サーバーサイドレンダリングと静的サイト生成を組み合わせたフレームワーク
Vue.js: JavaScript のフロントエンドライブラリ/フレームワークの基盤
SSR: サーバーサイドレンダリングの略。サーバー側で HTML を生成して配信する手法
SSG: 静的サイト生成の略。ビルド時に HTML を生成して静的ファイルとして配布する手法
SPA: シングルページアプリケーション。初期読み込み後はクライアント側で動く UI
Nuxt 3: Nuxt.js の最新メジャーリリース。Nitro、Composition API などを活用
Nitro: Nuxt 3 のサーバーサイドランタイム。API ルートや SSR/静的配信を担う
Vite: 高速なモダンビルドツール。Nuxt 3 の開発・ビルドで使われることが多い
nuxt.config.js: Nuxt の設定を記述するファイル。ルーティング、モジュール、プラグインの設定を管理
nuxt.config.ts: TypeScript で書く Nuxt の設定ファイル
Modules: 機能を拡張する外部パッケージ群。認証、SEO、分析などを追加できる
Plugins: アプリ起動時に実行されるコード。外部ライブラリの初期化や設定の登録
Middleware: リクエスト前後で処理を挟む機能。認証・権限チェックに使われる
Routing: URL とページの対応づけ。Nuxt では pages ディレクトリで自動生成される
Pages: 自動生成されるルートの集合。ファイル名がルートになる
Components: 再利用可能な UI 部品の集合。ページや他の部品で使い回せる
Composition API: Vue 3 の新しい API 群。setup() でのロジック再利用性を高める
Pinia: Vuex の後継として推奨される状態管理ライブラリ。Nuxt でも利用される
SEO: 検索エンジン最適化のこと。メタタグ・構造化データ・クローラ対策を含む
Head / Meta Tags: ページの head 要素を動的に設定して SEO を向上
Meta Tags: title、description、og:title などのメタ情報
Open Graph (og) Tags: og:title や og:image など、ソーシャル共有時の表示情報
runtimeConfig: 実行時に使う設定。公開/非公開の値を分けて扱える
publicRuntimeConfig: クライアント側にも渡る公開設定
privateRuntimeConfig: サーバー側だけで使う非公開設定
API Routes: Nitro で定義する API ルート。データ提供の窓口になる
Deployment: デプロイ。Vercel、Netlify、静的ホスティングなどへの公開作業
Vercel: Nuxt アプリのデプロイ先として人気のクラウドプラットフォーム
Netlify: 静的サイト向けデプロイが得意なホスティングサービス
ServerMiddleware: サーバー側の中継処理。リクエストを処理・転送する
Static Hosting: 静的ファイルとして配布するホスティング形態
Caching: リソースの再利用・高速化のためのデータキャッシュ戦略

nuxtの関連用語

Nuxt.js: Vueをベースにしたサーバーサイドレンダリング/静的サイト生成対応のフレームワーク。ページの描画を高速化し、SEOを改善します。
SSR（サーバーサイドレンダリング）: サーバー側でHTMLを生成して返すレンダリング方式。初回表示が速く、検索エンジンの読み込みも安定します。
SPA（シングルページアプリ）: クライアント側で画面を動的に更新するアプリ形式。最初のHTMLは薄く、JSで動作します。
SSG（静的サイト生成）: ビルド時にHTMLを生成して配信する方式。高速で安定した配信が可能です。
Nuxt 2: Vue 2ベースの従来のNuxt。多くの既存プラグインと互換性があります。
Nuxt 3: Vue 3ベースの新世代Nuxt。Nitroエンジン、TypeScript対応、よりモダンな設計。
Nitro: Nuxt 3 のサーバーエンジン／サーバーレス対応の実行環境。柔軟な配信が可能です。
Vue 3: 最新版のVue。Composition API などの機能を備え、Nuxt 3と相性が良いです。
Composition API: Vue 3 の新しい組み立て式の書き方。ロジックの再利用性と型安全性が向上します。
Pinia: Vue 3 向けの公式状態管理ライブラリ。Vuexの後継として推奨されます。
Vuex: Vue.js 向けの公式状態管理。Nuxt 2 でよく使われますが、Nuxt 3 では Pinia 推奨。
nuxt.config.js: Nuxt の設定を集約するファイル。モジュール、ルーティング、ビルド設定などを記述します。
nuxt.config.ts: TypeScript で書く nuxt.config。型安全に設定を管理できます。
runtimeConfig: 実行時にアクセスする設定の定義。公開設定と秘密設定を分けて扱えます。
publicRuntimeConfig / privateRuntimeConfig: 公開可否を分けて runtimeConfig を管理する方法（Nuxt 2 の概念）。
serverMiddleware: サーバー側で実行するミドルウェア。ルーティング前後の処理を追加できます。
middleware: ルートに対して実行される前処理。認証チェックなどに使います。
plugins: アプリ起動時に外部ライブラリを初期化するコードを登録します。
components auto-import: コンポーネントを自動的に読み込む機能。手動の import を減らせます。
pages: ファイルベースのルーティング。/pages 配下のファイル構造でルートが自動生成されます。
layouts: 全ページの共通レイアウトを定義。デザインを一元管理できます。
nuxt/content: Markdown 等を使ったコンテンツ管理を行うモジュール。ブログ等に便利。
nuxt/image: 画像の最適化とリサイズを自動で処理するモジュール。
i18n: 国際化（多言語対応）を実装するための機能・モジュール。
sitemap.xml: サイトマップを自動生成して検索エンジンに送信。SEO対策の基本。
robots.txt: 検索エンジンのアクセスを制御する設定ファイル。
Open Graph / Twitter Card: SNSでのリンク共有時の表示情報を設定します。
head / meta management: ページタイトルやメタタグを動的に設定する仕組み。
target: static: Nuxt の出力を静的サイトとして生成する設定。SEOと高速化に有利。
Tailwind CSS integration: Tailwind CSS を Nuxt で簡単に使えるようにする統合。
PostCSS / autoprefixer: CSS の前処理とベンダープレフィックス自動付与。
TypeScript support: TypeScript を使って開発するための公式サポート。
tsconfig: TypeScript の設定ファイル。型チェックの挙動を定義します。
環境変数 / dotenv: 環境ごとの設定を分けるための変数管理。
serverRoutes (Nitro のルーティング): Nitro のサーバー側ルート設定。API風のエンドポイントを作成します。
dynamic routing: 動的ルート。ファイル名でパラメータを表現します。
asyncData / fetch / defineAsyncData / useFetch: データ取得の手法。Nuxt 2 では asyncData/fetch、Nuxt 3 では useFetch/defineAsyncData が主流。
SEOベストプラクティス: 適切な meta タグ、サイトマップ、キャノニカル URL 等、検索エンジン最適化の実践。
デプロイ先例: Vercel / Netlify: 静的サイトとしてのデプロイやサーバーレス機能を活用したホスティング。
静的サイト生成のコマンド: nuxt generate: 静的サイトを生成するコマンド。具体的には全ページを静的HTML化。
nuxt dev / nuxt start: 開発サーバー起動と本番用サーバー起動コマンド。