Vue.jsの記事

Vue.jsからReactへの移行: Composition APIの機能をReactで実装する方法

Vue.jsからReactへの移行を考えていく中で、Vue.jsのComposition APIにおける機能やパターンをReactでどのように再現できるか疑問に思うことが多かったのでまとめていきたいと思います。 Vue. […]

Vue.js2からVue.js3にアップデートするとVueI18nでSyntaxError: Invalid argumentになった

Vue.jsのバージョンを2→3に上げるといくつかの壁にぶち当たります。その中の一つに多言語ライブラリのVueI18nの中の、翻訳API($tおよびt関数)が文字列のみを返すようになったことがあります。これにより、これら […]

Vue.js3xでvue-i18nの$tを拡張する方法

Vue.js は柔軟性が高く、ライブラリの拡張も容易に実現できます。特に、公式のプラグインガイドに従ってプラグインを作成することで、多くのカスタマイズが可能です。しかし、既存の$tをapp.config.globalPr […]

Vue.js 3 Composition APIでオブジェクトのプロパティをリアクティブに追加ができない時

reactive と ref の基本 Vue 3のComposition APIでデータのリアクティビティを実現するためのメソッドにreactiveとrefがあります。これらを使用して作成されたデータはリアクティブになり […]

Laravel x Vue.js x TypeScript x Viteでvite-plugin-checkerを入れて型チェックを行う

Vite環境でのTypeScriptはトランスパイルのみ​を行い型チェックは行いません。基本的にVSCodeの拡張機能を使ってエディタ側で型チェックをしてね!という方針のようです。それでも型チェックをしたい場合は以下の公 […]

@vue/compat環境でvuedraggableのバージョンを上げるとエラーになる

Vue2からVue3へのアップデートを@vue/compatを利用して進めていた際、vuedraggableを使用した箇所で予期せぬエラーが発生しました。 問題の発生 Vue2からVue3にアップデートする際、vuedr […]

@vue/compatを使ってVue2からVue3に移行ビルドしたら画面が真っ白になった(Vite)

Vue.jsの2系が2023年12月31日にサポートが終了するということで公式で提供されている@vue/compatを使用してVue 2からVue 3へ移行作業をしました。 開発環境 Vue.js2.7Laravel 9 […]

Vue + Mittでグローバルでイベントを取得できるようにする

Vue.jsで直接の親子関係がないコンポーネント間でデータのやりとりをしたい時がありました。Vuexでやれよと言われたらそれまでですが、Vuexに頼りたくなかったこともあり、今回Mittというライブラリを使用してグローバ […]

【Vue.js】propsの値を検知してコンポーネントを再レンダリングさせる方法

概要 Vue.jsでは、親コンポーネントから子コンポーネントへデータを渡すためにpropsを使用します。しかし、親コンポーネントでpropsの値が変更されたとき、その変更が子コンポーネントにすぐに反映されない場合がありま […]

Vue I18n で翻訳がある時とない時で処理を変える

vue-i18nを使って多言化に対応する際にen.jsonなど言語毎の辞書ファイルを用意することになるかと思いますが中には翻訳漏れで対応できていない箇所等もあるかと思います。それを画面上で文言等を出力して確認できたらいい […]