Nuxt 3 の useFetch() と useAsyncData() の使い方
2022年11月16日 Nuxt 3.0.0 (stable) がリリースされました（日本時間11/17） Announcing 3.0 • Nuxt この記事はベータリリース時に初稿を公開しましたが、本リリース版に対応するため加筆修正しています。 ユーザー待望の Nuxt 3 が公開されました。 （Vue 2 対応だった Nuxt 2 の Vue.js 3 対応版です） Nuxt 3 は、TypeScript のネイティブサポートをはじめとした開発体験の向上など、多数の改善がなされています。 もっとも注目したいのは Nitro によるデータ取得やレンダリング周りの機能向上があります。 Nitro により、いわゆる ISG （Incremental Static Generation インクリメンタル静的ページ生成）も可能です。Nuxt 3 は、とてもシンプルに（意識することなく）活用する
Nuxt3で個人的にuseFetchよりuseAsyncDataを推したい理由
はじめに Nuxt3の安定版がリリースされ、しばらく経った。現在筆者もNuxt3を活用しているプロジェクトがある Nuxt3は以前の2系にも増して更に強力な機能を公開しており、快適な開発体験を提供してくれる 代表的な機能としては Auto-imports Data-fetching utilities Zero-config TypeScript support Universal rendering (Server-side rendering and hydration) といったものがある。またNitroという新しいサーバーエンジンが導入され、より高いパフォーマンスでのレンダリングが可能になった そしてNuxt3では2つの新しいAPIであるuseFetchとuseAsyncDataが導入されている(useLazyFetchとuseLazyAsyncDataも含めれば4つ)。useFe
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でログインをどうやるか、そしてCookieからlocalStorageへ - DJ lemon-Sour's diary (prod.hisasann)
🦑 まえがき Nuxt.js でいわゆる basic なログインの仕組み （ユーザーID・パスワードを入れる系）を作ろうとすると、なかなか大変で、これは Cookie が SSR 時と CSR 時に API サーバーまで勝手に送信するしないの話などあり、結構気にする箇所は多くなります。 Cookie を使ったパターン では、 Cookie はあくまでも Nuxt.js 側のみで使用し、 BFF との通信は、リクエストヘッダーにログイントークンをのせて送信しています。 また、ログイン処理後はレスポンスヘッダーからログイントークンをもらい、それを Cookie に保存します。 それについての考察は以下にまとめております。 Nuxt.jsを使ったログイン周りの仕組みについて · hisasann/typescript-nuxtjs-boilerplate Wiki また、 OAuth 版ではあ
Nuxt.jsのasyncDataとfetchは何が違うのか - Qiita
Nuxt.jsを使用するうちに、 asyncData と fetch の違いが気になって調べてみたので、その備忘録を記事にします。 2020/4/07追記: Nuxt 2.12 より fetch の動作が 変更されています 。以降に記載している内容はNuxt 2.11 以前のものを対象しているのでご注意ください。 asyncData と fetch の共通点 asyncData と fetch は、両者ともページコンポーネントの初期化前に実行される関数です。これはサーバーサイド、もしくはクライアントサイドでのナビゲーションが発生した際に呼び出されます。どちらも第１引数に context を取るため、クエリパラメータなどの値にアクセスして、それらの値に応じた処理を行うことが可能です。また、これらの処理はコンポーネントのインスタンスが生成される前に行われるため、 this を通してコンポーネン
Nuxt.jsのinjectを使ってDIする - CYDAS Developer's Blog
大阪からこんにちは、福山健（@kenfdev）です！ 先日「v-kansai Vue.js/Nuxt.js meetup #2」で「Nuxt.jsのinjectでインジェクトしてみる話」という内容で登壇させていただきました。その内容について記事にも残しておこうと思います。 スライドに関しては以下で公開しています。 speakerdeck.com 前提知識 基本的なNuxt.jsの機能 Vuexをなんとなく知っている TypeScriptがなんとなく読める Nuxt.jsの inject 皆さん、Nuxt.jsには inject という機能があるのをご存知でしょうか？意外と知られていないんじゃないかと思うのですが、公式ドキュメントの「統合された注入」にも記載されているNuxt.jsのプラグインの機能です。この inject を使うことで、Nuxt.jsのアプリケーションで、いろいろな場所から
「SSRと規約だけ」の勘違いを解く、 Nuxt.js をプロジェクトで採用すべき理由 - ROXX開発者ブログ
back check 事業部に業務委託でコミットしているフロントエンドエンジニアの potato4d です。 ROXX では、 v1.0 が出る前から、プロダクト、コーポレートサイト、ランディングページ、メディアなど、多くのシーンにて、 Nuxt.js が採用されています。 Nuxt.js は多くの人に愛される一方で、最近は Vue 3.0 の話もあり、多少評価が落ち着いてきた印象があります。 この記事では、十分に普及した今だからこそ、 Nuxt.js の本当の優位性と、どういったときに使うべきか。あるいは使うべきでないかを再度言語化できればと思います。 「SSRとルールだけ」という勘違い まずは Nuxt.js の採用についてです。多くの場合、「Vue か Nuxt か」という問いには、いかが判断基準として使われます。 SSR 今必要かどうか Nuxt.js の組み込みのルールをチームに
SPA開発未経験者によるNuxt.jsを使った自社サービス開発の裏側
2019年1月30日、株式会社Re:Buildが主催するイベント「【Nuxt.js/Vue.js】スタートアップ企業導入事例」が開催されました。近年注目を集めるNuxt.jsやVue.jsを実際の開発現場でどのように活用しているのか、スタートアップ4社が集い、自社の取り組みを語ります。プレゼンテーション「SPA開発未経験者によるNuxt.jsを使った自社サービス開発」に登壇したのは、株式会社リビルドの嘉数侑起氏。講演資料はこちら SPA開発未経験者によるNuxt.jsを使った自社サービス開発 嘉数侑起氏（以下、嘉数）：みなさん、こんばんは。「SPA開発未経験者によるNuxt.jsを使った自社サービス開発」というタイトルで、プレゼンさせていただきます。株式会社Re:Buildの嘉数と申します。よろしくお願いします。 こちらがアジェンダです。 今回、Nuxt.jsをこれから導入しようと検討し
Nuxt.jsでnoteの記事ページを置き換えました｜こんぴゅ
noteの記事ページがリニューアルしてパワーアップしました。記事の読み込み、描画が格段に高速化されています。 noteのフロントエンドはAngular.jsの1系で運用されてきましたが、実行効率が悪く表示速度が遅いという問題がありました（特に古いスマホで顕著）。問題を根本解決するためにNuxt.jsへの移行を進めていました（詳しい経緯は以下の記事をごらんください）。 今年から、おすすめページ、マガジンページ、コンテスト一覧ページなど部分的にNuxt版に置き換えていきました。nodejsやNuxt.jsサーバーの運用が初めてだったので一気に置き換えるのではなく少しづつリリースして様子を見ながら進めました。 運用を2ヶ月ほどしてみて、インフラ面、実装面で問題なさそうなことが確認できたため、noteのトラフィックの多くを占める記事ページ（このページがまさにそうですね）のNuxt.js版リリースを
阿部寛を超えるための技術: はてなブログからNuxtに移行した話
旧サイト(はてなブログ)からのパフォーマンスの伸びが顕著ですね。 Performanceは言わずもがなですが、はてなブログでPWA対応がほとんどされていないのが気になりました。Service Workerのような標準化しつつある仕様に追従できていないのは痛いところ。 Nuxt + Contentfulでやっていき 今回の実装にあたってはフレームワークに依存せずSPAを作成することも検討しましたが、SEOなどを考えるとSSRの仕組みが必須です。またSSRもスクラッチで組もうとすると中々ハードルが高く(Storeのハイドレーション、Render hooksのAPI設計等)、今回は業務でも利用した事のあるNuxt.jsを利用しました。 Embedded content: https://nuxtjs.org/ 詳細は後述しますが、Nuxt communityの提供しているModule群がものすご
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Vue.js」でWebページを作成できるフレームワーク「Nuxt.js」最初の一歩