はてなブックマーク

Create a Blog with Nuxt Content The Content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.

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 に

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

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

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

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

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

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.

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 では、API からデータを取得する方法が 2 つあります。fetch メソッドまたは asyncData メソッドを使用できます。 Nuxt はコンポーネントの mounted() フックでデータを取得するなど、クライアントサイドアプリケーションにおける従来の Vue のデータの取得パターンをサポートしています。しかしユニバーサルアプリケーションでは、サーバーサイドレンダリング中にデータをレンダリングするために Nuxt 特有のフックを使う必要があります。これにより、必要なデータがすべて存在する状態でページをレンダリングすることができます。 Nuxt には、データを非同期に読み込むためのフックが 2 つあります。 asyncData。このフックは、 ページ コンポーネントでのみ使用できます。fetch とは異なり、クライアントサイドレンダリング中にローディングプレー

ストアを使って状態を管理するのは、どういった大きなアプリケーションを作るにあたっても重要なことです。それがなぜ Nuxt がそのコアに Vuex を組み込んでいるかの理由です。 ストアを有効化する Nuxt は store ディレクトリを確認します。もし隠しファイルや README.md ではないファイルが含まれていたら、ストアは有効化されます。これは Nuxt が以下を行うことを意味しています： Vuex をインポートする ルートの Vue インスタンスに store オプションを追加します。 モジュール store ディレクトリの中にあるすべての .js ファイルは名前空間付きモジュール に変換されます（index はルートモジュールになります）。state の値は不必要に状態がサーバサイドで共有されてしまうことを避けるため、常に function であるべきです。 はじめに、ステート

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

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

router プロパティ router プロパティを使って Nuxt ルーター (vue-router )をカスタマイズできます。 base 型: String デフォルト: '/' アプリケーションのベースの URL です。例えば、単一ページアプリケーション全体が /app/ 下に配置される場合、base の値は '/app/' を指定します。 これは、より大きな Web サイト内から、Nuxt を別のコンテキストルートとして提供する必要がある場合に役立ちます。フロントプロキシウェブサーバーを設定する場合としない場合があることに注意してください。 router.base にリダイレクトしたい場合、Hook を使ってリダイレクトすることができます。ルートでない場合 router.base にリダイレクトさせるを参照してください 。 Nuxt v2.15 以降では、実行時にこのプロパティの値

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

Nuxt.js を使うと、例えば GitHub Pages のような静的ホスティングサービスで、ウェブアプリケーションをホストすることが可能です。 GitHub Pages へデプロイするには、静的なウェブアプリケーションを生成する必要があります: GitHub Pages のホスティングにデプロイするもの全てが入った dist フォルダが作成されます。プロジェクトリポジトリであれば gh-pages ブランチ、ユーザーや組織のサイトであれば master ブランチにデプロイしてください 。 情報: GitHub Pages にカスタムドメインを利用し CNAME ファイルを置くのであれば、CNAME ファイルは static ディレクトリに置くことをお勧めします。 より詳しい情報はこちらを参照してください。 リポジトリに GitHub Pages をデプロイする ある特定のリポジトリに

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