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

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>

Answer 2

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 global variables: https://v3.vuejs.org/api/application-config.html#globalproperties

Answer 3

You should import Quasar in main.js

import { useQuasar } from 'Quasar'


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

Answer 4

not exactly global - you have to make it available in every component you want to use it.

define some env options in your quasar.config.js file:

const packageInfo = require('./package.json')

const { configure } = require('quasar/wrappers');

module.exports = configure(function (ctx) {
    return {
        // ....
        build: {
            // ....
            env: {
                // https://forum.quasar-framework.org/topic/6853/auto-generate-a-build-number-in-spa/15?_=1653270667151
                // https://quasar.dev/quasar-cli-webpack/handling-process-env#caveats
                // TEST: "42",
                appinfo: {
                    name: packageInfo.name,
                    version: packageInfo.version,
                    productName: packageInfo.productName,
                    description: packageInfo.description,
                    projectUrl: packageInfo.projectUrl,
                    previewUrl: packageInfo.previewUrl,
                },
            },
        },
        // ....
    }
});

than you need to include something like this in YourComponent.vue file:

<template>
    <q-page
        class="flex column"
        style="align-items: center;"
    >
        <section>
            <h4>{{ appinfo.productName }}</h4>
            <p>
                version: v{{ appinfo.version }}
            </p>
            <p>
                {{ appinfo.description }}<br>
                find the project repository at <br>
                <a
                    target="_blank"
                    :href="appinfo.projectUrl"
                >
                    {{ appinfo.projectUrl }}
                </a>
            </p>
            <p>
                a live preview version is hosted at<br>
                <a
                    target="_blank"
                    :href="appinfo.previewUrl"
                >
                    {{ appinfo.previewUrl }}
                </a>
            </p>
        </section>
    </q-page>
</template>

<script setup>
// https://quasar.dev/quasar-cli-webpack/handling-process-env#caveats
// console.log(process.env.TEST)
const appinfo = process.env.appinfo
</script>

or for the script part the older way:

<script>
export default {
    name: 'AboutPage',
    data () {
        // https://quasar.dev/quasar-cli-webpack/handling-process-env#caveats
        // console.log(process.env.TEST)
        return {
            appinfo: process.env.appinfo,
        }
    }
}
</script>