microCMSのNuxt.js用モジュールを公開しました
こんにちは、柴田です。 先日のPWA Night Conference 2021にて行われたmicroCMSワークショップでもお披露目したのですが、microCMSのNuxt.js用モジュールを公開しました。 https://github.com/microcmsio/nuxt-microcms-module 何ができる？内部的にはNuxt.jsのModuleとPluginの機構を使っており、microCMSとの通信用クライアントをNuxt.jsのContextから利用できるようにするためのものです。 これによって、$microcms.get(...)という形で簡潔にmicroCMSとの通信を行うことができるようになります。 準備まずはnpmからパッケージをインストールしてください。 $ npm install nuxt-microcms-module 次に、nuxt.config.jsに
Nuxt.js(v2)で静的なJSONファイルを読み込み、いろんな所で使う。 - Qiita
Nuxt.jsで静的サイト(universal + generate)を作っているときに、タイトルやディスクリプション、ページのキャッチワード等のクオリティを上げるために、EXCELにひとまとめして管理したい。提案のときにも便利。 なので、EXCELを変換した静的なjsonファイルをいろんな所で使えるようにしておく。 １．Vuexで読み込んで使う。 Nuxt.jsで共通のデーターを使うならVuexが便利。ということで試してみる。 storeを作成 Nuxt.jsは、モジュールモードがお手軽に出来て最高。 import jsonData from '~/assets/json/data.json' // 状態管理 export const state = () => ({ data: jsonData, }) // getters export const getters = { getAl
Nuxt.jsとmicroCMSで採用ページを作成してみよう！
はじめにこんにちはかみむらです。この記事はNuxt.js + microCMSで採用ページを作成するチュートリアルです。 microCMSの最大の特徴は、APIを部分的に扱えることです。なので、さまざまなユースケースが考えられます。例えば、企業のWEBサイトを作成すると仮定してください。CMSで管理する機能は、お知らせやブログが挙げられます。しかし、運用していくと採用情報やヘルプページなど、CMSで管理したい項目が増える可能性があります。 そこで、ヘッドレスCMSを使えば、フロントエンドとAPIを分離して部分的にCMS化することができます。なので、設計を一から見直すことなく、部分的な変更が可能になります。無理な工数を割くことなく、拡張性の高いWEBサイトを構築することができます。 今回は上記で上げた例の一つ、採用ページをNuxt.js + microCMSを使って実装していきます。 最終的
NuxtのJamstack構成におけるAPIキーの隠蔽方法について
こんにちは、柴田です。 Nuxt.jsはv2.13よりFull Static Generationが出来るようになり、益々便利になりました。 全てを静的化し、Jamstack構成にしている方も多いと思います。 Jamstack構成であれば、ブラウザからAPIをコールされる心配はなくなりますが、実はAPIキーがソースコードの中に残っているケースが多いです。（検索したところ、間違った情報を発信しているサイトも多いです） ちなみに良く見かける以下の方法ではAPIキーの隠蔽ができていません。 NG1: process.env経由での利用環境変数としてAPIキーを定義し、APIリクエスト時にprocess.env.API_KEYで参照する方法です。 こちらは一見正しそうに見えますが、サーバでのビルド時にWebpackにてprocess.env.API_KEYの値は定数に変換されてしまいます。 よって
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
microCMSとNuxtでプレビュー画面を作成する