Wonderful.

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

It will be very helpful to me, once I deal with every other issue in the backend
Thanks a lot. This will be my first time implementing stripe. I’ll write about the news.

It will be very helpful to me, once I deal with every other issue in the backend
Thanks a lot. This will be my first time implementing stripe. I’ll write about the news.

@metalsadman said in Trouble Accessing Data from Boot File:

store = Store

Exposing the store worked out for me as well. Thank you.

The Internet is full of

import store from "../store";
const url = "https://..."
store.commit("setDownloadURL", url);

kind of solutions but they spit out an error message like
_store__ WEBPACK_IMPORTED_MODULE_1__ .default.commit is not a function

I couldn’t find an elegant solution.

Wonderful.

Another secret feature of the Quasar.
I feel lucky clicking the forum today.
Now let me see if I can create a learning app with that

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>

@cynderkromi
Oh ok, I didn’t realize you wanted an email client. I thought it was for mailing campaigns.
You can use Nodemailer with a Nodejs backend. (You’ll need cors to unblock the requests coming from the browser. I don’t know the nature of your app, try it with or without.)

const nodemailer = require('nodemailer');
const cors = require('cors')({origin: true});

Then you’ll need some sort of smtp configuration for the source mail. you can retrieve them and save them in the env maybe… I don’t know… eg:

let transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: process.env.EMAIL_USERNAME,
        pass: process.env.EMAIL_PASSWORD
//     user: 'yourgmailaccount@gmail.com',
//     pass: 'yourgmailaccpassword'
    }
});

Then you’ll be sending the mail. You’ll define the receiver via a request to this Nodejs module. The request will include the destination. You can ask for these informations in a Quasar input element and vmodel it to a data, then send the request when user hits the send Quasar button. Take a look at this stackover link later on if you’re looking for different confs.

let sendMail =((req, res) => {
    cors(req, res, () => { //cors may or may not be necessary
const dest = req.query.dest;

        const mailOptions = {
            from: process.env.EMAIL_USERNAME, // Something like: Jane Doe <janedoe@gmail.com>
            to: dest,
            subject: 'Spam mail my client sends', // email subject
            html: `<p style="font-size: 16px;">Buy this now!!</p>
                <br />
                <img src="....png" />
            ` 
// email content in HTML
        };
})})//check the paranthesis please


module.exports = sendMail;

The thing you want to setup for you app on your own is a multi million dollar business You have to be very dedicated with it.
If nothing else works, give up the IndexedDB for good and try Firebase Extensions for that.
You can either Trigger an email upon an event in the Firestore database and make use of an email template by populating the HTML markup with the data from your Firestore.
Or directly share login email and displayName data with Mailchimp and manage everything visually by creating marketing campaigns etc from there, but it’s a payed service.

The question is… how much time do you want to spend on all of that?

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

@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/',
});