VUE3+Quasar：グローバルな定数

VUE.js というか Quasar を使ってwebアプリを作ってるんだけど、グローバルにアクセスできる定数がほしい。典型的にはサイトのタイトルとか、バックエンドの API の URL とかだ。

↓ここが参考になった。

• What is the best way to access Quasar (or Vue 3) app name variable? | stackoverflow

Quasar にはグローバルプロパティ（globalProperties）と、ブートファイル（boot files）という仕組みがあって、これを使えばいいようだ。

まず、quasar コマンドでブートファイルを作る。

$ quasar new boot ezglobals

ここで ezglobals はブートファイルの名前だ。これで src/boot/ezglobals.js ファイルが作られる。こんな感じ。

import { defineBoot } from '#q-app/wrappers'

// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli-vite/boot-files
export default defineBoot(async (/* { app, router, ... } */) => {
  // something to do
})

これを次のように書き換えた。app.config.globalProperties に変数メンバーを追加することで、グローバルな定数として使えるようになる。ここでは3つ追加した。

import { defineBoot } from '#q-app/wrappers'

// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli-vite/boot-files
export default defineBoot(async ({ app }) => {
  app.config.globalProperties.$SITE_NAME = process.env.VUE_APP_SITE_NAME
  app.config.globalProperties.$PROJECT_NAME = 'Bruschetta'
  app.config.globalProperties.$PROJECT_VERSION = 'develop'
})

これで、各コンポーネントのテンプレートから参照できるようになった。

ちなみに、process.env.VUE_APP_SITE_NAME は環境変数 VUE_APP_SITE_NAME を参照している。

単一コンポーネントファイルのテンプレートからの参照は、単に $SITE_NAME、$PROJECT_NAME、$PROJECT_VERSION として参照できる。下の例では3つをマスタッシュの中で参照している。

<template>
  <q-layout view="hHh lpR fFf">
    <q-header bordered>
      <div class="bg-teal-9 q-px-xl q-py-sm">
        <q-toolbar>
          <q-toolbar-title class="text-center"> {{ $APP_NAME }} </q-toolbar-title>
        </q-toolbar>
      </div>
      <div>
        <q-tabs class="bg-white text-teal-9 q-px-xl q-py-sm">
          <q-route-tab flat label="Books" to="/"></q-route-tab>
          <q-route-tab flat label="Categories" to="/categories"></q-route-tab>
          <q-route-tab flat label="Formats" to="/formats"></q-route-tab>
          <q-route-tab flat label="Bookshelves" to="/bookshelves"></q-route-tab>
        </q-tabs>
      </div>
    </q-header>

    <q-page-container>
      <router-view />
    </q-page-container>

    <q-footer bordered class="bg-teal text-white q-px-xl q-py-sm text-center">
      <q-toolbar>
        <q-space></q-space>
        <text-subtitle2 class="q-px-sm">{{ $PROJECT_NAME }}</text-subtitle2>
        <q-badge class="bg-white text-teal q-px-sm">{{ $PROJECT_VERSION }}</q-badge>
        <q-space></q-space>
      </q-toolbar>
    </q-footer>
  </q-layout>
</template>

一方、スクリプトの中で使いたい定数（API の URL）はこの方法では使えなかった。

じゃあどうするかというと、公式ドキュメントに書いてあった。つまり、単に定数を定義してエクスポートすればいい。こうだ。

const apiRoot = process.env.VUE_APP_API_ROOT

export { apiRoot }

参照する側では、インポートして使う。

import { ref } from 'vue'
import { apiRoot } from 'boot/ezglobals'

const books = ref([])

const getBooks = async () => {
  const params = new URLSearchParams()
  params.append('reverse', 'true')
  const url = `${apiRoot}/books?${params}`
  await fetch(url)
    .then((response) => response.json())
    .then((result) => (books.value = result.books))
}

'boot/ezglobals' というパスでちゃんとブートファイルを参照してくれる。

というわけで目標は達成できた。

それにしても、Quasar のドキュメントは Options API で書かれてて、Composition API に置き換えるのに苦労した。