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

How do I implement something like this in Quasar without redefining the varible 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.

CodePudding user response：

There are a few ways how you could do it.

The name you specified during project creation using Quasar CLI is stored in your package.json file ("name"). You can access package.json vars like that:

process.env.npm_package_name

Here is a link with more info about it: https://docs.npmjs.com/cli/v6/using-npm/scripts#packagejson-vars

To make this globally available you can create a boot file specifying a global variable.

Here you can read more on how to create and use boot files (boot is a folder in your project created by quasar cli)

https://quasar.dev/quasar-cli/boot-files

Here you can find more info to define globar variables

https://v3.vuejs.org/api/application-config.html#globalproperties

CodePudding user response：

You should import Quasar in main.js

import { useQuasar } from 'Quasar'


createApp(App).use(Quasar, { config: {} }).mount('#app')

CodePudding user response：

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>