【Contentful編】モダンな感じのSPAブログを自作する - Qiita
はじめに Nuxt.jsとContentfulとNetlifyでモダンな（？）SPAブログを作りました。こちら 何回かにわけて構築の記録を残しているシリーズの第３回です。 前回つくったSPAブログを、APIベースのCMS「Contentful」に対応させていきます。 【シリーズの予定】 まえがき編 Nuxt.js編 Contentful編 ← この記事 Netlify編 事前情報 Contentfulの構造 ContentfulはユーザーごとにSpace、Content Model、Entryという構造を持っていて、それぞれにIDが割り振られています。 Space以下を複数のユーザーで共有することもできるみたいですが、一人で使用する場合は、以下のような階層構造だと思ってもらえればいいかと。 セットアップ ユーザー登録 まずはこちらからユーザー登録をしましょう。GitHubアカウントも使えま
コンテキスト
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 では、API からデータを取得する方法が 2 つあります。fetch メソッドまたは asyncData メソッドを使用できます。 Nuxt はコンポーネントの mounted() フックでデータを取得するなど、クライアントサイドアプリケーションにおける従来の Vue のデータの取得パターンをサポートしています。しかしユニバーサルアプリケーションでは、サーバーサイドレンダリング中にデータをレンダリングするために Nuxt 特有のフックを使う必要があります。これにより、必要なデータがすべて存在する状態でページをレンダリングすることができます。 Nuxt には、データを非同期に読み込むためのフックが 2 つあります。 asyncData。このフックは、 ページ コンポーネントでのみ使用できます。fetch とは異なり、クライアントサイドレンダリング中にローディングプレー
SEO、OGP……Vue.js製SPAの「困った」を解決できる「Nuxt.js」が便利だ！
Vue.jsでSPAを作ったものの、検索エンジンのクローラーやSNSのOGP取得といった問題で困ったことはありませんか？ サーバーサイドレンダリングを簡単に構築できるNuxt.jsの活用方法を解説します。 ユニバーサル（Isomorphic）JavaScriptはJavaScriptコミュニティで一般的な用語になりました。ユニバーサルJavaScriptとは、クライアントとサーバーの両方で実行できるJavaScriptコードのことです。 Vue.jsを含むモダンJavaScriptフレームワークの多くは、シングルページアプリケーション（Single Page Application : SPA）の構築を目的に作られています。シングルページアプリケーションはページがリアルタイムで更新されるので、アプリの動きが軽快でユーザーエクスペリエンスが向上します。さまざまな利点がありますが、欠点もありま
Nuxt.jsのasyncData メソッドを使ってRSSを読み込む - Qiita
この記事はオールアバウトアドベントカレンダー18日目の記事です Nuxt.jsの機能を使って RSSを取得して値を書き出してみます 使う機能 asyncData メソッド サーバーサイドでデータを取得し、それをレンダリングしたいことがあるでしょう。Nuxt.js はコンポーネントのデータをセットする前に非同期の処理を行えるようにするために asyncData メソッドを追加しています。 参照: https://ja.nuxtjs.org/guide/async-data/ 手順 前準備 npm install xml2js XMLを扱うのでparseしてくれるモジュールinstallしておく コンポーネントを用意する pages/rss.vueという名前のpageコンポーネントを用意します 先に完成形を↓↓ <template> <div> <ul> <li v-for="item in
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
wp-nuxt-for-netlify/pages/post/_article.vue at 943004874d1e2a710eca9e65c66823bc04dbc76c · yahsan2/wp-nuxt-for-netlify
mya-ake.com
GitHub - sitepoint-editors/nuxt-ssr-blog: Serverless static-generated Nuxt.js Universal JavaScript web application. Demo app, accompanying the SitePoint article.
Nuxt.jsのパフォーマンス向上テクニック - Qiita