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でログインをどうやるか、そして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 3はなぜ優秀？VueJSの開発を快適・効率的にするフレームをNuxt3実装者がまとめます😎」低コストなモダナイズ開発の実践 | Ragate
こんにちは！ Nuxt では最近、最新バージョンの Nuxt3 の RC 版が現在公開され、2022年6月には正式リリースが予定されています。Nuxt3 は RC 版が登場したのに伴い、わたしたちも早速案件への導入を開始しています。 Nuxt3 は TypeScript と親和性が高く、実際に開発していても Nuxt2 時代よりもよりタイプセーフに開発を行うことが可能となります。ますます正式リリースが待ち遠しくなっています。 本記事ではそんな Nuxt 3 のすばらしい機能を、実装経験を踏まえご紹介しようと思います！ 想定する読者 VusJS で開発してるヒトNuxt 2 を使って開発しており、Nuxt 3 の導入を考えているヒト はじめに 本記事では、Nuxt 3 の素晴らしい機能についてまとめますが、正式リリース前の情報になりますので、正式リリース後と異なる場合がございますのでご注意く
Nuxt 3 を今すぐオススメしたい 15 のポイント
2022/11追記： Nuxt 3 の stable リリースに合わせて新しく記事を書き直しました。 祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力 上記の記事の方が最新の情報を詳しく網羅していますので、そちらを読んで頂くことをオススメします。 Nuxt.js バージョン3のPublic Betaが公開されて約2ヶ月が経ちました。 私自身この2ヶ月、プライベートでNuxt 3を触っているのですが、かなり気に入っています。 とにかく開発体験が向上していて、一言で表すと「開発していて楽しい」フレームワークです。あまりにも気持ちよく開発できるので、Nuxt 3が公開されてから明らかに睡眠時間が減っています。 ただ、実際に何が変わったのか、どんなところが良いのか、よくわからずにとりあえず様子見している方もいると思います。 Vue 3の目玉機能であるComposition APIはVu
Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog
STORES フロントエンドエンジニアの wattanx です。 2022/11/16、ついに Nuxt 3 が正式リリースされましたね。 nuxt.com 私たちのプロダクトである STORES でも Nuxt を利用しており、絶賛 Nuxt 3 への移行中です。 本記事では、私たちのプロダクトにおいてどのようにNuxt 3 に移行しようとしているのか紹介します。 また、これは STORES Advent Calendar 2022 の 11日目の記事です。 移行の基本方針 Nuxt 2 を利用しているプロダクトを Nuxt 3 に移行する場合、以下の2とおりの方法が一般的だと思っています。 Nuxt 2 から Nuxt 3 に直接移行する。 Nuxt 2 から Nuxt Bridge に移行する。その後 Nuxt Bridge から Nuxt 3 に移行する。 Nuxt Bridge
📝 Nuxt 3 公式ドキュメント 日本語訳
💎 ハイブリッド Vue フレームワーク Vue 3 で次のアプリケーションを構築し、ハイブリッドレンダリング、パワフルなデータフェッチなどの新機能を体験してください。Nuxt 3 は、Web 開発をシンプルかつパワフルにするオープンソースのフレームワークです。 GitHub で ❤️ する 新機能を搭載 Nuxt 3 は、より小さなコアで再設計され、より速いパフォーマンスとより優れた開発者経験のために最適化されています。 🪶 より軽く 最新のブラウザで最大 75 倍、サーバーデプロイとクライアントバンドルサイズを小さくしました。 🐇 より速く nitro（ナイトロと呼ぶらしい）による動的なサーバーのコード分割でコールドスタート（ハードウェアが初期化された状態から再起動すること）を最適化しました。 ❎ ハイブリッド soon ISG（Incremental Static Genera
NuxtJSにRepositoryFactoryパターンを適用してAPIを利用する
// nuxt.config.ts { modules: [ '@nuxtjs/axios', ], plugins: [ '~/plugins/axios' ] } 下記は、プラグインの実装方法です。このプラグインでは、エラーハンドリングを共通にすること、デバッグ目的で表示するリクエスト、レスポンスの表示などを行う例です。 import { Plugin } from '@nuxt/types' import { AxiosError, AxiosResponse, AxiosRequestConfig } from 'axios' const axisoIntercector: Plugin = ({ $axios, redirect }) => { $axios.onRequest((config: AxiosRequestConfig) => { if (!window.navig
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 の組み込みのルールをチームに
nuxt generateして出来たindex.htmlにアクセスすると正しく動かない件 - Qiita
Nuxt便利ですね。SSRやSPAも良いですが、静的サイトをちょろっと作るときも、nuxt generateを使ってコンポーネントベースでさっくり作れたりします。素晴らしい。 ところで。 唐突ですが、DirectoryIndexはご存知でしょうか。ファイル名なしのディレクトリhttps://example.com/foo/bar/にアクセスした時に、何が表示されるか、という設定です。通常index.htmlあたりが設定されていますが、それは絶対的ルールではありません。 サーバにはディレクトリ内のファイルを自動的に一覧してくれる機能とかもあって、まあ公開サーバなんかでは一覧されるとよろしくないことが多いので使わないことが多いですが、テストサーバなどではむしろ一覧を作って欲しい時もあります。そんなとき、GET /はファイル一覧、GET /index.htmlがインデックスファイルの表示、です。
阿部寛を超えるための技術: はてなブログから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群がものすご
Nuxt Meetup #7 を開催しました！ - ROXX開発者ブログ
総括を！ nuxt-meetup.connpass.com 株式会社ピースオブケイクにて 初めまして、2/1 京都のゲーム会社ポノス・にゃんこスタジオより転戦したWeb猫こと、@jiyuujin (北村勇磨)です。今回のミートアップは、株式会社ピースオブケイクさんで開催されました。移転したばかりの素敵なオフィス、素晴らしい環境でございました。改めて場所提供のほどありがとうございます。 スポンサーLTでは、CTO @konpyuさんによる登壇。メディアプラットフォームNoteのAngularからNuxtへのリプレースについて取り上げられました。去年のVue Fes Japan 2018でも、福井烈さんの発表「note のフロントエンドを Nuxt.js で再構築した話本番運用は既に始まっている。」があったように非常に大きな話題となっています。 レガシーブラウザと向き合うNuxt.js sli
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Example for testing Nuxt plugins? · Issue #341 · nuxt/test-utils
Nuxt.js×Axios×RepositoryFactoryのオレオレベストプラクティス - Qiita
Nuxt Composition APIで作る完全静的サイト
API | Auth Module
Nuxtのmiddleware上でのredirectには注意 - Qiita
How to get rid of trailing forward slashes after nuxt generate? · Issue #721 · nuxt/nuxt
Nuxt.jsとLaravelを同じリポジトリで管理し、Valetで動かすまで