TL;DR ES6 modules(import/export)が優秀なのでこれで良いと思う。むりに難しくする必要はない。 Vue3 からはcomposition apiを使えるけどこれもES6 modulesベースで使っていくことになる。ReactのContext的なことがしたいならinject/provideを使おう。 自分は今までいろいろな理由でvueのmixinsを避けてたけど、最近転職して強制的に目の当たりにしたため改めてmixinsの何が自分にとって辛いものなのかを書いてみようと思った。ちなみにすでに社のslackでお気持ち表明済みで、いい反応をもらったことだしなんとかしていこうとなっている（なっただけ）。 thisがmixinの中にいる mixinsはプロパティオプションをコンポーネント間で使い回す（マージする）ためにオプション丸ごと外部定義する機能だが、普通に運用していれば

vue3が本格的に使われるようになってくるとvue2系では影が薄かったprovideとinjectも流行ってくると思います。（願望） こいつらがいい感じに型で補強してあげるとより使いやすくなるので紹介します。 provide/injectって何 そもそもこいつらが何かという話ですが、簡単に言えば親のインスタンスにkey:valueを保持しておいてどのコンポーネントからでも取り出せるようにする関数です。 以下のように、provideで登録したkeyとvalueをinjectで簡単に利用することができます。valueは登録時にリアクティブにしておけば、取り出した側での変更を追跡します。 main.ts import { createApp, ref } from 'vue' import App from './App.vue' const key = 'count' // 一意なキーを生成す

ストアの型はサボった。 github.com Vue3からinjectとprovideという関数が提供されており、（機能的にはVue2のものと同じだが）コンポネ間の状態共有が簡単にできるようになった。 ドキュメント https://composition-api.vuejs.org/api.html#dependency-injection 簡単に言うと、provideにキー付きで渡したリアクティブな状態をinjectで取り出すことでどこからでも状態を参照できるようになるもの。 provideとinjectはsetupでのみ動作する。 例えば状態を共有したいコンポーネント2つがあった時、それ用のスコープでディレクトリを切って専用のストアを作ることが可能。 Symbolを使って一意のキーを生成し、リアクティブにしたい状態や関数をセットでprovideに渡す。 components/miniS

やった github.com 本当はviteで作る超速モノレポ環境！！をやりたかったが、やっていくうちに一番大事なところが微妙になったので調査の知見を残すことにした（なった） viteとは github.com そもそもviteがなにかというと、今までバンドル作ってそれをwatchしてたけどなんらかの手段でHMRが実現できたら開発時はバンドルせんでもよくね？という発想から生まれた、バンドルを作らない開発サーバである。（alt VuePressであるVitePressがやりたかっただけ説もあるけど） 仕組みとしては、ブラウザが解釈できる形になんらかの方法でファイルを加工（tsxならtsc、sfcなら@vue/compiler-sfc）してESM形式で読み込ませることでバンドルを作らずにブラウザに即時反映している（と理解している）。 バンドルを作らないためwebpackのhmrの比ではないほど