Integrating thrid party component



  • Hello I am new to quasar and vue so bear with me if I have overlooked something.
    I found this really nice component for displaying country flags and I am struggeling to import this into quasar.

    The component I am talking about is called vue flags: https://www.growthbunker.dev/vueflags/
    I followed the instructions given on that page by first installing the plugin using npm and then importing it via the main.js file (in my case making a main.js boot file in quasar with the following content):

    import Vue from 'vue';
    import VueFlags from '@growthbunker/vueflags';
    
    Vue.use(VueFlags);
    

    The documentation further states that I should now be able to use the comonent like:

    <gb-flags
        code="fr"
        size="small"
      />
    

    But this dosen’t seem to work within quasar.

    I have already contacted the author of vue flags but sadly they have never worked with quasar and therefore cannot help me.

    Any advice on what I am doing wrong?



  • @Quasarman

    1. Tag should be gb-flag not gb-flags
    2. Library seems not to register gb-flags component
      https://github.com/growthbunker/vueflags/blob/master/src/entry.js
    3. Although gb-flag tag worked for me the corresponding image did not resolve.
    4. Btw (I think) you can register plugins simply with a direct reference in boot part of quasar.conf.js; e.g.
    boot: [
        ...
        '~@growthbunker/vueflags'
    ]


  • Thank you for the tip! It works now i just had to specify the path on where the .svg images for the flags are located like shown below:

    Vue.use(VueFlags, {
      // Specify the path of the folder where the flags are stored.
      iconPath: '/images/vueflags/flags/',
    });
    

    Furthermore the flags can be downloaded from their repository described at their page (link in the first comment).


Log in to reply