Global constants ?



  • 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…



  • Sorry should be read as :

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


  • This post is deleted!


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



  • @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…



  • @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>
    


  • 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



  • 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 ?



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



  • 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 😉



  • @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.



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


Log in to reply