Integrating thrid party component

[Quasarman]

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?

[rab]

@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'
]

[Quasarman]

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

[tlloyduk]

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

[pazarbasifatih]

@Quasarman I want to use the same library, but I couldn’t find where to put the code below. Is registering component in Quasar somewhat problematic like this?

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

[metalsadman]

@pazarbasifatih not problematic at all, you initiate it in a boot file https://quasar.dev/quasar-cli/boot-files#Introduction.

[tlloyduk]

@pazarbasifatih This is what I did…

Installed the @growthbunker/vueflags package

quasar new boot flags - created a new boot file:

import Vue from 'vue'
import VueFlags from '@growthbunker/vueflags'

Vue.use(VueFlags, {
  iconPath: '/flags'
})

Make sure you add the boot file to quasar.conf.js boot array.

Created a new folder in /public called flags (created public if it doesn’t already exist, same level as src)

From the Vueflags web site, downloaded the flags I wanted e.g gb.svg, es.svg, fr.svg and put them in public/flags

You can then use <gb-flag code="es" size="mini" /> in your components. I wrapped it up into a Language Switcher component, e.g:

which uses this.$i18n.local to determine what flag to display in the q-btn-dropdown label slot.

[pazarbasifatih]

@metalsadman I tried creating a boot file manualy at first because this library’s name starts with @growthbunker/vueflags VScode created a folder with @growthbunker and vueflags.js file. And Adding the code above didn’t work. Now that I’ve read the whole thing about quasar new boot <name> I’ll try it next time when I need to plugin a library. Thank you very much.

@tlloyduk
I found vue-country-flag package and added the library to the boot array in the config
because I didn’t know how to create a new boot file a few hours ago.
Importing the library to the component that I was going to use simply worked. Thank you for your reply. It certainly gave me clues about how I can import libraries.

I’ve been working on this one since yesterday. It’ll be complete today I hope. @metalsadman Thanks again for helping me with the q-select.

[clwehunt]

@pazarbasifatih I am working on the same issue, would you mind sharing a bit more on how you got this to work in the select ? Did you use the data file from the component to generate your options ?

Thanks in Advance

[pazarbasifatih]

Sure thing. I would share the code on codepen or codesandbox if I knew how to set up the whole quasar framework there but let me share with you what I have.
You can collapse the data section.
First npm install or yarn add vue-country-flag, it’s imported in the component below. Copy Paste and you’re good to go.

<template>
  <div id="q-app">
    <div class="q-pa-md">
      <div class="q-gutter-md row">
        <q-select
          filled
          v-model="model"
          use-input
          input-debounce="0"
          language="Simple filter"
          :options="options"
          @filter="filterFn"
          style="width: 250px"
          multiple
          use-chips
          ref="select"
          @input="$refs.select.updateInputValue('')"
          dense
        >
          <template v-slot:option="scope">
            <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
              <q-item-section>
                <q-item-label v-html="scope.opt.label"></q-item-label>
                <q-item-label caption>{{ scope.opt.country }}</q-item-label>
              </q-item-section>
              <q-item-section avatar>
                <country-flag
                  class="rounded"
                  :country="scope.opt.flag"
                  size="normal"
                />
              
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
    </div>
  </div>
</template>

<script>
import CountryFlag from "vue-country-flag";
const stringOptions = [
  { label: "Afrikaans", value: "af", country: "South Africa", flag: "za" },
  { label: "Albanian", value: "sq", country: "Albania", flag: "al" },
  { label: "Amharic", value: "am", country: "Ethiopia", flag: "et" },
  { label: "Arabic",value: "ar-ae",country: "United Arab Emirates",flag: "ae"},
  { label: "Arabic", value: "ar-bh", country: "Bahrain", flag: "bh" },
  { label: "Arabic", value: "ar-dz", country: "Algeria", flag: "dz" },
  { label: "Arabic", value: "ar-eg", country: "Egypt", flag: "eg" },
  { label: "Arabic", value: "ar-iq", country: "Iraq", flag: "iq" },
  { label: "Arabic", value: "ar-jo", country: "Jordan", flag: "jo" },
  { label: "Arabic", value: "ar-kw", country: "Kuwait", flag: "kw" },
  { label: "Arabic", value: "ar-lb", country: "Lebanon", flag: "lb" },
  { label: "Arabic", value: "ar-ly", country: "Libya", flag: "ly" },
  { label: "Arabic", value: "ar-ma", country: "Morocco", flag: "ma" },
  { label: "Arabic", value: "ar-mr", country: "Mauritania", flag: "mr" },
  { label: "Arabic", value: "ar-om", country: "Oman", flag: "om" },
  {label: "Arabic",value: "ar-ps",country: "Palestine, State of",flag: "ps"},
  { label: "Arabic", value: "ar-qa", country: "Qatar", flag: "qa" },
  { label: "Arabic", value: "ar-sa", country: "Saudi Arabia", flag: "sa" },
  { label: "Arabic", value: "ar-sd", country: "Sudan", flag: "sd" },
  { label: "Arabic", value: "ar-so", country: "Somalia", flag: "so" },
  {label: "Arabic",value: "ar-sy",country: "Syrian Arab Republic",flag: "sy"},
  { label: "Arabic", value: "ar-tn", country: "Tunisia", flag: "tn" },
  { label: "Arabic", value: "ar-ye", country: "Yemen", flag: "ye" },
  { label: "Armenian", value: "hy", country: "Armenia", flag: "am" },
  {label: "Azerbaijani",value: "az-az",country: "Azerbaijan",flag: "az"},
  { label: "Belarusian", value: "be", country: "Belarus", flag: "by" },
  { label: "Bengali", value: "bn", country: "Bangladesh", flag: "bd" },
  { label: "Bislama", value: "bi", country: "Vanuatu", flag: "vu" },
  {label: "Bosnian",value: "bs",country: "Bosnia and Herzegovina",flag: "ba"},
  { label: "Bulgarian", value: "bg", country: "Bulgaria", flag: "bg" },
  { label: "Burmese", value: "my", country: "Myanmar", flag: "mm" },
  { label: "Catalan", value: "ca", country: "Andorra", flag: "ad" },
  { label: "Chichewa", value: "ny", country: "Malawi", flag: "mw" },
  { label: "Chinese Mandarin", value: "zh", country: "China", flag: "cn" },
  {label: "Chinese Mandarin",value: "zh-tw",country: "Taiwan, Province of China",flag: "tw"},
  { label: "Croatian", value: "hr", country: "Croatia", flag: "hr" },
  { label: "Czech", value: "cs", country: "Czechia", flag: "cz" },
  { label: "Danish", value: "da", country: "Denmark", flag: "dk" },
  { label: "Dhivehi", value: "dv", country: "Maldives", flag: "mv" },
  { label: "Dutch", value: "nl-be", country: "Belgium", flag: "be" },
  { label: "Dutch", value: "nl-nl", country: "Netherlands", flag: "nl" },
  { label: "Dutch", value: "nl-sr", country: "Suriname", flag: "sr" },
  { label: "Dzongkha", value: "dz", country: "Bhutan", flag: "bt" },
  {label: "English",value: "en-ag",country: "Antigua and Barbuda",flag: "ag"},
  { label: "English", value: "en-au", country: "Australia", flag: "au" },
  { label: "English", value: "en-bb", country: "Barbados", flag: "bb" },
  { label: "English", value: "en-bs", country: "Bahamas", flag: "bs" },
  { label: "English", value: "en-bz", country: "Belize", flag: "bz" },
  { label: "English", value: "en-ca", country: "Canada", flag: "ca" },
  { label: "English", value: "en-ga", country: "Gambia", flag: "gm" },
  {label: "English",value: "en-gb",country: "United Kingdom",flag: "gb"},
  { label: "English", value: "en-gd", country: "Grenada", flag: "gd" },
  { label: "English", value: "en-gh", country: "Ghana", flag: "gh" },
  { label: "English", value: "en-gy", country: "Guyana", flag: "gy" },
  { label: "English", value: "en-in", country: "India", flag: "in" },
  { label: "English", value: "en-ir", country: "Ireland", flag: "ie" },
  { label: "English", value: "en-jm", country: "Jamaica", flag: "jm" },
  { label: "English", value: "en-ke", country: "Kenya", flag: "ke" },
  { label: "English", value: "en-ki", country: "Kiribati", flag: "ki" },
  {label: "English",value: "en-kn",country: "Saint Kitts and Nevis",flag: "kn"},
  { label: "English", value: "en-lc", country: "Saint Lucia", flag: "lc" },
  { label: "English", value: "en-lr", country: "Liberia", flag: "lr" },
  {label: "English",value: "en-mh",country: "Marshall Islands",flag: "mh"},
  { label: "English", value: "en-mu", country: "Mauritius", flag: "mu" },
  { label: "English", value: "en-na", country: "Namibia", flag: "na" },
  { label: "English", value: "en-ng", country: "Nigeria", flag: "ng" },
  { label: "English", value: "en-nz", country: "New Zealand", flag: "nz" },
  {label: "English",value: "en-sb",country: "Solomon Islands",flag: "sb"},
  { label: "English", value: "en-sg", country: "Singapore", flag: "sg" },
  { label: "English", value: "en-sl", country: "Sierra Leone", flag: "sl" },
  { label: "English", value: "en-ss", country: "South Sudan", flag: "ss" },
  { label: "English", value: "en-to", country: "Tonga", flag: "to" },
  {label: "English",value: "en-tt",country: "Trinidad and Tobago",flag: "tt"},
  {label: "English",value: "en-tz",country: "Tanzania, United Republic of",flag: "tz"},
  {label: "English",value: "en-us",country: "United States of America",flag: "us"},
  { label: "English", value: "en-ws", country: "Samoa", flag: "ws" },
  { label: "English", value: "en-zm", country: "Zambia", flag: "zm" },
  { label: "Estonian", value: "et-ee", country: "Estonia", flag: "ee" },
  { label: "Fijan", value: "fj-fj", country: "Fiji", flag: "fj" },
  { label: "Filipino", value: "fil-ph", country: "Philippines", flag: "ph" },
  { label: "Finnish", value: "fi-fi", country: "Finland", flag: "fi" },
  { label: "French", value: "fr-be", country: "Belgium", flag: "be" },
  { label: "French", value: "fr-bf", country: "Burkina Faso", flag: "bf" },
  { label: "French", value: "fr-bj", country: "Benin", flag: "bj" },
  { label: "French", value: "fr-ca", country: "Canada", flag: "ca" },
  {label: "French",value: "fr-cd",country: "Congo, Democratic Republic of the",flag: "cd"},
  {label: "French",value: "fr-cf",country: "Central African Republic",flag: "cf"},
  { label: "French", value: "fr-ch", country: "Switzerland", flag: "ch" },
  { label: "French", value: "fr-cm", country: "Cameroon", flag: "cm" },
  { label: "French", value: "fr-fr", country: "France", flag: "fr" },
  { label: "French", value: "fr-ga", country: "Gabon", flag: "ga" },
  { label: "French", value: "fr-gf", country: "French Guiana", flag: "gf" },
  { label: "French", value: "fr-gn", country: "Guinea", flag: "gn" },
  { label: "French", value: "fr-ht", country: "Haiti", flag: "ht" },
  { label: "French", value: "fr-mc", country: "Monaco", flag: "mc" },
  {label: "French",value: "fr-mf",country: "Saint Martin (French part)",flag: "mf"},
  { label: "French", value: "fr-mg", country: "Madagascar", flag: "mg" },
  { label: "French", value: "fr-ml", country: "Mali", flag: "ml" },
  { label: "French", value: "fr-ne", country: "Niger", flag: "ne" },
  {label: "French",value: "fr-pf",country: "French Polynesia",flag: "pf"},
  { label: "French", value: "fr-sn", country: "Senegal", flag: "sn" },
  { label: "French", value: "fr-td", country: "Chad", flag: "td" },
  {label: "French",value: "fr-tf",country: "French Southern Territories",flag: "tf"},
  { label: "French", value: "fr-tg", country: "Togo", flag: "tg" },
  { label: "Georgian", value: "ka-ge", country: "Georgia", flag: "ge" },
  { label: "German", value: "de-at", country: "Austria", flag: "at" },
  { label: "German", value: "de-be", country: "Belgium", flag: "be" },
  { label: "German", value: "de-ch", country: "Switzerland", flag: "ch" },
  { label: "German", value: "de-de", country: "Germany", flag: "de" },
  { label: "German", value: "de-li", country: "Liechtenstein", flag: "li" },
  { label: "Greek", value: "el-cy", country: "Cyprus", flag: "cy" },
  { label: "Greek", value: "el-gr", country: "Greece", flag: "gr" },
  { label: "Guaran�", value: "gn", country: "Paraguay", flag: "py" },
  { label: "Hebrew", value: "he", country: "Israel", flag: "il" },
  { label: "Hindi", value: "hi", country: "Fiji", flag: "fj" },
  { label: "Hindi", value: "hi", country: "India", flag: "in" },
  { label: "Hungarian", value: "hu", country: "Hungary", flag: "hu" },
  { label: "Icelandic", value: "is", country: "Iceland", flag: "is" },
  { label: "Indonesian", value: "id", country: "Indonesia", flag: "id" },
  { label: "Irish", value: "ga", country: "Ireland", flag: "ie" },
  { label: "Italian", value: "it", country: "Italy", flag: "it" },
  { label: "Italian", value: "it", country: "San Marino", flag: "sm" },
  { label: "Italian", value: "it", country: "Switzerland", flag: "ch" },
  { label: "Japanese", value: "ja", country: "Japan", flag: "jp" },
  { label: "Kazakh", value: "kk", country: "Kazakhstan", flag: "kz" },
  { label: "Khmer", value: "km-kh", country: "Cambodia", flag: "kh" },
  { label: "Kinyarwanda", value: "rw", country: "Rwanda", flag: "rw" },
  {label: "Korean",value: "ko",country: "Korea, Democratic People's Republic of",flag: "kp"},
  {label: "Korean",value: "ko",country: "Korea, Republic of",flag: "kr"},
  { label: "Kurdish", value: "ku", country: "Iraq", flag: "iq" },
  { label: "Kurdish", value: "ku", country: "Turkey", flag: "tr" },
  { label: "Kyrgyz", value: "ky", country: "Kyrgyzstan", flag: "kg" },
  { label: "Latvian", value: "lv", country: "Latvia", flag: "lv" },
  { label: "Lithuanian", value: "lt", country: "Lithuania", flag: "lt" },
  { label: "Luxembourish", value: "lb", country: "Luxembourg", flag: "lu" },
  {label: "Macedonian",value: "mk",country: "North Macedonia",flag: "mk"},
  { label: "Malay", value: "ms", country: "Brunei Darussalam", flag: "bn" },
  { label: "Malay", value: "ms", country: "Malaysia", flag: "my" },
  { label: "Maltese", value: "mt", country: "Malta", flag: "mt" },
  { label: "Mongolian", value: "mn", country: "Mongolia", flag: "mn" },
  { label: "Nauruan", value: "na", country: "Nauru", flag: "nr" },
  { label: "Nepali", value: "ne", country: "Nepal", flag: "np" },
  { label: "Norwegian", value: "no", country: "Norway", flag: "no" },
  { label: "Oromo", value: "om", country: "Ethiopia", flag: "et" },
  { label: "Palauan", value: "pau", country: "Palau", flag: "pw" },
  { label: "Pashto", value: "ps", country: "Afghanistan", flag: "af" },
  {label: "Persian",value: "fa",country: "Iran (Islamic Republic of)",flag: "ir"},
  { label: "Polish", value: "pt-gw", country: "Poland", flag: "pl" },
  {label: "Porteguese",value: "pt-ao",country: "Guinea-Bissau",flag: "gw"},
  { label: "Portuguese", value: "pt-br", country: "Angola", flag: "ao" },
  { label: "Portuguese", value: "pt-cv", country: "Brazil", flag: "br" },
  { label: "Portuguese", value: "pt-mz", country: "Cape Verde", flag: "cv" },
  { label: "Portuguese", value: "pt-pt", country: "Mozambique", flag: "mz" },
  { label: "Portuguese", value: "pt-st", country: "Portugal", flag: "pt" },
  {label: "Potuguese",value: "pt-ro",country: "Sao Tome and Principe",flag: "st"},
  { label: "Romanian", value: "ro", country: "Romania", flag: "ro" },
  {label: "Romanian",value: "ro-md",country: "Moldova, Republic of",flag: "md"},
  { label: "Romansh", value: "rm", country: "Switzerland", flag: "ch" },
  {label: "Russian",value: "ru",country: "Russian Federation",flag: "ru"},
  { label: "Sami", value: "se", country: "Norway", flag: "no" },
  { label: "Scottish", value: "gd", country: "United Kingdom", flag: "gb" },
  { label: "Serbian", value: "sr", country: "Serbia", flag: "rs" },
  { label: "Shona", value: "sn", country: "Zimbabwe", flag: "zw" },
  { label: "Sinhala", value: "si", country: "Sri Lanka", flag: "lk" },
  { label: "Slovak", value: "sk", country: "Slovakia", flag: "sk" },
  { label: "Slovene", value: "sl", country: "Slovenia", flag: "si" },
  { label: "Sotho", value: "st", country: "Lesotho", flag: "ls" },
  { label: "Spanish", value: "es-ar", country: "Argentina", flag: "ar" },
  {label: "Spanish",value: "es-bo",country: "Bolivia (Plurinational State of)",flag: "bo"},
  { label: "Spanish", value: "es-cl", country: "Chile", flag: "cl" },
  { label: "Spanish", value: "es-co", country: "Colombia", flag: "co" },
  { label: "Spanish", value: "es-cu", country: "Cuba", flag: "cu" },
  {label: "Spanish",value: "es-do",country: "Dominican Republic",flag: "do"},
  { label: "Spanish", value: "es-ec", country: "Ecuador", flag: "ec" },
  { label: "Spanish", value: "es-es", country: "Spain", flag: "es" },
  {label: "Spanish",value: "es-gq",country: "Equatorial Guinea",flag: "gq"},
  { label: "Spanish", value: "es-gt", country: "Guatemala", flag: "gt" },
  { label: "Spanish", value: "es-hn", country: "Honduras", flag: "hn" },
  { label: "Spanish", value: "es-mx", country: "Mexico", flag: "mx" },
  { label: "Spanish", value: "es-ni", country: "Nicaragua", flag: "ni" },
  { label: "Spanish", value: "es-pa", country: "Panama", flag: "pa" },
  { label: "Spanish", value: "es-pe", country: "Peru", flag: "pe" },
  { label: "Spanish", value: "es-sv", country: "El Salvador", flag: "sv" },
  { label: "Spanish", value: "es-uy", country: "Uruguay", flag: "uy" },
  {label: "Spanish",value: "es-ve",country: "Venezuela (Bolivarian Republic of)",flag: "ve"},
  { label: "Swahili", value: "sw", country: "Uganda", flag: "ug" },
  { label: "Swedish", value: "sv", country: "Sweden", flag: "se" },
  { label: "Tajik", value: "tg", country: "Tajikistan", flag: "tj" },
  { label: "Thai", value: "th", country: "Thailand", flag: "th" },
  { label: "Tigrinya", value: "ti", country: "Eritrea", flag: "er" },
  {label: "Tok Pisin",value: "tpi",country: "Papua New Guinea",flag: "pg"},
  { label: "Tswana", value: "tn-bw", country: "Botswana", flag: "bw" },
  { label: "Turkish", value: "tr-cy", country: "Cyprus", flag: "cy" },
  { label: "Turkish", value: "tr-tr", country: "Turkey", flag: "tr" },
  { label: "Turkmen", value: "tk", country: "Turkmenistan", flag: "tm" },
  { label: "Tuvaluan", value: "tvl", country: "Tuvalu", flag: "tv" },
  { label: "Ukrainian", value: "uk", country: "Ukraine", flag: "ua" },
  { label: "Urdu", value: "ur", country: "Pakistan", flag: "pk" },
  { label: "Uzbek", value: "uz", country: "Uzbekistan", flag: "uz" },
  { label: "Vietnamese", value: "vi", country: "Viet Nam", flag: "vn" },
  { label: "Welsh", value: "cy", country: "United Kingdom", flag: "gb" }
];

export default {
  components: { CountryFlag },
  data() {
    return {
      model: [],
      options: stringOptions
    };
  },

  methods: {
    filterFn(val, update) {
      if (val === "") {
        update(() => {
          this.options = stringOptions;
          console.log("this.modelfilter:", this.model);
        });
        return;
      }

      update(
        () => {
          const needle = val.toLowerCase();
          this.options = stringOptions.filter(
            v => v.toLowerCase().indexOf(needle) > -1
          );
        },
        ref => {
          if (this.options.length > 0) {
            ref.setOptionIndex(0);
          }
        }
      );
    }
  }
};
</script>