Vue2のプロジェクトをVue3へマイグレーションする
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 で削除で非推奨になった機能は実行時に警告が出力されるようになります
Vue3の衰退を招いたのは<script setup>とCompositionAPIかもしれない という考察 - Qiita
[6/8 12時頃追記] Vueは死んでないし殺すつもりもないし私はVueが大好きだ、誤解しないでほしい Vue3でOptions APIは消えてないし今後消えていく方向のAPIでもないし挫折した人もこっちつかって再挑戦してほしい [6/8 11時頃追記] 「俺はComposition API使えてるぞ！」「便利じゃん！何をいってるんだこいつは！」 あなたはすごい、でもVueを挫折した人の話を聞くに、Composition APIが「アタリマエでしょ？」の雰囲気の前にうまく馴染めず散っていったという話で、Composition API自体は好きです Vue3の衰退を招いたのは<script setup>かもしれないCompositionAPIという考察 ほとんど肌感であり、根拠のない妄言だと思ってもらって構わないのだが、Vue3のリリース以降Vueが流行から離れつつあり、その原因は<scr
既存のVue.jsプロジェクトをVue 3へ移行したときに必要だった修正まとめ - Qiita
はじめに この記事では、「既存プロジェクトをとにかくVue3へ移行して元通り動くようにする」が目的です。 「Composition APIで書き換える」といったVue 3の新機能への移行を紹介するものではありません。 公式のマイグレーションガイドはこちら: https://v3.vuejs.org/guide/migration/introduction.html#quickstart 執筆時点ではVue3.0.0ですが、ここに書く問題は以降のバージョンで解決している可能性もあります。 もしお気づきの際はコメントいただけると幸いです。 雑感、設定やプラグイン周りで新しい仕様に合わせなければいけないところがありますが、コンポーネント資材は大部分がそのまま動作すると思います。 1日2日もあればとりあえず動作するところまでは持っていけるかと思います。 追記 2020/09/26: ドキュメントか
既存のVue.jsプラグインがVue 3で使えない場合の対応 - Qiita
いくつかのパターンをまとめましたが、簡単な修正だけで直るケースも多いです。 ただし、基本的にはプラグイン側の修正が必要なので、ここではその修正箇所をまとめています。 目次: ケース1: this.$xxx() 系のプラグインで起きる問題 Composition APIで使う ケース2: <div v-xxx>系のプラグインで起きる問題 ケース3: コンポーネント系プラグインで起きる問題 補足1: Vue.jsとVue 3両方に対応させる 補足2: プラグインの修正ってどうやるの？ ケース1: this.$xxx() 系のプラグインで起きる問題 Vueインスタンスメソッドに機能が拡張されるタイプのプラグインで起きるのは、 プラグインのインストール時、Vueのprototypeの拡張に失敗しているという事象です。 Uncaught TypeError: Object.definePropert
Vue Pinia の基本的な使い方
Vue の基本的な使い方 (5) Pinia を使って状態管理 Pinia を利用すると、複雑な Vue 3 の状態管理（コンポーネント間のデータの受け渡しやデータの共有など）が簡単に行なえます。以下は Pinia の基本的な使い方についての解説のような覚書です。 関連ページ Vue の基本的な使い方 (1) Options API Vue の基本的な使い方 (2) Composition API Vue の基本的な使い方 (3) Vite と SFC 単一ファイルコンポーネント Vue の基本的な使い方 (4) Vue Router ルーティング Vue の基本的な使い方 (6) Vue3 で簡単な To-Do アプリを色々な方法で作成 Vue の基本的な使い方 (7) Vue Router と Pinia を使った簡単なアプリの作成 Pinia とは Pinia とは、Vue で扱うグ
Vue.js の状態管理ライブラリ Pinia の使い方まとめ
この記事は公式チュートリアルの内容、開発中に実際に困ったポイント、その解決方法などを中心にしつつ自分へのメモを主目的としてまとめていくものです。随時追記していきます。 ちなみにもう僕は Pinia 最高派です 🍍 Vuex と Pinia 2021 年終盤、これまで Vue 公式で推奨されていた状態管理ライブラリが Vuex から Pinia に変わりました。 例えば Vetur -> Volar は当時でも言われて久しい感じでしたけれど、Vuex に対する Pinia という名前はだいぶぽっと出だったので混乱した人も多いと思われます。 これまで Vue 3 に対して公式にサポートされていた状態管理ライブラリは Vuex 4 というものですが、これの次世代バージョン、つまり Vuex 5 の検討内容が Pinia の根底にあるものです。 …というのは実はやや語弊があり、実際には「新しい状
Vue2系からVue3系に移行しました〜！ - Link and Motivation Developers' Blog
こんにちは！リンクアンドモチベーションでフロントエンドの開発をしています。岡田（@okadaike）です。 本日は弊社プロダクトのストレッチクラウドのVueのversionを2系から3系にmigrationしたので、そのご報告になります！！ 今回はプロダクトチームの中で色々と試行錯誤して進めました！ストレッチクラウドはSPAが3つあるような構成になっており、今回はそのうちの一つを移行しました！。 最後に残りの２つの移行計画もまとめようと思います！ Vue2は2023年末にEOLを迎えるのでこれからどんどん移行していくことになると思いますが誰かの役にたてればなと思います！ ※余談ですが先日Vue.js v-tokyo meetup#16に参加してきました。その中で世界のアクティブVueユーザーの内6~7割はVue2を利用していると伺いました。 今年のこれからはVueのmigration祭りに
script setupでbeforeRouteEnter - vue3, composition api - jabelic-public
const { data } = useFetch(/your/url/${to.params.your_route_params})
Vue2 + pinia
vue2でもcomposition apiを入れていればpiniaを使えるということで、 早速実装してみました。 追記）composition apiを入れてなくても使えるようになっているみたいです。 公式のしたがってインストールから実装までやっていきたいと思います。 (typescriptにも対応していますが、この記事ではjavascriptを例に書いています） Step 1 インストール import Vue from "vue" import App from "./App.vue" import router from "./router" import VueCompositionApi from "@vue/composition-api" import vuetify from "./plugins/vuetify" import { createPinia, PiniaVu
【Vue.js】Composition APIを使用した共通関数の作り方 - プログラマーノート
はじめに mixisは共通関数としてどうなのか vue.jsで共通関数をどう作るか 共通関数のメリット Composition APIで使用可能 オブジェクト指向的に考えられる どこから呼び出したのか分かりやすくなる まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 本日は、vue3より正式導入された、Composition APIを使用した共通関数の作り方についてまとめたいと思います。 Composition APIを共通化する際に、参考としてください。 mixisは共通関数としてどうなのか vue.jsには、mixinsという機能がありますが、mixinsには以下のデメリットがあります。 Options APIで動く想定なのでComposition APIでは使いにくい。 オブジェクト指向的に考えると複数のインスタンスを持てない。 グローバル定義した場合、どこで
Vue3時代にviteでvue2をビルドする
もうSvelteでええやｎ ------------------- ↓ 前書きはここから ↓------------------- Svelteを使うようになってから、 すっかりご無沙汰のvue。 vue3の考え方にあまり賛同できず、 世間もReact一色になりつつある vue2が急に必要になったので、 じゃあ、ビルドを整理するかと思ったら、 気がついたらvueのバージョン3がstableになっていて、 世の中全部がvue3になっていた。 そこでvue3の時代にvue2をビルドする方法を残しておく。 ビルドツールはvite。 rollupとesbuildベースのの高速ビルドツールでvue公式がサポートしている。 ヾ(・ω<)ﾉ" 三三三● ⅱⅲ コロコロ♪ ------------------- ↓ 本題はここから ↓------------------- プロジェクト作成 この手のビルド
Vue2からVue3への変化と慣れていくためのTips
モチベーション Vue2系サポート終了(23年末予定)を踏まえて、今後はVue3に触れる機会が増えそう 現在Vue2を使っているけどVue3へリファクタする予定があり、慣れていく必要が出てきた 記事の内容 Vue3を取り巻く環境とかエコシステムなど整理 Vue3に慣れる為に知っておくべきことを整理 移行に伴う破壊的変更の内容などは記載してない ある程度Vue2を触った事があるのを前提で書いてる部分が多いです なぜVue3に慣れる必要があるのか 1. Vue2のサポート終了 Vueの公式によるとVue2系が2023年の末に終了されることが告知されています。 Vue2系は2022年6月にリリースされた2.7系が最後で、今後は新しい機能などは追加されず、セキュリティ対応など最低限のアップデートのみの対応となります。 それに伴ってVue2からVue3へリファクタ等の対応する必要があります。 2.
vue-cliをviteに移行する
viteとは一言で言うとめちゃくちゃ早いビルドツールです。 ビルドを超高速化することで開発時の生産性を大幅に向上させてくれます。 vite自体についての詳しい説明は本家を見ていただくとして、この記事ではvue-cliで開発しているプロジェクトをviteに移行する方法についてご紹介します。 実際どのくらい早くなるのかが気になるかと思うので、自分のプロジェクトで体感どのくらい早くなったかをご紹介します。 ちょっとわかりにくいですが、3秒くらい待ってたのが0.5秒くらいになっています。 導入前 導入後 スムーズにいけば1時間程度で導入でき、開発者全員が1日数百回ビルドすることを考えるとやって損はないと思います。(何よりビルドが早いと開発が楽しくなりますしね😆) では行ってみましょう！ バージョン情報 Vue 3.2.20(※Vue2でも基本的に同じ方法で移行できますが検証は行っていません🙏)
Vue Fes Japan Online 2022
Vue Fes Japan では、より Vue.js を楽しんでいただくための企画を多数ご用意しています。セッションの合間にぜひご参加ください。 みなさんからの質問に、Evan You がライブで答えてくれる Q&A コーナーです。もちろん日本語で質問OK。事前、もしくは当日にハッシュタグ #vuefes_qa をつけて質問をツイートしてください。 ※時間の都合上、すべての質問にはお答えできませんので、あらかじめご了承ください。 Vue.js をはじめ、多くの OSS は利用者からのフィードバックやコントリビューションによって成り立っています。しかし、協力の意思はあっても、実際どのように参加していけばいいのかわからない方も多いのではないでしょうか？ このセッションでは、実際に Vue.js 日本ユーザーグループにて OSS 開発に参加・協力しているメンバーが、バグ報告やパッチ提供、OSS
大規模アプリのVue3アップデート対応知見まとめ
はじめに 今参加させてもらっている案件でついにVue3へのアップデートが完了したので、知見をまとめていきます！ 僕1人だけではなく、チームでやったので多少曖昧なところもありますが、そこはご愛嬌でお願いします。 マジで一年くらいかかりました。笑 ちなみにこれを全てやれば完璧にVue3対応出来るわけではなく、あくまでこのプロジェクトで躓いた知見を書いているだけでですので、実際に上げる場合はしっかりと公式ドキュメントを確認してください。 特に移行ビルド系は執筆時点で確認していたら、かなりリリースされていたので是非確認してみてください。 前提 新規機能の開発は止めない Options APIからComposition APIへの書き換えなどはしない 特にいつまでにアップデートなどの期限は設けない マイグレーションビルドは使わない webpackerをつかっている TypeScriptは使っていない
LINE MUSIC のパフォーマンスを向上させた Vue3 マイグレーション
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINEの京都開発室でフロントエンド開発を担当している柴坂浩行です。 みなさんは仕事中などにパソコンで音楽を聴くことはありますか？ LINE MUSIC にはスマホアプリだけではなくWeb版アプリがあります。 私たちが開発しているWeb版アプリでは、JSフレームワークとして Vue.js を使用しています。 https://music.line.me/webapp/ これまでこのWeb版アプリには Vue2 が使われてきましたが、 2022年6月、私たちは Vue3 にアップグレードしたバージョンをリリースしました。 私たちのチームではWeb版アプリの機能開発と平行して、パフォーマンスの改善にも取り組んでいます。パ
機能開発を止めずに、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ページを開く
Vue3でBootstrapとBootstrap Iconを利用する
【nuxt】vue-slickでカルーセルスライダーを実装する2 | aktmm-dev
【nuxt】vue-slickでカルーセルスライダーを実装する | aktmm-dev