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

Using the app alias worked, e.g.
import { Plugins } from 'app/src-capacitor/node_modules/@capacitor/core'

Thanks

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

@tlloyduk replying to myself here, but I am not sure qenv is vastly different to what I proposed so will stick to my original plan!

ok will do

Did anyone get a solution for dev, staging and production environments ?

I had the idea of using quasar build -d (debug mode) as staging and quasar build as production, each with its own dist folder, and I set a DEPLOY_MODE env variable accordingly:

build: {
      distDir: ctx.debug ? `dist/${ctx.modeName}-dev` : `dist/${ctx.modeName}`,
      env: {
        DEPLOY_MODE: ctx.prod && !ctx.debug ? 'PRODUCTION' : (ctx.prod && ctx.debug ? 'STAGING' : 'DEV')
      },

Then in my boot file, I use process.env.DEPLOY_MODE to determine which keys to use in my production env file, since quasar/dotenv extension only seems to support two environments (side note: I saw someone committed some changes on github to support staging but it was then reverted)

This works, but I wondered if anyone else had a more elegant solution ?

Nice trick

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

+1, Would like to see this option too if possible

Aarrrgghhhh finally the penny dropped after I read the error eleventy billion times. It was a layer-8 problem

I was modifying the state from a Vuex action, not from a mutation handler

I moved my code into mutations.js and changed my @input method to call the mutation directly, rather than trying to do it through an action which it doesn’t like.

updateToggle: function (key, field, val) {
      this.updateDomainRecord({ key, field, val }) // <--- mutation
      this.updateDomainConfig(key) // <--- action
        .then(() => {
          console.log('SUCCESS!')
        })
        .catch((error) => {
          console.log('ERROR', error)
        })
    }

Hi all

I know this is not strictly a Quasar issue (probably) but hoping someone has encountered the same problem before.

Dev mode: spa
Pkg quasar: v1.11.2
Pkg @quasar/app: v1.8.6

I’ve started using vuexfire in my Quasar app to make it easier to sync a Firebase document with vuex and all is fine when reading the document but I can’t make any changes in order to write back to Firebase. I must be missing something really simple here- I’m stuck! I have read the docs that vuexfire is only for reading because it is simple to write back using Firebase calls, but I can’t get that far due to:

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

[vuex] do not mutate vuex store state outside mutation handlers.

Here’s my situation: I have the store set up as follows:

main store/index.js

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      auth, customerConfig
    },
    mutations: {
      ...vuexfireMutations
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV
  })

  return Store
}

customerConfig is the store module that I’m binding to a Firebase document. I have an action in there:

export const getCustomerConfig = firestoreAction((context, customerKey) => {
  console.log('[*] Binding to collection: customers document: %c' + customerKey, 'color: red;')
  return context.bindFirestoreRef('config', firebaseStore.collection('customers').doc(customerKey))
})

That works great. In my .vue file, I am then displaying an array from the document in a q-table, e.g. my document looks a bit like:

{
	"domains": [{
			"domain": "test.com",
			"useSpfRecord": true
		},
		{
			"domain": "another.com",
			"useSpfRecord": false
		}
	]
}

and I use a q-table to show the domains list…

<q-table
      :title="data.length > 0 ? 'Domains (' + data.length + ')' : 'Domains'"
      :data="domains"
      :columns="columns"
      row-key="domain"
      :pagination.sync="pagination"
      no-data-label="No domains have been added yet"
    >

and domains uses a getter in computed to return just the domains array from the document

computed: {
    ...mapGetters('customerConfig', ['domains'])
  },

This works great, my domains are listed in the table as expected.

I then have a q-toggle in a table cell which I want to use to change the value of useSpfRecord in the domain object, e.g.

<q-td key="useSpfRecord" :props="props">
            <div>
              <q-toggle :color="props.row.useSpfRecord ? 'green' : 'grey'" :value="props.row.useSpfRecord" @input="updateToggle(props.key, $event)" checked-icon="done" />
            </div>
          </q-td>

This calls an action where I plan to write back to the Firestore document with the change.
However, as soon as I try and change the useSpfRecord property then I get the error

export const updateDomain = firestoreAction(({ state }, payload) => {
  const customerRecord = { ...state.config } // <--- Copy of the Firebase document from vuex
  const domains = customerRecord.domains

  domains.forEach((domainCfg, idx) => {
    if (Object.prototype.hasOwnProperty.call(domainCfg, 'domain')) {
      if (domainCfg.domain.toLowerCase() === payload.key.toLowerCase()) {
        domainCfg['useSpfRecord'] = payload.val // <--- BOOOOM!!!!
      }
    }
  })
})

So I don’t even get the chance to write back to Firebase with a set call.

Any thoughts or suggestions ?

Thanks!

Mayank, this is awesome. The https://quasar-scrum.netlify.app/#/dashboard-grid view is exactly what I was looking for