複数の開発チームの機能開発を止めずに 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 のメジャーアップデート に取り組
Vue 3が正式リリースされてから約1年が経過しました。 Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？ この記事ではVue 2からVue 3への移行手順を記述していきます。 参考用のプロジェクトとして以下レポジトリを用意しました。 Vue 2からの移行を体験してみたい場合には、vue2-todo-appのタグにチェックアウトしてください。 移行ビルドを使用する Vue 2からVue 3へ移行するためのツールとして、公式から@vue/compatが提供されています。 @vue/compatを使用すると、Vue 2モードで動作するため、Vue 3で削除や非推奨になったAPIも一部の例外を除いてそのまま使用することができます。Vue3 で削除で非推奨になった機能は実行時に警告が出力されるようになります
本文書ではVue.jsのフレームワークであるNuxt.jsを使ってアプリケーションの開発を効率的に行いたいという人を対象にNuxt.jsのインストールを行った実環境を利用して動作確認を行いながら基本機能の説明を行っています。 Vue.jsのシンプルなコードで記述していますがVue.jsの知識があることを前提に説明を行なっているためVue.jsを知らない人には少し難しい内容になっています。Nuxt.jsを使いこなためにはvue.jsを理解する必要があるのでNuxt.jsを学習する前にVue.jsを先に学習することをお勧めします。 動作確認を行っているNuxt.jsのバージョンはv2.15.7です。現在はNuxt 3のRelease Candidateを利用することができます。最新バージョンのNuxt 3のチュートリアルではないので注意してください。Nuxt 3がリリースされたのでNuxt 3
「Nuxt3でのISR対応について調べる」や「Serverless FunctionsのCustom Runtimeを構築する」を経て、Vercelだいたい分かった状態になったため更に発展させてRailsでISRを動かす実験をしてみた。 条件 VercelのServerless Functionのruby27ランタイム(AWS Lambdaと同等)上で動かす a. Custom Runtimeで全部やるのはたいへんそうなので考えない Build Output API (v3) を使ってOn-Demand Incremental Static Regenerationする a. JavaScriptフレームワーク以外でもできるんじゃない？ という部分を検証したい せっかくRailsアプリケーションなのでViewやARも使ってMVCしたい データベースはPlanetScaleのMySQL互換サ
Nuxt.js の既存プロジェクトの型チェックを厳格化した話 ～vue-tsc と tsconfig/strictest 導入までの道のり～ - ANDPAD Tech Blog
ANDPADフロントエンドエンジニアの小泉（@ykoizumi0903）です。Vue / Nuxt での開発を行っています。 このテックブログでも、 Vue Composition API を使った開発にまつわる記事を過去に何件か書いていますが、現在担当しているプロダクトの開発に携わるようになって2年ほど経ち、いわゆる技術的負債と呼ばれるようなものも少しずつ増えてきました。 そういった状況を改善するアプローチの1つとして、Nuxt.js の既存リポジトリにおける型チェックのルールをより厳しい設定に変更する、という取り組みを2ヶ月ほどかけて行いました。 今回はその取り組みにおける道のりを振り返って、苦労したことや良かったことなどを書いてみたいと思います。 導入を決めるまでの流れ きっかけは noUncheckedIndexedAccess を知ったことから 弊社のSlackにはtimes文化
vuefes.jp 一日セッション見つつメモを残したので、個人ブログに放り投げておく。 殴り書きなので何の清書もしてないし、誤字脱字もチェックしてないです！！！ Keynote | The Evolution of Vue / Evan You https://vuefes.jp/2022/sessions/yyx990803 0.x系の Pre バージョン時代の話 ES5のみのFeatureを前提にする必要があった 1.0のコードネームってEvangelionだったのか.. 2015-2016でのコアなライブラリ群の追加が多かったらしい。Vue Router とかVuex 大規模SPAアプリケーションの構築の解決狙い Vapor Mode Virtual DOM への依存がない パフォーマンス特化でのプリビルド 今後 Vue2→3の移行期という認識 30%が Vue3, 25%が 2.7
はじめに この記事は、every Tech Blog Advent Calendar 2024(夏) の1日目の記事です。 DELISH KITCHEN開発部の羽馬(@NaokiHaba)です。 この記事では、DELISH KITCHEN チラシ で使用している Vuex の Pinia への移行について紹介します。 chirashi.delishkitchen.tv 本記事では、これらの知識があることを前提に説明を進めます。 Vue.jsの基本的な知識 Nuxt.jsの基本的な知識 Vuexの基本的な知識 Piniaとは Pinia（ピーニャ）は、Vue.js用の新しい状態管理ライブラリです。Vuexの次のイテレーションとして開発が始まり、Vuex 5に組み込むことを想定していたアイデアを多く取り入れています。 pinia.vuejs.org Piniaは、Vuexと比較して以下のような
概要 Nuxt.jsは今最も「イケてる」とされるWEB開発フレームワークです。ポストRailsという文脈で語られることも多いようです。巷でNuxtについての記事も増えていますね。 しかし、ネット上のNuxtの記事では、Nuxtを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxtを触る人はVueの経験があるという前提）なので当然なのですが。 本記事では、これからWEB開発者を目指す人を対象に、 ・Nuxtを習得するには何が必要か？ ・そのための勉強方法 を紹介します。 解像度を高めた言い方をすると、**「Nuxtの公式ドキュメントを理解できる」「自分で簡単なNuxtのエラーや問題を解決できる」程度の実力を身に付けることで、「メンバーとしてチーム開発に参加できる」**をゴール設定に置きます。 自己紹介 NuxtとFirebaseを
Writable Computed を活用して読みやすいVueコードを書くためのTips - ANDPAD Tech Blog
こんにちは、ANDPADフロントエンドエンジニアの小泉（@ykoizumi0903）です。 ANDPADでは入社当初からずっとVueでの開発を行っており、特に直近2年はComposition APIで開発しています。 今回は、Vueでの開発を続けている中で、個人的に最近気に入って積極的に使っている、Writable Computedの話をしたいと思います。 このWritable Computed、一応ドキュメントには必ず書いてあるのですがどうにも影が薄く、バージョン3に合わせて刷新された英語版ドキュメントでは「書き込み可能なcomputedが必要なのはレアケース」と書かれているくらいなので、経験の長いVueエンジニアであっても、ほとんど使ったことがないという方も多いのではないでしょうか。 私自身も、このsetter関数について、存在は以前から知っていたものの、どういう使い道があるのかよくわ
Netlify Edge Functions: Serverless Compute Powered by Deno
In this post We’re pleased to announce that Edge Functions is now available in public beta on the Netlify platform. Edge Functions enables you to run serverless JavaScript/TypeScript functions right from Netlify’s Edge network. It’s a full runtime environment, with complete control to transform requests and responses, stream server rendered content, or even run an entire application—all right from
Happy new year, Vue community! With 2023 upon us, we would like to take this opportunity to recap what happened in 2022, and discuss what to expect in 2023. Recap for 2022 In February 2022, we switched Vue's default version to 3.x. The switch marked the readiness of all the official parts of the framework for v3, including a major revamp of the documentation that provides guidance on latest best
スケーラブルで保守性の高いモジュラーディレクトリ構成へのフロントエンドリポジトリ移行 | メルカリエンジニアリング
Merpay Advent Calendar 2022 の9日目は、メルペイ フロントエンドエンジニアの @tokuda109 がお届けします。 この記事は、メルペイ フロントエンドチームで保守しているリポジトリを複数のディレクトリに分割し、スケーラブルで保守性の高いコードベースに再構築する方法を紹介します。 記事の内容は『Merpay Tech Talk 〜Monorepo開発におけるツール選定〜』のイベントで一度紹介したものになりますが、この記事ではさらに詳しく説明します。 フロントエンドチームは今後 Nuxt 3 への移行作業を控えていて、今回紹介するリポジトリ移行が Nuxt 3 への移行に与える効果についても紹介します。 抱えていた課題 フロントエンドチームは、メルペイのサービスリリース時からカスタマーサポート業務を行う社内向け管理画面や加盟店さま向け管理画面など、様々なマイクロ
10月28日に開催された「VueFes Japan 2023」のイベントレポートをダイジェストでお届けします。 なお、公式サイトのタイムテーブル内に、一部の講演の資料がアップロードされています。 オープニング 実行委員長・ユーザーグループ代表の川口和也氏から、挨拶がありました。 今回は4トラックでスピーカーは35名、コアチームの来日など充実した内容になっています。またオフラインでの開催は5年ぶりです（台風やコロナの影響で、2018年以来です）。 川口氏は、フェイス・トゥ・フェイスで開催できる嬉しさやスポンサーへの感謝を述べました。 Evan You氏によるキーノート 基調講演はVue.jsの作者であるEvan You氏。広い会場で立ち見もでるほどの盛況でした。Evan You氏は、台風やコロナで日本に来れなかったため、久々の来日とのことです。 Evan You氏はVue.jsとVite
Nuxt Bridgeを使ったNuxt3の導入調査してみた - for Startups Tech blog
こんにちは。エンジニアの大野です。主にフロントエンド周りを担当しています。 去年の話題にはなりますが、2021年10月にNuxt3のベータ版がリリースされました。 Nuxt3beta 公式のリリーススケジュールでは、このブログを書いている2022年3月にrc版、 そして2022年6月には安定版をリリースする予定となっており、着々とバージョンアップへの準備が進められている雰囲気が伺えます。 弊社にもNuxt2の環境で運用しているプロジェクトがあるのですが、vue3のリリース直前に作成した環境であるため、Composition Api やTypeScriptは別途runtimeやbuildのモジュールを個別に入れたりしており、package.json やnuxt.config.ts の設定周りがやや煩雑になっていました。 Nuxt3ではこのあたりのモジュールが標準搭載されるということもあり、チ
Nuxt v3はどうなるのか - Qiita
2020/09/19にめでたくVue.js v3がリリースされました🎉 さて、私の関心は業務でも利用しているNuxt.jsがVue.js v3に対応するとどうなるのか、Nuxt.js v3はどうなっていくのか気になっています。 Vue.js Amsterdamで紹介されたNuxt.js v3のスライドから個人的に気になったところを抜粋して紹介します。 The State of Nuxt by Sébastien Chopin Nuxt 3 Architecture Updates by pooya parsa 詳しくはスライドを参照ください。 TypeScriptのサポート core や vue-appが型付になる @nuxt/typesやnuxt-tsが不要になる VueComponentのTypescriptサポート（SFC？） ランタイムとnuxt.configのサポート 現状はN
使用技術 Vue3 + Nuxt3 Composition API TypeScript ワイ、お問い合わせフォームを作りたい ワイ「Vue の Composition API を使って、お問い合わせフォームを作るで！」 ワイ「フォームのデザインはこんな感じや！」 ワイ「いや〜、我ながらイケてるデザインやな！」 ワイ「ほな、Composition APIを使ってフォームの状態を管理していくで〜」 フォームの状態を管理するには？ ref()またはreactive() ワイ「Composition APIの場合、状態を管理するには」 ワイ「ref()またはreactive()を使うんやったな」 ワイ「この2つは何が違うんやろ？」 ワイ「確か───」 ref() 文字列・数値・真偽値などの、プリミティブな値を保持できる reactive() オブジェクト・配列・Map・Setなどの状態を保持でき
本記事では、noteのフロントエンドについて2つトピックを紹介します。Nuxt.jsへの移行が完了した話と、見えてきた課題を踏まえ次世代のフロントエンド構築を模索している話です。 Nuxt.jsへの移行が完了noteでは、AngularJSで構築していたフロントエンドをNuxt.jsに移行するプロジェクトを2018年から進めていましたが、2021年12月、ついに移行が100%完了しました！ 最初の1年弱は移行プロジェクトを組み専任リソースを張って実装し、ページ単位で移行していました。手順の型ができて不確実性が減ってからはローコスト運用に変えて少しずつ進め、約3年で全てのプロセスが完了しました。移行の動機、Nuxt.jsの選定理由、移行プロセスなどはこちらの記事を参照いただければと思います。 移行した結果、どうなったか？Nuxt.jsへの移行により以下のような恩恵が得られました viewレイ
Vite 4.0 is out!
Vite 4.0 is out! December 9, 2022 - Check out the Vite 5.0 announcement Vite 3 was released five months ago. npm downloads per week have gone from 1 million to 2.5 million since then. The ecosystem has matured too, and continues to grow. In this year's Jamstack Conf survey, usage among the community jumped from 14% to 32% while keeping a high 9.7 satisfaction score. We saw the stable releases of
こんにちは！フロントエンドエンジニアの土屋 (@tutti2612) です。 いよいよ Nuxt 2 の EOL が迫ってきましたね。 nuxt.com 先日、弊社でもとあるプロダクトの Nuxt 3 への移行を完了させました。 メドピアでは既に複数のプロダクトで Nuxt 3 への移行を行ってきましたが、今回の移行では今までとは違ったアプローチを取りましたので、その詳細をお伝えしたいと思います。 これから Nuxt 3 への移行を考えている方にとって、少しでもお役に立てれば幸いです。 今回の移行の特徴 Nuxt Bridge の使用 積極的な新機能開発を行いながらのビッグバンリリース 成功の要因 Nuxt Bridge の使用 週 1 回の定例ミーティング エンジニア以外の協力を得た手厚い手動テスト 巨人の肩に乗ることができた こうすれば良かった おわりに 今回の移行の特徴 今回の移行の
We are happy to announce that we have released v1.0 of Volar, the official IDE/TS tooling support for Vue! 🎉 This major version ships with tons of improvements across the board. In addition to improving UX, performance, and package size, we also released Plugin API v1 and refactored the core code to be framework-agnostic. 注：結尾附有中文版本 (There is Chinese version of this post at the end)。 Earlier this
クライアントワーク（受託）のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
Reject Conference - Vue Fes Japan Online 2022の登壇資料です。
Nuxt Auth Utils でサーバーサイドの認証を（OAuth・マジックリンク・ワンタイムパスワード）
Nuxt 3 では Universal Rendering (SSR) によるアプリケーションの開発が難なく可能です。 Nitro というサーバーサイドのフレームワークにより、Nuxt 3 はサーバー側の処理も簡潔に記述できるようになっています。 Nuxt Auth Utils はそんな Nuxt の特徴を生かした、SSR のアプリケーションに OAuth 認証を実装できる Nuxt モジュールです。 執筆時点で GitHub, Google, Discord など 17 の OAuth プロバイダーに対応していますので、通常用途では充分だと思います。 さて当記事では、そんな Nuxt Auth Utils を使った実装と、後半では OAuth 以外の認証方法であるマジックリンク認証とワンタイムパスワード認証を追加実装する方法を解説します。 完成形のイメージ 完成したログインフォームはこの
はじめに 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
2022 / 2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2021年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は累計スター数ではなく、『2021年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.js、2020年の総合ランキングはDenoです。 以下は2021年のランキング、2021 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2021 6回目のJa
バクラクの Vue3 移行戦略と詰まったポイント #LayerXテックアドカレ - LayerX エンジニアブログ
こんにちは。LayerX バクラク事業部 バクラク申請・経費精算チーム エンジニアの @tatane です。 最近10万円超えのヘッドホンを買ってしまい、しばらく離れていたオーディオ沼にまた片足を突っ込んでしまいました。 この記事は LayerXテックアドカレ2023 21日目の記事です。前回は @serima が「LayerXの発信の"のびしろ"とCasual Nightのウラガワの話」を書いてくれました。次回は同じチームの @upamune が「エラーログ祭り改善の話」を書いてくれる予定なのでご期待ください！ 今回はバクラク事業部で進めている Vue3 移行の話をご紹介します。 バクラクの Web フロントエンドの技術スタックについて LayerX が提供している SaaS であるバクラクシリーズでは複数プロダクトを提供しており、それらの Web フロントエンドの技術スタックにはバリエ
Today we're excited to announce the release of Vue 3.4 "🏀 Slam Dunk"! This release includes some substantial internal improvements - most notably a rewritten template parser that is 2x faster, and a refactored reactivity system that makes effect triggering more accurate and efficient. It also packs a number of quality-of-life API improvements, including the stabilization of defineModel and a new
Nuxt 3 × Vitest でユニットテストのエラーを全て解消するための調査レポート - ANDPAD Tech Blog
Nuxt 3 × Vitest で既存のユニットテストを全て通すための調査レポート こんにちは、ANDPADでフロントエンドエンジニアをしている小泉（@ykoizumi0903）です。 昨年末に Nuxt 3 が正式リリースされて以降、アップデートに向けた移行作業を粛々と進めています！ 今回はその中でも、ユニットテストを Nuxt 3 に対応させる際に苦労したポイントや対処法についてご紹介したいと思います。 私達のチームでは昨年秋以降、コンポーネントユニットテストの拡充に力を入れてきていて、その一環として元々 Jest から Vitest にテストツールを移行していました。 しかし、Nuxt 3 への移行作業を行ったことで、これらのテストのうちの約半分が失敗するようになりました。 この記事では、このテストのエラーをどのように解消したかの流れをまとめて説明したいと思います。 （Nuxt 2
Weekly Frontend News 2022年4月4週目/React Redux v8,Redux v4.2,Nuxt v3 RCなど
Weekly Frontend News 2022年4月4週目/React Redux v8,Redux v4.2,Nuxt v3 RCなど 自分が今週見たフロントエンド記事のまとめ。 Release v8.0.0 · reduxjs/react-redux React 18対応、内部のTS化によりtypes/react-reduxが不要に、ビルドをES2017にしたのでIE11非対応へ。 Release v4.2.0 · reduxjs/redux createStoreが@deprecatedになり非推奨としてマークされるようになった。そしてlegacy_createStoreが追加された。これは、Redux Toolkitをへの移行を促すためである。 また、Why Redux Toolkit is How To Use Redux Today が追加され、ReduxではなくRedux
【個人開発】ChatGPT × Text-to-Speech（Google）で知育サービスを作ってみた
概要 久しぶりに個人開発をしました！ 娘が「コペル」という幼児教室に通っています。 その幼児教室で「コペルギネス」というゲームがあります。 ゲームの内容は下記のようなゲームになります。 50個の(食べ物・動物等)絵が描いてある表を見て、順に作ったお話を先生がお話してくれます。それを２回聞いて、覚えます。自分の手元にも同じカードが５０個あるのでそれを子供が１人で回答用の表に順番通りに並べて貼っていくと言うゲームです。50個のカードのうち何個同じ場所に置けていたかを制限時間内に競います。正解した数が多かった人の勝ちです。 単語と単語にお話をつけ、繋がったストーリーでイメージすることで記憶しやすくする効果があるそうです。 このコペルギネスの練習をするとき、あらかじめ物語を作っておかないと、同じ絵を登場させてしまったり、答えを覚えていなかったりと結構大変なので、それを自動化するWebアプリを作りま
Recently, folks at Escape shared a blog post talking about their migration from Vue 2 to Svelte, and compared Vue 3 with Svelte. We found that the article contained a number of inaccuracies. In this post, we will share some thoughts from our perspective and hope to clarify the potential misconceptions the post could give rise to. Before we dive into the details, we would like to emphasize that we
Co-Edo終了報告サイトをCloudflareで開発するとき使った NuxtHub がとっても便利！
こんにちは。田中弘治です。 僕は2013年よりコワーキングスペース茅場町 Co-Edoというのを運営してきているのですが、実はまことに残念なことに、ビル建て替えに伴い本年中に終了することとなりました。 これまでご活用いただいたみなさま、本当にありがとうございます。 その報告をする専用サイトを作ろうと思い、どうせならCo-Edoへのメッセージを送れるようなものをと考えてたところで Cloudflare を活用しようと思いました。 D1 や KV といったエッジで動く技術は今後広まっていくと思うので、今後 Cloudflare 中心の開発をしていくための準備でもあります。 作ったもの 1週間も2週間もかけてつくるものではないので、あっさりしたものを作りました。 作っていくうちに、いろいろやりたくなり、結果的につぎのような機能を持つサイトになりました。 メッセージを送る機能 今後の最新情報を受け
こんにちは！Vue.js 日本ユーザーグループ代表の kazupon です。 2023年10月28日(土)に中野セントラルパークカンファレンスでVue Fes Japan 2023を開催しました。 去年2022年はオンラインカンファレンス開催でしたが、今年2023年は COVID-19 が落ち着き、初開催した2018年より5年ぶりに日本でようやくオフラインカンファレンスを開催することができました。 当日多くの方に参加頂き、1日のカンファレンスを通して盛り上がりました。 協賛して頂いた各社、団体、個人スポンサーの皆様、スピーカーの皆さん、そして参加された皆さん、本当にありがとうございました。 カンファレンス開催から1ヶ月以上経ってしまいましたが、改めてカンファレンスを振り返ってみたいと思います。 レポート今年のカンファレンス参加状況ですが以下になりました。 全参加者数: 587名 一般参加者
Nuxt 3 アップデートで VeeValidate v3 から v4 に移行するには - ANDPAD Tech Blog
この記事は ANDPAD Advent Calendar 2022 の 5日目の記事となります。 ANDPADでフロントエンドエンジニアをしている小泉（@ykoizumi0903）です。Vue / Nuxt.js での開発を行っています。 さて、Vue・Nuxt 界隈でこの年末ホットな話題と言えば、何といっても Nuxt 3 が正式リリースされたことではないでしょうか。 nuxt.com 非常に多くの新機能や改善が盛り込まれた魅力的なメジャーアップデートとなっており、個人的にもNuxt3の魅力をまとめた記事（祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力）を自発的に書くくらいにテンションが上がる内容となっていました。 アンドパッド社内でも、早速 Nuxt 2 を採用している各プロジェクトそれぞれで、Nuxt 3 バージョンアップに向けた取り組みが徐々にスタートしています。 S
[[toc]] ESM & CJS ESM - ECMAScript modules CJS - CommonJS In the past decade, due to the lack of a standard module system of JavaScript, CommonJS (a.k.a the require('xxx') and module.exports syntax) has been the way how Node.js and NPM packages work. Until 2015, when ECMAScript modules finally show up as the standard solution, the community start migrating to native ESM gradually. // CJS const cir
エンジニア転職のリアル
Vue.jsはオワコンになり、Vue3は衰退する。Nuxt2からNuxt3へのアップデートは破壊的変更が多すぎて移行できないからだ 2022 年 11 月 16 日、Nuxt3が正式リリースされました。 Nuxt2 を使っていた多くの企業が移行に四苦八苦しているのが現状です。 その背景として、Nuxt2→Nuxt3 へのアップデート + Vue2 → Vue3 のアップデート、周辺ライブラリのアップデートを全部同時にやらなければいけない点があります。当然、地獄です。 以前の Nuxt2 は Vue3 に対応していなかったため、Nuxt2 を使っているプロジェクトでは Vue2 を使うしかありませんでした。 そのため、Nuxt Composition APIというライブラリを使って、Vue3 の Composition API 的な書き方を Nuxt2 で使えるようにするのが、Vue2 +
以前（まだ Nuxt 3 がベータリリースだった頃）に『Nuxt 3 の useFetch() と useAsyncData() の使い方』という記事を書きました。 その後、より多機能になり、またベストプラクティス的な使い方が分かってきたこともあり、改めて useFetch() についてまとめてみたいと思います。 はじめに ここ数年、一貫して Nuxt 3 を使用している僕ですが、主要なコンポーザブルである useFetch については当初の理解が違っていたものもありました。 少しずつ修正しながら、都度コードを書き換えてきたのですが、その過程で得られた知見を共有したいと思います。 なお、記事内で Nuxt と書いた場合は Nuxt 3 および Nuxt 4 を指します。 （現時点では Nuxt 4 はリリースされていませんが、発表されている内容から Nuxt 3 との違いを考慮しつつ記述し
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.6 is out, bringing performance improvements, fully static server components, better style inlining, static presets, increased type safety - and much more. SPA loading indicatorIf your site is served with ssr: false or you have disabled server-rendering on some of your pages, you might be particularly interested in the new built-in SPA loading indicator. You can now place an HTML file in ~/a
本文書ではVue.jsのフルスタックフレームワークであるNuxt 3を使ってアプリケーションの開発を効率的に行いたいという人を対象に Nuxt 3についての解説をできるかぎり簡単なコードを利用しながら行っています。Vue.jsのComposition APIのコードが理解できることを前提に記述しているのでVue.jsを使って記述したコードの詳細について解説は行なっていませんが、本文書を読み終えるとNuxt 3の全体像と基礎的な理解を深めることができます。 Nuxtを利用したファイルのアップロードについては別の記事で公開しています。 Nuxt 3とは NuxtはVue.jsをベースに開発されたフルスタックのWEBフレームワークです。 Vue.jsはUI(User Interface)を担当しますがNuxtではVue.jsが持つUIに関わる部分だけではなくSSR(サーバサイドレンダリング)を含
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 は、とてもシンプルに（意識することなく）活用する
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue2のプロジェクトをVue3へマイグレーションする
【完全ガイド】ゼロからしっかり理解したい人向けのNuxt.js入門 | アールエフェクト
RailsアプリケーションをVercelにデプロイしてISRする
📝 Vue Fes Japan Online 2022 / 見たセッションメモ - memo_md
Vuex から Pinia への移行を行いました - every Tech Blog
Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~ - Qiita
2022 Year In Review | The Vue Point
VueFes Japan 2023イベントレポート | gihyo.jp
【Vue】reactive()って要らなくね？ref()だけでよくね？ - Qiita
noteのNuxt.jsへの移行が完了し次世代のフロントエンド構築を進めています｜こんぴゅ
Nuxt 3 への移行に Nuxt Bridge を使うのはいかが？ - メドピア開発者ブログ
Volar 1.0 "Nika" Released! | The Vue Point
Nuxt3で個人的にuseFetchよりuseAsyncDataを推したい理由
JavaScript ライジングスター 2021 - Qiita
Announcing Vue 3.4 | The Vue Point
On Escape's Vue 2 to Svelte Migration | The Vue Point
Vue Fes Japan 2023 を開催しました！｜kazupon
Ship ESM & CJS in one Package
Nuxt 3・Nuxt 4 の useFetch() を完全に理解する（したい）
2023-09-01のJS: Nuxt 3.7、Rome → Biome、Astro 3.0
Nuxt 3.6 · Nuxt Blog
Nuxt 3を使いこなすために基礎から徹底解説 | アールエフェクト
Nuxt 3 の useFetch() と useAsyncData() の使い方