ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
複数の開発チームの機能開発を止めずに Nuxt3 へアップデートしました - ANDPAD Tech Blog
はじめに 背景 1. 大きなリリースによるアップデートに失敗した 2. 機能開発を止めずにお客様へ価値提供したかった 課題 リリース管理の複雑さ 取り組んだこと 1. 変更予定の内容と実施時期を透明化する 2. アップデート作業による変更量を小さく頻繁にリリースする 2.1. Nuxt Bridge を利用してアップデートする 2.2. 互換レイヤーを作成してアップデートする 2.3 codemod script を作ってアップデートする おわりに はじめに SWE の sunecosuri です。 アンドパッドでは多くのプロダクトで Nuxt を使用しており、 使用していたバージョンの Nuxt2 が EOL を迎えたため、 Nuxt3 へアップデートしました。 この記事では、複数のプロダクトチームが開発する環境でどのように 機能開発を止めずに Nuxt のメジャーアップデート に取り組
こんにちは！フロントエンドエンジニアの土屋 (@tutti2612) です。 いよいよ Nuxt 2 の EOL が迫ってきましたね。 nuxt.com 先日、弊社でもとあるプロダクトの Nuxt 3 への移行を完了させました。 メドピアでは既に複数のプロダクトで Nuxt 3 への移行を行ってきましたが、今回の移行では今までとは違ったアプローチを取りましたので、その詳細をお伝えしたいと思います。 これから Nuxt 3 への移行を考えている方にとって、少しでもお役に立てれば幸いです。 今回の移行の特徴 Nuxt Bridge の使用 積極的な新機能開発を行いながらのビッグバンリリース 成功の要因 Nuxt Bridge の使用 週 1 回の定例ミーティング エンジニア以外の協力を得た手厚い手動テスト 巨人の肩に乗ることができた こうすれば良かった おわりに 今回の移行の特徴 今回の移行の
JSer.info #658 - Nuxt 3.7がリリースされました。 Nuxt 3.7 · Nuxt Web StreamとResponseのサポート、capo.jsを使った<head>内の要素の最適化をサポート、Vite 4.4へのアップデート、Nitro 2.6へのアップデートなどが行われています。 Announcing Nitro 2.6 · UnJS tsconfig.jsonのbaseUrlではなく相対パスを使うように変更、AsyncLocalStorageを使った非同期コンテキストのサポートなども含まれます。 RomeはFork/アーカイブ化されBiomeというプロジェクトにリネームされました。 Announcing Biome Rome Tools Inc.というRomeの会社が解散され連絡がつかない状態のため、元々のコアメンバーがベースとなりBiomeという新しいプロジ
以前（まだ Nuxt 3 がベータリリースだった頃）に『Nuxt 3 の useFetch() と useAsyncData() の使い方』という記事を書きました。 その後、より多機能になり、またベストプラクティス的な使い方が分かってきたこともあり、改めて useFetch() についてまとめてみたいと思います。 はじめに ここ数年、一貫して Nuxt 3 を使用している僕ですが、主要なコンポーザブルである useFetch については当初の理解が違っていたものもありました。 少しずつ修正しながら、都度コードを書き換えてきたのですが、その過程で得られた知見を共有したいと思います。 なお、記事内で Nuxt と書いた場合は Nuxt 3 および Nuxt 4 を指します。 （現時点では Nuxt 4 はリリースされていませんが、発表されている内容から Nuxt 3 との違いを考慮しつつ記述し
【Nuxt 3移行】ユニットテストをNuxt 2から移行し、実行速度が4倍速くなった話 - メドピア開発者ブログ
こんにちは。フロントエンドエンジニアの相澤 ( @ttt3pu ) です。 みなさま、Nuxt 2 から Nuxt 3 へのアップグレードは順調でしょうか。 メドピアでは、2023年末のVue 2のEOLへ向けて、 各プロダクトで積極的にNuxt 3へのアップグレードを進めています。 現在私の担当しているプロダクトでは、マイグレーション作業自体はほぼ完了しており、 残すはQAテストなどを行うのみと言う段階で、本番リリースまであと一歩というところまで進んでおります！ 🎉 マイグレーションの事例も徐々に増え始めてきて、Nuxt 3のリリース当初よりも段々と移行はしやすくなってきましたが、 個人的に結構大変だったのがユニットテストのマイグレーション作業でした。 当記事では、マイグレーションに当たっての Tips と、ついでに Vitest を導入したことにより、 実行速度が 約 10分 ->
v3.10 comes quite close on the heels of v3.9, but it's packed with features and fixes. Here are a few highlights. ✨ Experimental shared asyncData when prerenderingWhen prerendering routes, we can end up refetching the same data over and over again. In Nuxt 2 it was possible to create a 'payload' which could be fetched once and then accessed in every page (and this is of course possible to do manua
JSer.info #685 - Storybook 8.0がリリースされました。 Storybook 8 Storybook: UI component explorer for frontend developers 破壊的な変更として、storiesOf APIの削除、*.stories.mdxの削除、StoryShots addonの削除、Yarn v1のサポート終了などが行われています。 詳細はマイグレーションガイドを参照してください。 Migration guide for Storybook 8.0 • Storybook docs 機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。 そのほかには、SWCを使うことでビルドパフォーマンスの改善、react-docgenがデフォルトとなるように変
Nuxt3のモジュール開発は意外と簡単？ | ドクセル
Nuxt3のモジュール開発は意外と簡単？ Module Author Guideをのぞいてみよう Vue Fes Japan2023 2023/10/28(土) きらぷか(@kira_puka) きらぷかとは？ きらぷか (@kira_puka) ● 合同会社めもらば 代表 ● Webアプリの受託開発 ● 趣味: 積読と個人開発 積読ハウマッチ SSSAPI 総額がわかる書籍管理アプリ Googleスプレッドシートの JSON API化サービス
はじめに こんにちは、がんがんです。 2024年4月、NuxtからNuxt ESLintというモジュールが公開されました。Nuxtユーザー待望のAll-in-one ESLintモジュールです。 本モジュールの登場によりNuxtにおけるリンターの設定方法が大きく変わりました。 本記事ではNuxt ESLintを用いたマイグレーションを中心に新しいNuxt ESLintをセットアップしていきます。 Nuxt ESLint とは Nuxt ESLintはAll-in-one ESLint integration for Nuxtと公式ドキュメントに記載がある通り、NuxtユーザーのためのAll-in-oneモジュールです。 今までのNuxtユーザーは Nuxt3でESLintを使う場合、どれがNuxt公式のルールだろう NuxtでESLint Flat Configはどうすれば良い？ nuxt
2023年9月22日紙版発売 2023年9月22日電子版発売 WINGSプロジェクト 齊藤新三 著，山田祥寛 監修 B5変形判／368ページ 定価3,520円（本体3,200円＋税10%） ISBN 978-4-297-13685-7 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto この本の概要 本書は，最近需要が急増しているSSR（Server Side Rendering）によるSPA開発に適したWebアプリケーションフレームワーク「Nuxt 3」の解説書です。Nuxtは，最新のバージョン3でVue 3に完全対応したことで，Composition APIやTypeScriptを活用した効率的な開発が可能になりました。さらに，CSR／SSR
🚀 Testing Nuxt 4 changesNuxt 4 is on the horizon, and it's now possible to test out the behaviour changes that will be coming in the next major release (#26925) by setting an option in your nuxt.config file: As we've been merging PRs for Nuxt 4, we've been enabling them behind this flag. As much as possible we're aiming for backwards compatibility - our test matrix is running the same fixtures in
Nuxt2からNuxt3へアップデートする際に、proxyに利用していたproxy-module及びデータフェッチライブラリのaxiosを、それぞれhttp-proxy-module、ofetchへと変更しました。 この記事ではそれらのライブラリを利用したproxyの設定や、リクエスト時の共通設定について説明します。 @nuxtjs/axios Axios module supports Nuxt 2. Nuxt 3 users can use the new isomorphic $fetch API (migration guide). 上記にあるように Nuxt3になってからaxiosからfetchが推奨になったので元々使っていたaxios moduleから移行する際に行ったproxyの設定の導入の一例となります。 １. インストールNuxt3のProjectで下記モジュールをインス
2022年末に正式リリースされた Nuxt 3 ですが、数多くの強力な機能を備えており、リリース後にもマイナーバージョンアップを続けているため、意外と知られていない機能が眠っていたりします。 今回はその中でも、かなり多くの方がその恩恵を受けられるはずなのに、少し知名度の低い印象のある、Typed Pages 機能について紹介したいと思います。 Typed Pages とは Typed Pages は、<NuxtLink> や useRoute() などの Vue Router を利用したルーティング管理において、指定したパスが実際に存在しているかどうかを厳格にチェックしてくれるようになる機能です。 Nuxt 3 で型安全なルーティングを実現する方法として、Nuxt Typed Router というモジュールもありますが、これとは別に、実は追加ライブラリを入れなくても Nuxt 自体がビルト
話者の所属する hacomono はここ数年でぐっとお客様も増え、それに比例して品質に対する期待値も高まっています。 一方で、製品にはテスト基盤が薄く、リグレッションやリファクタリングできないといった課題が強く意識されるようになりました。 本セッションでは、テスト導入に向けた戦略やそのために行ってきた準備と、その結果をお話できればと思います。 株式会社 hacomono プロダクト開発本部 POS グループ 野崎 才門
Nuxt 3 に直接移行するか Nuxt Bridge を使うか
結論 以下のような条件にあてはまる場合は、Nuxt Bridge を使う恩恵を得られると思っています。 コンポーネントやページ数が多く、比較的大きなアプリケーション Nuxt 3 へ移行するためのリソース（人員、工数）がない 上記に当てはまらない場合は、Nuxt 3 へ直接移行したほうが効率が良いかもしれません。 はじめに Nuxt 3 へ移行する方法として、大きくは下記の二通りだと思っています。 Nuxt Bridge を使って Nuxt 3 へ移行する Nuxt 3 へ直接移行する Nuxt Bridge を作っている身なのでもちろん Nuxt Bridge を使ってほしいですが、使わないほうが移行がスムーズだと思うケースもあるので、個人的にどう選んでいるかを書きます。 Nuxt Bridge を使った方がいいと思うケース コンポーネントやページ数が多く、比較的大きなアプリケーション
Slides for Vue Fes Japan 2023
Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive server components, new composables, a new loading API and more. A very merry Christmas to you and yours from all Nuxters involved in this release! 🎁🎄 We have lots of features packed into v3.9 and can't wait for you to try them out. ⚡️ Vite 5This release comes with Vite 5 and Rollup 4 support. Module authors may ne
Nuxt 3.7 is out, bringing a new CLI, native web streams and response, rendering optimisations, async context support - and much more. 🐣 A New CLIWe've refactored nuxi using unjs/citty and this marks the first Nuxt release that depends on the new version, safely in its own repository. We have grand plans for this - check out some of the features + roadmap discussions in nuxt/cli and please feel fr
Nuxt3で「eslintrcとprettier」から「flat configとeslint stylistic」へ移行した話
はじめに こんにちは、株式会社 Gerunda の齋藤です。 昨年 2023 年の 10 月に Flat config への移行に関するロードマップの発表からしばらく経ちました。 2024 年 4 月に eslint の v9 がリリースされます。現在 flat config が標準となり、eslintrc は非推奨となりました。次の v10 では完全に eslintrc は削除され使えなくなる予定になっています。そこで今回 eslintrc から flat config へ移行したので、ここに記録を残すこととします flat config とは そもそも eslint の目指す flat config とは何なのでしょうか。 eslint 公式のThe goals of flat configには以下のように書かれています Logical defaults One way to defi
This is possibly the last minor release before Nuxt v4, and so we've packed it full of features and improvements we hope will delight you! ✨ 🪵 Better loggingWhen developing a Nuxt application and using console.log in your application, you may have noticed that these logs are not displayed in your browser console when refreshing the page (during server-side rendering). This can be frustrating, as
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
Nuxt 3 への移行に Nuxt Bridge を使うのはいかが？ - メドピア開発者ブログ
2023-09-01のJS: Nuxt 3.7、Rome → Biome、Astro 3.0
Nuxt 3・Nuxt 4 の useFetch() を完全に理解する（したい）
Nuxt 3.10 · Nuxt Blog
2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
Nuxt3のLinterは Nuxt ESLint で整備する (マイグレーションあり)
Nuxt 3 フロントエンド開発の教科書
Nuxt 3.12 · Nuxt Blog
Nuxt3でAPI proxyをする方法｜SHOWROOM Blog
Nuxt 3 組み込みの新機能「Typed Pages」で型安全なルーティング
Nuxt 3ではじめるテスト導入戦略と初手
Deep Dive to UnJS and Nuxt 3
Nuxt 3.9 · Nuxt Blog
Nuxt 3.7 · Nuxt Blog
Nuxt 3.11 · Nuxt Blog