Vuex から Pinia への移行を行いました - every Tech Blog
はじめに この記事は、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と比較して以下のような
Vue.js
優先度B: 強く推奨 これらのルールは、ほとんどのプロジェクトで可読性や開発者の使い勝手を向上させることが分かっています。これらのルールに違反した場合でも、あなたのコードは動作しますが、違反はごく少数で十分に正当な理由がなければいけません。 コンポーネントのファイル ファイルを結合してくれるビルドシステムがあるときは、各コンポーネントはそれぞれ別のファイルにするべきです。 そうすれば、コンポーネントを編集したり、使い方を確認したりするときに、より素早く見つけることができるようになります。
[和訳] Nuxt3 公式サイト~useRouter
この記事について この記事はNuxt3 公式サイト useRouter を和訳したものになります（日本語が不自然になってしまっている箇所があるのはごめんなさい）。 useRouter useRouter コンポーザブルはルーターインスタンスを返すので、セットアップ関数、プラグイン、ルートモジュールの中で呼び出す必要があります。 Vue コンポーネントのテンプレートの中では、代わりに $route を使用してルーターにアクセスできます。 pages/ フォルダがある場合、useRouter は vue-router が提供するものと動作は同じです。各メソッドが何をするのかについてのより多くの情報は、ルーターのドキュメントを自由に読んでください。 詳細は下記ページを参照してください。 Basic Manipulation addRoute：新しいルートをルーターインスタンスに追加します。par
![[和訳] Nuxt3 公式サイト~useRouter](https://cdn-ak-scissors.b.st-hatena.com/image/square/de4be21d3ac9b8d7f07c9ae593c9a0c529ef596f/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--Ptk2_rvT--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B%2525E5%252592%25258C%2525E8%2525A8%2525B3%25255D%252520Nuxt3%252520%2525E5%252585%2525AC%2525E5%2525BC%25258F%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%252588~useRouter%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ami%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2MxYTZkMWY2OTkuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
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
Reactを使うのかVueを使うのかについて個人的なモチベーションを整理したかった
本記事はあくまで執筆時点(2022/3/27)での一意見でありますので、今後時間や技術的な変化により参考にならない部分も出てくるかもしれません。 Reactはいいぞ、Vueはいいぞと様々な情報が世の中には溢れているものの、「こういう場合には」という前提条件にあまり言及されていない情報が多いような気がしたので自分なりの視点で考えてみたいと思いました。 また、SvelteやAngular等他のフレームワークもありますが、そちらは個人的にはよくわからないので、あくまでReactとVueについてだけ言及していきます。 私のフロントエンド経験と気持ちの変化 2018年くらいにReactを勉強し始める。 → Reactって難しい…。 2019年くらいにVueを学び始める。 → Vueって簡単！Reactよりわかりやすくてええやん！ 2020年くらいにNuxtの案件に参画する。 → Webフロントエンド
[FormKit] Vue3, Nuxt3 で使える便利なフォームライブラリ「FormKit」を簡単に紹介するよ - Qiita
[FormKit] Vue3, Nuxt3 で使える便利なフォームライブラリ「FormKit」を簡単に紹介するよVue.jsNuxtVue3Nuxt3FormKit FormKitってなに？ Vue3, Nuxt3 でフォームを作るときに便利なライブラリだよ FormKitひとつあれば、フォームに関すること（バリデーションやテーマ設定、国際化など）をすべて対応できるよ JSONにシリアライズできるオブジェクト（スキーマ）で、フォームを生成できるよ まだ日本語の記事をほぼ見かけないけれど、実際に使ってみて便利だなと思ったから、今回紹介してみる。 何が良いの？（個人的な感想） JSONにシリアライズできる簡潔なオブジェクトでフォーム生成できるのがとっても好き TailwindCSSとの噛み合わせも良い バリデーションもシンプル 公式ドキュメントがとてつもなく分かりやすい（大事） カスタムinp
![[FormKit] Vue3, Nuxt3 で使える便利なフォームライブラリ「FormKit」を簡単に紹介するよ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d564cb631004636de7e87dac5412c77fb56daca5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCRm9ybUtpdCU1RCUyMFZ1ZTMlMkMlMjBOdXh0MyUyMCVFMyU4MSVBNyVFNCVCRCVCRiVFMyU4MSU4OCVFMyU4MiU4QiVFNCVCRSVCRiVFNSU4OCVBOSVFMyU4MSVBQSVFMyU4MyU5NSVFMyU4MiVBOSVFMyU4MyVCQyVFMyU4MyVBMCVFMyU4MyVBOSVFMyU4MiVBNCVFMyU4MyU5NiVFMyU4MyVBOSVFMyU4MyVBQSVFMyU4MCU4Q0Zvcm1LaXQlRTMlODAlOEQlRTMlODIlOTIlRTclQjAlQTElRTUlOEQlOTglRTMlODElQUIlRTclQjQlQjklRTQlQkIlOEIlRTMlODElOTklRTMlODIlOEIlRTMlODIlODgmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTEyYWE2NzhkMzU0NTU3ZmU0NDliZjMwMWM4MmY4ZWFj%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwZmFhYmxlMDElMjBpbiUyMEtlbnBhbCVFNiVBMCVBQSVFNSVCQyU4RiVFNCVCQyU5QSVFNyVBNCVCRSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTMyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZmU0OGU0Y2M3YzY5ZjhlZTkzYjM1ZTdmMzJmNDlkYjM%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D5417fcd34bcf0203d69052f1a69f0780)
[Vue]Composition API + Yupを利用したフォームのバリデーション | DevelopersIO
t_o_dと申します。 フォーム検証は非常に重要な処理ですが、厳格かつ適切に実装しようとなると相応の知識が必要となり、大抵の開発ではライブラリを用いることが多いです。 今回はYupというライブラリを利用してVue.js(Composition API)で実装する方法を記録いたします。 結果 今回は以下のバリデーションができる入力フォームを作成していきます。 テキストボックス セレクトボックス ラジオボタン 必須入力だけではなく、形式チェックもYupの機能を利用いたします。 全て通ったらエラーメッセージが消え、送信処理が送れます。 環境 mac OS Monterey 12.2 Node.js v18.0.0 Vue 3.2 手順 Vue3 + yup環境構築 以下のコマンドをうち、Vue3及びyupを利用できるサンプルプロジェクトを作成 # サンプルプロジェクト作成 npm init vi
![[Vue]Composition API + Yupを利用したフォームのバリデーション | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/7b6a8966a1dd73d823a42e9559be0cc1bcdb76ea/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2021%2F08%2Fvuejs-logo.jpg){kind=logo}
Nuxt3 + Pinia + firebase v9で認証処理を作ってみる - Qiita
はじめに Nuxt3 と firebase v9 を使って認証フローを作成してみました。 認証データの状態管理には Pinia を使用します。 firebaseの接続情報 接続情報は publicRuntimeConfig にまとめておきます。 export default defineNuxtConfig({ ... modules: [ ['@pinia/nuxt', { autoImports: ['defineStore'] }], ], publicRuntimeConfig: { firebase: { apiKey: 'xxxxxxxxxxxxxxxxxxxx', authDomain: 'xxxxxxxxxxxxxxxxxxxx', projectId: 'xxxxxxxxxxxxxxxxxxxx', storageBucket: 'xxxxxxxxxxxxxxxxxxxx
Nuxt3入門(第7回) - Nuxt3のプラグイン・ミドルウェアを使う | 豆蔵デベロッパーサイト
前回はNuxt3のエラーハンドリングについて見てきました。 今回はプラグインとミドルウェアを見ていきます。 両方とも必須という訳ではありませんが、うまく使えばアプリケーション開発を効率化できます。 プラグインはNuxtアプリケーション初期化時に実行してくれるもので、アプリケーション全体で利用するものはここでまとめて定義しておきます。 Nuxt3ドキュメント - Plugin Directory ミドルウェアはページルーティング時に実行され、不正な遷移防止や条件によって遷移先を切り替える場合等で使用します。 Nuxt3ドキュメント - Middleware Directory プラグイン、ミドルウェアともにNuxt2からあるものですが、Nuxt3では若干使い方が変わっています。 前述のとおり、プラグインはNuxtアプリケーションの初期化時に実行されます。デフォルトではサーバーサイド、クライア
Nuxt 3 の Route Middleware で簡単な認証フローを構築する
Nuxt 3 にも middleware (Route Middleware) が実装されました。 Route Middleware は、サーバーサイド・クライアントサイド共、ルーティング（ページ遷移）にあたって行う共通処理を記述することができます。 たとえば、ログインが必要なページに対し、ログイン中かどうかを判定し、必要に応じてログインページを表示するなどの場合に使用します。 Composables を使用すれば同等の処理を行うことも可能ですが、より簡潔に、宣言的に（Page コンポーネントに）記述することが可能になります。 以下、とくに言及がない場合は Route Middleware を指します。 Route Middleware の基本的な使い方 Nuxt 2 までにも存在していた middleware と基本的な使い方は同様です。 Page コンポーネントや Layout コンポ
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
機能開発を止めずに、500コンポーネント規模の Vue 3 移行を完了させた開発プロセス
スタディスト 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2022年上半期、およそ500コンポーネントを持つ Vue 2 プロダクトである Teachme Biz を、半年間に渡る単独作業を経て、 Vue 3 に移行することに成功しました。 本記事では、私達がどのようにして、機能開発は止めずにバージョンアップや破壊的変更への対応を行えたのかを簡単に振り返ろうと思います。 昨年の TypeScript 移行の次のステップとして、今年は Vue 3 移行を実現することにより、相乗効果でのフロントエンド開発体験の向上を実現しました。 モチベーションTeachme Biz をVue 3 に移行するモチベーションは概ね以下になります。 モダンブラウザに合わせてリアーキテクチャリングされた Vue 3 の恩恵を受けることVue 2 への機能追加・改修が 2.7 で終了してしまった
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to use GTM in a Vue 3 TypeScript Single Page Application Part 2 - Managing Events in the dataLayer
VeeValidate 4: How to Disable the Submit Button
Painless Vue Forms with vee-validate by Abdelrahman Awad
28 - Create a Login Form in Vue 3 with Vee-Validate 4
What you should know about Vue v-model - LearnVue | LearnVue
GitHub - mib200/vue-gtm: Simple implementation of Google Tag Manager in Vue.js 2.0
