Wonderful.
Best posts made by pazarbasifatih
-
RE: Integrating thrid party component
@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 aboutquasar 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.
-
RE: Stripe integration with quasar q-field
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.
Latest posts made by pazarbasifatih
-
RE: Stripe integration with quasar q-field
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. -
RE: Trouble Accessing Data from Boot File
@metalsadman said in Trouble Accessing Data from Boot File:
store = Store
Exposing the store worked out for me as well. Thank you.
-
RE: Trouble Accessing Data from Boot File
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.
-
RE: @quasar/qflashcard v1.0.0-beta.5 Release!
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 -
RE: Integrating thrid party component
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.
Firstnpm install
oryarn 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>
-
RE: Send Email from Quasar App Example Needed
@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;
-
RE: Send Email from Quasar App Example Needed
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?
-
RE: Integrating thrid party component
@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 aboutquasar 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.
-
RE: Integrating thrid party component
@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/', });