Nuxt.jsのSSR/CSR処理について
はじめに Nuxt.js の SSR/CSR の処理がどう動いているか（ライフサイクル）、また、安全な処理を書くにはどうしたらいいのか、いまいち分かっていない方や曖昧な方も多いと思います。 今回の記事では、Nuxt.js での開発における SSR/CSR 処理とセキュアなデータの取り扱いについて少し書きます。 ライフサイクルを理解し、Nuxt.js でどのように情報を扱うべきか検討しやすくなります。 AWS や GCP、Firebase、Azure など、クラウドサービスと連携するにあたりセキュアな情報の取り扱いで悩むことが出てくると思います。 AWS でいうと AppSync や API Gateway、S3 などの各種サービスに接続するための認証情報をどのようにフロントエンドで安全に扱うか、という点は気になるポイントだと思います。 この記事は直接ある特定のサービスへの接続方法のソリュー
Nuxt.jsからGoogleスプレッドシートのデータを読み書きする
はじめに Nuxt.jsからGoogleスプレッドシートのデータを読み込んだり書き込んだりしたのでその手順をまとめます。 できるようになること 以下のようなGoogleスプレッドシートのデータをNuxt.jsで読み込んだり、データの新規追加、更新、削除を行います。 前提と環境 以下の通りです。 Nuxt.js : 2.9.2 Googleアカウントは取得済とする 手順概要 Googleスプレッドシートのデータを自分が作成するNuxt.jsアプリから読み書きできるようにするためには、Googleが提供している「Google Sheets API」を使用します。そしてこれを使用するには、Google Cloud PlatformでGoogle Sheets APIの有効化と認証情報の作成が必要になります。その後、作成した認証情報を使ってNuxt.jsからGoogleスプレッドシートのデータを読
vue.jsで Date Time Picker なら「VueCtkDateTimePicker」 - Qiita
Github Demo & Samples ここがすごい カスタマイズの自由度が高い デフォルトデザインのままでも結構使える レスポンシブ対応＆スマホでの操作性も良さそう（実機未確認） ここがいまいち マウスホバーの動きがちょっとうざい SP版のデザインがちょっと惜しい（カレンダーの右側に謎の隙間） →久しぶりに見たらSP版が洗練されてました。 マウスホバーは相変わらずややうざい。 とはいえ両方CSSでなんとかなるので問題なしです。 使い方 導入方法やカスタマイズは公式ドキュメントに丁寧に記載されていますので、制作中のnuxt.jsアプリで使っているコードを（ほぼ）そのまま一例として掲載します。 <template> <dl> <dt>希望日時</dt> <dd> <Datetime v-model="requestDate" :minute-interval="30" :format="
Nuxt.js ライブラリ「vue-ctk-date-time-picker」を使用してDate Time Pickerを実装する
HOMEnuxt.jsNuxt.js ライブラリ「vue-ctk-date-time-picker」を使用してDate Time Pickerを実装する Nuxt.js ライブラリ「vue-ctk-date-time-picker」を使用してDate Time Pickerを実装する 作成日 2020.10.12 nuxt.js nuxt.js, ライブラリ ライブラリ「vue-ctk-date-time-picker」をインストールすると、Date Time Pickerの実装が簡単に可能です。ここでは、nuxt.jsでvue-ctk-date-time-picker を利用するための手順と簡単な使い方を記述してます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
