2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Quasar.js の main.js がない時

Posted at

グローバルに登録

なにかのライブラリの機能をグローバルに登録したい場合、Vue.jsの場合は
main.jsapp.use() で追加するのが普通ですが、

Quasar.js のプロジェクトには main.js が存在しない(時がある)。

どこに?

どこに書いてあるのかと言えば、
boot ディレクトリに書いてあります。
Quasar は boot ディレクトリの記述から、
main.js を作るようです。

例えば、boot に書くとラクになる例

大量の app.use() をいろんな条件で出す時に、

main.js が役割とか別になく、
とりあえず全部突っ込む場所になってる時には有効です。

これくらいになると import がぐちゃぐちゃになるので、

main.js
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 を作れば

boot/i18n.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.jsapp.use() しましょう。
という回答がでて、困るときがあるので、

vue.js ではなく、Quasar.js を使っていますと
明記した方が、正しい回答が帰りやすいかもしれません。

Jest と組み合わせが大変

なので boot に分割しておくと、メンテナンス性が上がるんですが、
Quasar.js でテストコードを書く時、boot と Jest との組み合わせは
相性があまり良くないです。Jest が boot を読み込んでくれないです。

そういう場合どうするか

というと、boot を使わずに書き直して、plugins などに別のファイルに保存しておきます。
Jest の設定の test/setup.js でテスト用のグローバルに登録します。

test/setup.js
import { i18n } from '@/plugins/i18n'
config.global.plugins = [i18n]

Quasar.js と Jest の相性が全然わるくて困る時は
まず boot をリファクタリングして下さい。ということです。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?