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:
    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';

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


    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
    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: [

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

  • @Quasarman cool! were you able to use these flags as part of icon property, e.g. for q-btn-dropdown ?

Log in to reply