2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。 これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。 というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃♂駆け足で振り返ってみます。 （数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します） 🗓2023年1月 2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。 年が明けて2023年1月の主だった情報です。 🔼Nuxt 関連 2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
技術ブログをNuxt + Netlify + Contentfulから、はてなブログ for DevBlogに移行しました - もふもふ技術部
こんにちは。出口です。 タイトルにある通り、技術ブログをはてなブログに移行しました。 この記事では、なぜ移行することになったのか、どうやって移行したのか、移行で苦労したところなどをまとめておきたいと思います。 もし脱セルフホストブログ、脱Contentfulや、はてなブログへの移行をお考えであれば参考になるのではないかと思います。 なぜ移行したのか Nuxt 3への移行が大変すぎる Contentfulへの不満が募ってきた 当初の計画 改めて移行を考える 移行について 記事移行 インポート機能を使ってWXRを取り込む場合 AtomPubを使ったパターンの場合 サブディレクトリオプション Netfilyのリバースプロキシ設定 robots.txtを設置 NetlifyのPrerenderingオプション設定 検証ツールで1つだけ検証失敗する まとめ なぜ移行したのか まずそもそもなぜ移行した
こんにちは！フロントエンドエンジニアの土屋 (@tutti2612) です。 いよいよ Nuxt 2 の EOL が迫ってきましたね。 nuxt.com 先日、弊社でもとあるプロダクトの Nuxt 3 への移行を完了させました。 メドピアでは既に複数のプロダクトで Nuxt 3 への移行を行ってきましたが、今回の移行では今までとは違ったアプローチを取りましたので、その詳細をお伝えしたいと思います。 これから Nuxt 3 への移行を考えている方にとって、少しでもお役に立てれば幸いです。 今回の移行の特徴 Nuxt Bridge の使用 積極的な新機能開発を行いながらのビッグバンリリース 成功の要因 Nuxt Bridge の使用 週 1 回の定例ミーティング エンジニア以外の協力を得た手厚い手動テスト 巨人の肩に乗ることができた こうすれば良かった おわりに 今回の移行の特徴 今回の移行の
React to Nuxt
Nuxt for React devs in development everything you need to get started with Nuxt, from a React perspective. join waitlist with GitHub by registering you are signing up for email updates what will it cost? I'm still working out the details. I am aiming to be accessible to most developers. There will be purchasing power parity discounts. I'll also offer an early adopter discount for users who purchas
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という新しいプロジ
TypeScript開発において、関数の返り値などに型がついていると、開発体験が向上するかと思います。しかしfetch関数を用いて外部API等を叩いた際、fetch関数の返り値には型が適用されません。API fetchの返り値に型を適用させるために、OpenAPI形式のAPI定義ファイルを元に、型定義ファイルを生成するような取り組みもあります。 今回は、Nuxt Serverで作成したAPIを$fetch関数で叩いた際、自動で型情報が適用されることで開発体験が向上するという話をします
export default eventHandler(async (event) => { const database = hubDatabase() const blob = hubBlob() const kv = hubKV() // Do your magic here return { hello: 'world' } }) All you need to start shippingNuxtHub provides you with all the tools you need to build and deploy your Nuxt apps, on the edge with zero configuration.
【Nuxt 3移行】ユニットテストをNuxt 2から移行し、実行速度が4倍速くなった話 - メドピア開発者ブログ
こんにちは。フロントエンドエンジニアの相澤 ( @ttt3pu ) です。 みなさま、Nuxt 2 から Nuxt 3 へのアップグレードは順調でしょうか。 メドピアでは、2023年末のVue 2のEOLへ向けて、 各プロダクトで積極的にNuxt 3へのアップグレードを進めています。 現在私の担当しているプロダクトでは、マイグレーション作業自体はほぼ完了しており、 残すはQAテストなどを行うのみと言う段階で、本番リリースまであと一歩というところまで進んでおります！ 🎉 マイグレーションの事例も徐々に増え始めてきて、Nuxt 3のリリース当初よりも段々と移行はしやすくなってきましたが、 個人的に結構大変だったのがユニットテストのマイグレーション作業でした。 当記事では、マイグレーションに当たっての Tips と、ついでに Vitest を導入したことにより、 実行速度が 約 10分 ->
はじめに こんにちは、がんがんです。 2024.02.29 に関西で行われたReboot v-kansai Meetup #15で LT 登壇をしてきました。 登壇内容が GitHub の実装を掘っていくものだったため、本記事で改めて整理できたらと思います。 スライド資料はこちらです Auto-imports の使い方はこちらです Auto-imports 機能とは Auto-imports 機能とはcomponents、composablesを import 文不要で利用できる Nuxt の機能です。components の Auto-imports 機能はNuxt2時代からあったものです。 Nuxt3 の Auto-imports は以下の 2 機能を有しています。 機能 1. Built-in Auto-imports Vue, Nuxt composable が import 不要
JSer.info #697 - Nuxt 2は2024年6月30日でEnd-of-Life (EOL)となることが発表されました。 Nuxt 2 End-of-Life (EOL) · Nuxt Blog Nuxt 2.xの最終版となる2.18.0が6月末にリリースされる予定となっていて、それ以降はセキュリティアップデートも公式には提供されなくなります。 TypeScript 5.5がリリースされました。 Announcing TypeScript 5.5 - TypeScript TypeScript 5.5では、関数からtype predicatesを推論できるようになり、Array.prototype.filterなどでの絞り込みが簡潔に書けるようになっています。 また、Stage 3のSet Methodsをサポート、JSDocで@import {foo} from "foo"を
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がデフォルトとなるように変
「Vue / Nuxt利用者が気軽に情報を得ることができ、またVue / Nuxt初学者がまずここを訪ねてみる」 と思える、そんなVue / Nuxtの情報が集まる広場。ハードルは低く、わちゃわちゃと知見が集まる広場へ。 ✍️ Articles: Vue, Nuxt, related libraries
What happens on June 30th, 2024?After this date, Nuxt 2 will continue to be available on the NPM package manager, but will no longer receive updates, such as security and browser compatibility fixes. In other words, your applications will continue to work, but you may get deprecation warnings from your package manager reminding you that Nuxt 2 is no longer a supported version. What’s Next?Nuxt 3 h
Nuxt3のモジュール開発は意外と簡単？ | ドクセル
Nuxt3のモジュール開発は意外と簡単？ Module Author Guideをのぞいてみよう Vue Fes Japan2023 2023/10/28(土) きらぷか(@kira_puka) きらぷかとは？ きらぷか (@kira_puka) ● 合同会社めもらば 代表 ● Webアプリの受託開発 ● 趣味: 積読と個人開発 積読ハウマッチ SSSAPI 総額がわかる書籍管理アプリ Googleスプレッドシートの JSON API化サービス
Slides for v-tokyo #20
昔作ったUnityのゲームアプリ、なぜか娘が楽しそうに遊んでいて、 Flutterでリメイクしてみよ！と思い立ち、無事リリースできたので、 構成とかをまとめてみました(*´ω｀*) どんなゲーム？ 鯖(サバ)の中から鮪(マグロ)を探す かわいいお気軽タッチゲーム🐟 実際のプレイ画面はこんな感じに せっかくリメイクするので、 「親子で一緒にたのしめるシンプルなゲーム」 にしたいな〜とおもい、子供でもできるシンプルなルールで、 大人も楽しめる難易度になるようがんばってます！ システム構成 全体の構成はこんな感じ Flutter(アプリ) Nuxt.js(LPサイト) unjs/nitro(OGP生成など) Firebase(Auth/Firestore) Cloudflare R2(OGP保存) TypeSpec(Dart/TS間でのモデル共通化) Cloud Run + Firebase
はじめに こんにちは、がんがんです。 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
AWS IAM の結果整合性を避けるためセッションポリシーを用いてポリシーの動作確認を行う、を解説する
Nuxt Server Components を試す
設定ファイルと app.vue だけのごく質素なプロジェクトが生成された（こんな感じ）。前はもっと色々なファイルがあった気がする。慣れている人には余計なものがなくてよさそうだが、Nuxt を初めて使うような場合は途方に暮れそう。 公式ドキュメントに貼られている動画の内容を再現していく。 0:53 まずは通常通りにコンポーネントを作る。 これはマークダウンの文字列を HTML にパースして表示するコンポーネントで、変換には markdown-it というファイルサイズが大きいライブラリを使う。 <script setup lang="ts"> import MarkdownIt from 'markdown-it'; const md = new MarkdownIt(); const string = `# my component - markdown list - rendered a
🚀 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 自体がビルト
こんにちはkubotakです。 弊社M&Aクラウドでは先日、Nuxt(v2系)のアプリケーションをSvelteKitへ移行を完了しました。 ※一部ページは諸事情によりNuxtのままですが9割以上が移行済み。 本記事ではSveltekitへの移行した理由や移行方法について紹介したいと思います。 Vue2系がEOLを迎える Vue.jsは現在3系となり、Vueをベースとして作られているWebフレームワークであるNuxtも現在3系が最新となります。 また、Vue.jsの2系は2023年12月31日*1に、Nuxtについても2系は2024年6月30日*2にサポート対象外になることが発表されています。 それに伴い弊社でもNuxtの2系の対応について検討がされました。 NuxtからSveltekitへ まずはNuxt2から3への以降に際してどのようなマイグレーションが必要なのかを調査しました。 弊社の
Since this release, Nuxt DevTools is now enabled with Nuxt v3.8 and onwards by default. Generally available to all Nuxt projects! You can start playing with it by upgrading to the latest Nuxt, and press Shift + Option + D (macOS) or Shift + Alt + D (Windows) in your browser to open the DevTools. By default the floating panel is hidden to reduce the distraction. You can enable it inside Nuxt DevToo
Unleash Nuxt Developer ExperienceThe Nuxt DevTools gives you insights and transparency about your Nuxt App. Identify performance gaps and seamlessly manage your app configurations.
A lot of things have happened for Nuxt over the last year. Sébastien and Daniel share their thoughts on what we've achieved, and where we're going next. A Review of 2023 - SébastienIn January 2023, Daniel set out Nuxt: A vision for 2023. We achieved most of the goals we set out to accomplish. Some of them are missing and we will tackle them this year! It was a productive year and the team shipped
話者の所属する hacomono はここ数年でぐっとお客様も増え、それに比例して品質に対する期待値も高まっています。 一方で、製品にはテスト基盤が薄く、リグレッションやリファクタリングできないといった課題が強く意識されるようになりました。 本セッションでは、テスト導入に向けた戦略やそのために行ってきた準備と、その結果をお話できればと思います。 株式会社 hacomono プロダクト開発本部 POS グループ 野崎 才門
ヤフーで取り組むデータ可視化の流れ（FaaSで小さく始めるデータ準備から、Nuxtでのツール開発まで） #devsumi | ドクセル
ヤフーで取り組むデータ可視化の流れ（FaaSで小さく始めるデータ準備から、Nuxtでのツール開発まで） #devsumi スライド概要 2023年9月2日に開催されたデブサミ関西の登壇資料です。 【イベント詳細】 Developers Summit 2023 KANSAI https://event.shoeisha.jp/devsumi/20230902 【セッション概要】 セッションのヤフー・データソリューションは、ヤフーのビッグデータを活用して企業や自治体の課題解決を支援するサービスです。サービスで提供しているデータについて、生成されてから分析に活用されるまでの流れと、DS.INSIGHT、DS.GALLERYといったデータ可視化ツールのシステム構成を紹介します。ヤフーがデータを活用してどんなことをしているかを知りたい方、データ活用に興味がある方、業務においてデータ可視化にこれから取
はじめに フロントエンジニア３年目（総エンジニア歴６年）を迎えるにあたり、Nuxt / パフォーマンス / SEO など、Web アプリケーション開発について、たくさん学んできました。 今回は、Nuxt におけるパフォーマンスにフォーカスした話を記事にしたいと思います。 きっかけとしては、下記の記事を読んだ時でした。 医療のマスターDBを爆速で検索するWebサービスを爆速で作った こちら、本当に素晴らしい記事でした。。。 上記記事を読んだ時、「Nuxt でも同じように爆速で稼働するアプリケーション開発が可能では？」と思い、すぐに手をつけました。 注意点 本記事は公開されてから月日が経つにつれ、Nuxt での情報は古いものとなっていくので、本記事を確認する際は公開日をしっかり確認していただければと思います。（ただ、キーワードとしては、バージョン関係なくヒントにはなるので、そう言ったものはキャ
Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via @nuxt/test-utils, a library of test utilities and configuration that currently powers the tests we use on Nuxt itself and tests throughout the module ecosystem. InstallationIn order to allow you to manage your other testing dependencies, @nuxt/test-utils ships with various optional peer dependencies. For e
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
先日、Nuxt の公式から以下のようなブログポストがありました。 この中で、Nuxt4 が 2024/06 にリリース予定であるとの言及がありました。 また、合わせて変更予定の内容が以下から確認できるようになっていたので、簡単にではありますがまとめてみました。 利用者目線での注目すべき変更点 ※ 利用者とは、Nuxt を利用してアプリケーションを開発している人を指します。プラグイン開発者などは含まれません。 ディレクトリ構造の改善が特に大きな変更で、大抵の Nuxt プロジェクトで影響を受けるはず。 その他は小さな変更が中心。以下は利用者に関係がありそうな変更点であり、利用していたら影響を受けるはず。 Data fetching composables から params の削除 Data fetching composables の返り値から pending の削除 composable
Nuxt3 の useFetch を OpenAPI ベースで型安全にしてみる - hacomono TECH BLOG
どうも、フロントエンドテックリードのみゅーとん(@_mew_ton)です。 TypeScript で型でガチガチに固めるのが好きで、よく業務時間内に型パズルを書いてます。 Nuxt3 の useFetch を OpenAPI ベースで型安全にする仕組みができたので、今回はその共有をします。 TL;DR 記事中の Gist をそのままコピーして利用してください. 以下の手順で型安全にする OpenAPI の定義ファイルを openapi-typescript をつかって TypeScript の型にする 型パズルを実装する useFetch でこの型を利用するためのラッパーを作る 対象読者 本記事は以下の読者を対象としています Nuxt3 を使っていて、 useFetch を型安全にしたい要件がある OpenAPI のスキーマをがんばってメンテできている TypeScript で型ガチガチに
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ページを開く
Vue.js と Nuxt の 2023年まとめ
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
Nuxt 3 への移行に Nuxt Bridge を使うのはいかが？ - メドピア開発者ブログ
2023-09-01のJS: Nuxt 3.7、Rome → Biome、Astro 3.0
Nuxt Serverと$fetchを 組み合わせたTypeScript開発体験
NuxtHub: Build full-stack Nuxt apps, on the edge.
Nuxt Auto-imports機能の深淵を求めて
2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果
Nuxt 3.10 · Nuxt Blog
2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.
Nuxt 2 End-of-Life (EOL) · Nuxt Blog
Nuxt DevTools 101
娘のためにFlutterでゲームを作ってみた with Nuxt.js
Nuxt3のLinterは Nuxt ESLint で整備する (マイグレーションあり)
Nuxt 3 フロントエンド開発の教科書
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
Nuxt 3.12 · Nuxt Blog
Nuxt3でAPI proxyをする方法｜SHOWROOM Blog
Nuxt 3 組み込みの新機能「Typed Pages」で型安全なルーティング
NuxtからSvelteKitへ移行しました - M&Aクラウド開発者ブログ
Nuxt DevTools v1.0 · Nuxt Blog
Nuxt DevTools: Unleash Nuxt Developer Experience
Nuxt: Looking forward · Nuxt Blog
Nuxt 3ではじめるテスト導入戦略と初手
Nuxt でハイパフォーマンスを意識したアプリケーション開発 - Qiita
Testing · Get Started with Nuxt
Deep Dive to UnJS and Nuxt 3
Nuxt 3.9 · Nuxt Blog
Nuxt 3.7 · Nuxt Blog
Nuxt4 で予定されている変更点まとめ（2024/04現在）
Nuxt 3.11 · Nuxt Blog