Vue.jsの記事

Laravel x Vue 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など言語毎の辞書ファイルを用意することになるかと思いますが中には翻訳漏れで対応できていない箇所等もあるかと思います。それを画面上で文言等を出力して確認できたらいい […]

【Vue2系】computedで引数を渡す

Vue2系では通常、computedに引数を渡すことができません。 それを忘れて上記のように引数を書いてしまうと以下のようなエラーが出ます。 computedで引数を渡す方法 computedの処理の中に関数を書くことと […]

【Laravel9系】 Laravel Sail Viteを使ってVue.js3系の開発環境を用意する。

Laravel9系でViteが公式プラグインとして使えるようになったということでVue.js3系の環境をサクッと構築したいと思います。 環境 Laravel 9x Vue.js 3x Vite 3x Laravelをイン […]

Vue3 Timepickerでv-modelがバインドされない

Vue.js3系でTimepickerを使う場面がありvue3-timepickerをインストールして使ってみたのですが、うまくv-modelが反映されず躓いたので備忘録を残しておきます。 vue3-timepicker […]

サーバーから取得してきたデータがVue.jsのチェックボックスに反映されない時

Laravelからboolean型のデータを取得してVue.jsで作成したチェックボックスにon,offを反映させたい時にうまくチェックが入らないことがありました。原因について備忘録を残しておきます。 原因 Larave […]