タグ

routesとasyncDataに関するyterazonoのブックマーク (2)

  • 【Contentful編】モダンな感じのSPAブログを自作する - Qiita

    はじめに Nuxt.jsとContentfulとNetlifyでモダンな(?)SPAブログを作りました。こちら 何回かにわけて構築の記録を残しているシリーズの第3回です。 前回つくったSPAブログを、APIベースのCMS「Contentful」に対応させていきます。 【シリーズの予定】 まえがき編 Nuxt.js編 Contentful編 ← この記事 Netlify編 事前情報 Contentfulの構造 ContentfulはユーザーごとにSpace、Content Model、Entryという構造を持っていて、それぞれにIDが割り振られています。 Space以下を複数のユーザーで共有することもできるみたいですが、一人で使用する場合は、以下のような階層構造だと思ってもらえればいいかと。 セットアップ ユーザー登録 まずはこちらからユーザー登録をしましょう。GitHubアカウントも使えま

    【Contentful編】モダンな感じのSPAブログを自作する - Qiita
  • NuxtのasyncDataで静的ファイルを読み込む

    概要 Nuxt.jsを使って色々作っていると、generate(静的出力)時の初期表示内容にJSONファイルの内容を取り込んで表示したい、という場面に出くわします(多分)。 そんなときにどうやって取り込めばいいのかという方法を書き残しておきます。 方法 asyncDataメソッドを使います。 また、ページが動的ルーティングの場合はroutesオプションも使う必要がでてきます。 これら2つで要件は満たせるのですが、その中でどうやって読み込まれるかによって出力されるJS(ランタイム=初期表示以降に読み込まれる内容)が変わってくるので使い分ける必要があります。 サンプルケース 説明/理解しやすいように、以下のサンプルケースを用いて説明をしていきます。 Nuxt.jsを使ってブログシステムを作成する 記事はMarkdownで書き、それらを変換した個別のJSONファイルがあるものとする 初期表示時に

    NuxtのasyncDataで静的ファイルを読み込む
  • 1