コンポーネントディレクトリ components ディレクトリには、Vue.js コンポーネントが含まれています。コンポーネントは、ページのさまざまな部分を構成するものであり、再利用して、ページ、レイアウト、さらには他のコンポーネントにインポートすることができます。 データの取得 コンポーネントの API から非同期データにアクセスするには、fetch() を使用できます。 $fetchState.pending をチェックすることで、データがロードされるのを待っている時にメッセージを表示することができます。$fetchState.error を確認し、データの取得中にエラーが発生した場合はエラーメッセージを表示することもできます。fetch() を使用する場合、data() で適切なプロパティを宣言する必要があります。フェッチから取得したデータは、これらのプロパティに割り当てることができ

Nuxt を Google App Engine へデプロイする Nuxt を Google App Engine にどうやってデプロイするのか？ Google App Engine へのデプロイは Google のクラウドサービスで一般的な Nuxt アプリケーションをホストするための迅速で簡単な解決策です。 このガイドでは、アプリケーションをローカルに構築し、かつプロジェクトフォルダ全体を Google App Engine に簡単にアップロードするまでを行います。アップロード後、Google App Engine は自動的に package.json の start スクリプトを起動し、アプリケーションはすぐに利用可能になります。 はじめに Google Cloud アカウントがあるか、プロジェクトと空の Google App Engine を Google App Engine に

Nuxt を Netlify でデプロイする Nuxt を Netlify にどうやってデプロイするのか？ Netlify へのデプロイは、静的に生成された Nuxt サイトを素早くオンラインにするためのあつれきがないオプションです。 このプロセスでは、デプロイ時に nuxt generate(<= v2.12) コマンドを使用して、Nuxt アプリの静的バージョンを dist ディレクトリに構築します。このディレクトリの内容は、本番用のURLにデプロイされます。 はじめに Netlify のダッシュボードにある "New site from Git" ボタンを押してください。リポジトリホストで認証し、デプロイするリポジトリを選択して、次に進みます。ステップ3の "Build options, and deploy!" が表示されます。 設定: 静的に生成されたサイト向け nuxt.con

server.jsconst { Nuxt, Builder } = require('nuxt') const app = require('express')() const port = process.env.PORT || 3000 // オプションを使って Nuxt をインスタンス化する const config = require('./nuxt.config.js') const nuxt = new Nuxt(config) app.use(nuxt.render) // 開発モードのときのみビルドする if (config.dev) { new Builder(nuxt).build() } // サーバーを Listen する app.listen(port, '0.0.0.0').then(() => { console.log(`Server is listeni

serverMiddleware プロパティ サーバーサイドミドルウェアを定義します。 型: Array 要素: String または Object または Function Nuxt はカスタムミドルウェアを追加できる connect インスタンスを内部で作ります。これにより外部サーバーを必要とせずに通常は /api ルート）を登録できます。 connect 自体はミドルウェアなので、登録されたミドルウェアは nuxt start と express-template のようなプログラムで使われるミドルウェアとして使う場合の両方で動作します。Nuxt モジュール もまた this.addServerMiddleware() を使って serverMiddleware を提供できます。 それらに加え、デフォルト値が true の prefix オプションを導入しました。サーバーミドルウェア

You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

NuxtJS ニュースレター コアチームとコントリビューターがキュレーションした最新の Nuxt のニュースをメールで受信できます。

function (context) { // ユニバーサルなキー const { app, store, route, params, query, env, isDev, isHMR, redirect, error, $config } = context // サーバーサイド if (process.server) { const { req, res, beforeNuxtRender } = context } // クライアントサイド if (process.client) { const { from, nuxtState } = context } } ユニバーサルなキー これらのキーは、クライアントサイドとサーバーサイドの両方で使用できます。 app app (NuxtAppOptions) すべてのプラグインを含むルート Vue インスタンスのオプション。たとえば i

Nuxt で提供されるコンポーネント Nuxt　はいくつかの重要なコンポーネントをいっしょに提供しており、アプリケーションを構築する際に役立ちます。これらのコンポーネントはグローバルで利用可能になっており、それらを使うにあたってインポートする必要ないことを意味します。 以降では、組み込まれているコンポーネントそれぞれについて説明します。 Nuxt コンポーネント <Nuxt> コンポーネントはページコンポーネントで表示するために使います。基本的にこのコンポーネントは、表示されているページに応じて、ページコンポーネントの中にあるものに置き換えられます。それゆえ、<Nuxt> コンポーネントをレイアウトに追加することは重要です。

自動的に生成されるルート 多くのウェブサイトでは単一のページではなく、複数ページ (例えばホームページ、概要ページ、お問い合わせページなど) を持っています。これらのページを表示するにはルーターが必要です。そこで vue-router の出番です。Vue アプリケーションで動作させる際に、設定ファイル(例えば、router.js)を設定し、全てのルートを手動で追加しなければなりません。Nuxt では pages ディレクトリにある Vue ファイルに基づいて、vue-router の設定を自動的に生成します。つまり、ルーターの設定を書く必要はもうありません！ Nuxt はまた全てのルートに対して自動でコード分割を行います。 つまり、アプリケーションでルーティングを行うのに必要なことは pages フォルダに .vue ファイルを作成するだけです。

map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off; } server { listen 80; # nginxがリッスンしているポート server_name your-domain; # ここにドメインをセットアップ gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1000; location / { expires $expires; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $r

Fetch フック fetch フックは、非同期にデータを取得するためのものです。ルートをレンダリングする際にはサーバーサイドで、遷移する際にはクライアントサイドで呼び出されます。 Nuxt >= 2.12 Nuxt v2.12 から、すべての Vue コンポーネントに対して fetch という新しいフックが導入されています。非同期データを取得する必要があるたびに fetch を使います。fetch はサーバーサイドではルートをレンダリングするときに、クライアントサイドでは遷移するときに呼び出されます。 コンポーネントレベルで $fetchState を公開します： $fetchState.pending: Boolean。fetch が クライアントサイド で 呼び出されているときにプレースホルダーを表示する用途などで使うことができます。 $fetchState.error: null

Nuxt ライフサイクル どのツールを使う場合でも、ツールが内部でどのように機能するかを理解すると常に自信が持てるようになります。同じことが Nuxt にも当てはまります。 この章の目的は、フレームワークのさまざまな部分とそれらの実行順序、およびどのように連携するかについての概要を説明することです。 Nuxt ライフサイクルはアプリケーションがバンドルされ、チャンク化され、縮小されるビルドフェーズの後に何が起こるかを説明します。このフェーズの後に何が起こるかは、サーバーサイドのレンダリングが有効になっているかどうかによって異なります。有効になっている場合は、選択したサーバーサイドレンダリングのタイプによってさらに異なります: 動的な SSR（nuxt start） または、静的サイト生成（nuxt generate） ライフサイクル サーバー SSR の場合、これらのステップはアプリケーシ

You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

The Intuitive Vue Framework Nuxt を使って信頼ある次世代の Vue.js アプリケーションを構築する Web 開発をシンプルにかつパワフルにするオープンソースフレームワーク