Global constants ?

Incremental

Hello,
I’ve set global constants in a Constantes.js :

const Constantes = {
   // Serveur
   APP_VERSION: "0.1",
   SERVER_URL: "http://meteo.test",
   SERVER_MEDIA: "http://meteo.test/storage/app/media",
   //SERVER_URL: "http://192.168.0.3",
   //SERVER_MEDIA: "http://192.168.0.3/storage/app/media"

   // IHM
   button_color: "red"
};
Constantes.install = function (Vue) {
   Vue.prototype.$getConst = key => {
      return Constantes[key];
   };
};

export default Constantes;

I use it successfully in my axios store :

import Constantes from "../plugins/Constantes.js";

   this.$axios
      .post(Constantes.SERVER_URL + "/api/auth/login", user.data)

Now I’d like to use such constants in my vue components
For example to color a button.
Is it possible to have something like :

        <q-btn
          to="/"
          :color="Constantes.theme_color"
          icon="fas fa-home"
        ></q-btn>

but Constantes are not recognized…

Incremental

Sorry should be read as :

        <q-btn
          to="/"
          :color="Constantes.button_color"
          icon="fas fa-home"
        ></q-btn>

turigeza

This post is deleted!

metalsadman

@Incremental you have a registered prototype, so use that in the template, $getConst(...).

Incremental

@metalsadman
Thanks for your answer, I tried

        <q-btn
          to="/"
          push
          :color="$getConst('Constantes.button_color')"
          icon="fas fa-home"
          glossy
        ></q-btn>
</template>

<script>
import Constantes from "../plugins/Constantes.js";

but it doesn’t work…

beets

@Incremental I would convert your plugins/Constantes.js to a boot file in src/boot/Constantes.js

const Constantes = {
   // Serveur
   APP_VERSION: "0.1",
   SERVER_URL: "http://meteo.test",
   SERVER_MEDIA: "http://meteo.test/storage/app/media",
   //SERVER_URL: "http://192.168.0.3",
   //SERVER_MEDIA: "http://192.168.0.3/storage/app/media"

   // IHM
   button_color: "red"
};
export default async ({ Vue }) => {
  Vue.prototype.$Constantes = Constantes
}
export { Constantes }

Add in quasar.conf.js:

boot: [
  'Constantes'
]

Then in your axios store, you use it like this instead:

import { Constantes } from "boot/Constantes.js";

And finally in a template:

        <q-btn
          to="/"
          :color="$Constantes.button_color"
          icon="fas fa-home"
        ></q-btn>

turigeza

I was so wrong above I just deleted my answer : ) Sorry. And now @beets already posted a better one : )
https://codepen.io/turigeza/pen/MWjgwQp?editors=101

Incremental

Thanks a lot all of you !!!
I love this framework and this kind community ;-))
@beets : all works fine.

Maybe this could be anuseful item in the Quasar doc site ?

metalsadman

@Incremental usage of boot file is well documented in docs.

Incremental

In complement, is it possible to concatenate a string and a string constant in the template ?

  <q-footer elevated>
    <q-toolbar
      :class="flex flex-center " + "$constantes.footer_bkg_color"
    >

Or should I have a :

 computed: { }

for setting the concatenation in a variable to use in the template ?
Thanks for your tricks

metalsadman

@Incremental said in Global constants ?:

:class="flex flex-center " + “$constantes.footer_bkg_color”

like this :class="'flex flex-center ' + $constantes.footer_bkg_color" or yes better use computed prop.

Incremental

Thanks a lot, I was not using the quotes correctly.
Have a good day !

No More Posting New Topics!

Global constants ?