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

Question

How do I implement something like this in Quasar without redefining the variable in each component:

<template>
    <div>Welcome to {{ APP_NAME }}.</div>
</template>

My app was setup using Quasar CLI which asked for an app name during setup, so I imagine that is stored somewhere as a global variable or something I can access.

Failing that, maybe Vue 3 has a way of doing this.

Answer 1

Quasar doesn't use a main.js file explicitly. Most of the suggested answers won't work when creating a project using quasar cli. Using quasar.config.js might work but it's still not exactly the right place to do it.

Since you used the quasar cli you need to add a boot file with quasar new boot.

This will generate the file ezglobals.js in your src/boot folder: quasar new boot ezglobals

Your code in your ezglobals.js file will look something like this after editing:

import { boot } from 'quasar/wrappers'
export default boot(({ app }) => {
  app.config.globalProperties.$APP_NAME = 'The name of your app';
})

Finally in quasar.config.js add ezglobals.js to the boot array:

...
boot: [
      'ezglobals.js'
    ]
...

Answer 2

Yo can create global variable in Vue 3:

const globalVariable = 'app name'
app.config.globalProperties.$appName = globalVariable

and then show it in any template like:

<template>
 <div>Welcome to {{ $appName }}.</div>
</template>