Vue 3 Migration Guide
Vue 2 support will end on December 31st, 2023. Learn more about Extended LTS if upgrading to Vue 3 isn't feasible before the EOL date. This guide is primarily for users with prior Vue 2 experience who want to learn about the changes between Vue 2 and Vue 3. This is not something you have to read from top to bottom before trying out Vue 3. The recommended way to learn Vue 3 is by reading the new do
Vue.js
Provide / Inject このページは、すでにコンポーネントの基礎を読んでいることを前提にしています。初めてコンポーネントに触れる方は、まずそちらをお読みください。 props のバケツリレー（Prop Drilling） 通常、親コンポーネントから子コンポーネントにデータを渡す必要がある場合、propsを使用します。ですが、大きなコンポーネントツリーがあり、深くネストされたコンポーネントが遠い祖先のコンポーネントから何かしらを必要とするケースを想像してみてください。props だけを使う場合、親コンポーネントのチェーン全体に同じ props を渡さなければなりません: <Footer> コンポーネントはこれらの props を全く気にしないかもしれませんが、<DeepChild> がそれらにアクセスできるように宣言して渡す必要があることに注意してください。さらに長い親チェーン
Vue.jsエコシステム動向2023
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
【Vue.js 再入門】 v-model を正しく理解して親子間コンポーネントのデータ伝播をマスターする - Qiita
はじめに 本稿は Vue 2.x が対象になります。Vue 3 に関する記事はこちらを参照ください。 Vue.js のコンポーネント間のデータのやりとりについて、親コンポーネントから子コンポーネントへデータを渡すには、v-bind 属性と props オプションを利用します。これにより親コンポーネント側でデータを変更すれば、子コンポーネントの props 経由で渡されたデータも変更されます。しかし、子コンポーネント側で props 経由で渡されたデータを直接変更することは非推奨です。しかし、子コンポーネントの変更を親コンポーネントへ反映したい場合があります。たとえば、再利用性のある入力フォームのコンポーネントを親子間でやりとりするケースです。この問題を解決するには v-model を正しく理解する必要があります。本稿で紹介するコードは CodeSandbox にて共有します。 サンプルコー
2022年の最新標準！Vue 3の新しい開発体験に触れよう - ICS MEDIA
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？ メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」
はじめに Vue.jsは、Webページのユーザーインタフェース（UI）を構築できるフレームワークです。2015年のバージョン1（Vue 1）、2016年のバージョン2（Vue 2）に続き、バージョン3（Vue 3）が開発中で、2020年第2四半期にリリース予定です。 本記事では、全2回にわたって、Vue 3の新機能を紹介していきます。今回は、Vue 3で導入されるコンポーネントの新しい記述形式「Composition API」を説明していきます。 対象読者 Vue 3の概要を把握したい方 新しいライブラリーを試してみたい方 これからVue.jsをプロジェクトに採用する予定の方 必要な環境の準備 本記事のサンプルコードは、以下の環境で動作を確認しています。 Windows 10 64bit版 Node.js v10.18.1 64bit版 Vue.js 3.0.0-beta.15 Vue C
【Vue 3】Composition API の基本
はじめに※ Vue 2の知識があることを前提の記事となっています。 今回の題材である Composition API 導入により、Vueの<script>部分の記述が大きく変わります。 Vue 2からVue 3への変更で一番大きなものは Composition API の導入と言っても過言ではないでしょう。 Composition APIは、Vue 2でも拡張機能として導入することはできましたが、多くのユーザーは基本的な Options API を使用していたはずです。 Options APIでは、オブジェクトプロパティとしてdataやmethodsなどの役割ごとにまとめて記述していました。 <script> export default { data: () => ({ count: 0, }) methods: { increment() { this.count++; }, decr
【Vue 3】Vue 2との違いについて
はじめにNuxtJSをメインに使用していることもあって、執筆時点でも今だにVue 2を使用している筆者ですが、 Nuxt3がRC版になったということでようやく重い腰を上げてVue 3を触っていきたいと思います。 この記事では、Vue 2からVue 3への変更点について、いくつかピックアップして紹介していきます。 参考：はじめに | Vue.js 導入Vue 3の導入（インストール）については公式ドキュメントを参考にしてください。 参考：インストール | Vue.js 導入方法自体は変わらないと思います。 CLIについては、Vue 2と同様に公式のVue CLIが提供されていますが、 Vue 3からはViteというツールも使用できます。 Viteについては割愛しますが、Vue CLIよりもビルドがかなり速いため、快適に開発を進めたい方にはおすすめです。 筆者も簡単にしか試したことがないので、
【vue2 / vue3 】書き方の変更点まとめ(TypeScript) - Qiita
TypeScriptで書く、vue2とvue3の変更点 詳しい説明は割愛した書き方の変更点の備忘録です。 ※他の変更点等もあると思いますが、現時点で自分が使ったもののみを挙げています。 ここにない情報やご指摘などぜひ教えてください！ まずは同じコードのvue2とvue3の比較です。 ↓表示させたい画面はこちら インプットタグに入力した文字をv-modelで表示させるシンプルな挙動です。 クリアボタンを押下すると入力した文字が消えます。 vue2での書き方 <template> <div> <h3>名前を入力してください</h3> <span>名前：</span> <input type="text" v-model="name" /> <br /><br /> <div> 私の名前は「{{ name }}」です。 <button type="button" v-on:click="clea
【Vue.js】ref と reactive どっちを使う？
Vue.js の Composition API が登場してから 1 年少しが経過しており、すでに使いこなしている方もいらっしゃるのではないでしょう？ 私自身お仕事で Composition API を使用しており、従来の Options API と比較して UI とロジックの分解がよりやりやすくなったように思えます。リアクティブなデータをコンポーネントの外で定義できるようになったことで、1 つのコンポーネントにまとめて書かざるをえなかった論理的な関心事に分けてそれぞれ別のファイルで定義できます。 書き心地としては React のカスタムフックに近い感じとなっていますね。 個人的には React がクラスコンポーネントから関数コンポーネント + Hook へ移行したように、Vue.js においても Composition API へ移行する流れが来るのではないかと思います。 さて、そんな
Vue.js Piniaを使って状態管理(データの共有)を行ってみよう | アールエフェクト
Piniaとは PiniaはVue用のState Managementライブラリで複数のコンポーネントでデータを共有するために利用することができます。アプリケーションの中にStoreという場所を準備しその中にコンポーネント間で共有の必要があるデータを保存していきます。またデータを保存するだけではなくデータを更新する機能も備えています。 Piniaによるデータ管理のイメージ Vueプロジェクトの作成 Piniaを利用するためにVueのプロジェクトの作成を行います。本文書ではViteでプロジェクトを作成後にnpmコマンドでpiniaのインストールを行います。 viteではなくnpm create vue@latestコマンドを利用するとプロジェクトの作成と同時にpiniaをインストールすることもできます。 Viteによるインストール npm create viteコマンドを実行してVueのプロ
機能開発を止めずに、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 で終了してしまった
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue3のCompositionAPIの書き方を、もっと簡潔にしてみる[Vue.js]