グローバルに登録
なにかのライブラリの機能をグローバルに登録したい場合、Vue.jsの場合は
main.js
に app.use()
で追加するのが普通ですが、
Quasar.js のプロジェクトには main.js が存在しない(時がある)。
どこに?
どこに書いてあるのかと言えば、
boot ディレクトリに書いてあります。
Quasar は boot ディレクトリの記述から、
main.js を作るようです。
例えば、boot に書くとラクになる例
大量の app.use()
をいろんな条件で出す時に、
main.js が役割とか別になく、
とりあえず全部突っ込む場所になってる時には有効です。
これくらいになると import がぐちゃぐちゃになるので、
app.use(router)
app.use(pinia)
app.use(i18n)
app.use(axios)
app.use(auth)
app.use(charts)
app.use(toast)
app.use(logger)
app.use(env)
app.use(socket)
app.use(vuetify)
app.use(formKit)
app.use(queryClient)
app.use(featureFlags)
app.use(errorHandler)
↓ boot/xxx.js を作れば
import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'
const i18n = createI18n({ /* ... */ })
export default boot(({ app }) => {
app.use(i18n)
})
export { i18n }
いろんな記述を、役割ごとに個別に書くことができます。
AIにコードを書かせる時プロンプトから
自動的に Vue.js だと判断して回答をくれることが多いですが、
main.js
に app.use()
しましょう。
という回答がでて、困るときがあるので、
vue.js
ではなく、Quasar.js
を使っていますと
明記した方が、正しい回答が帰りやすいかもしれません。
Jest と組み合わせが大変
なので boot に分割しておくと、メンテナンス性が上がるんですが、
Quasar.js でテストコードを書く時、boot と Jest との組み合わせは
相性があまり良くないです。Jest が boot を読み込んでくれないです。
そういう場合どうするか
というと、boot を使わずに書き直して、plugins
などに別のファイルに保存しておきます。
Jest の設定の test/setup.js
でテスト用のグローバルに登録します。
import { i18n } from '@/plugins/i18n'
config.global.plugins = [i18n]
Quasar.js と Jest の相性が全然わるくて困る時は
まず boot をリファクタリングして下さい。ということです。