@ebena

Use q-table with :data=“userData” and define userData as a computed property:

computed: {
    userData: function () {
      return Object.entries(this.user).map(([k,v]) => { return {key: k, value: v} })
    }
  }

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

@rulrok

Am interested in this as will be hitting same challenge down the line.

Some thoughts:

1. You may like to consider SSR + PWA handoff.
   https://quasar.dev/quasar-cli/developing-ssr/ssr-with-pwa

2. SSR shopfront knows subdomain through ssrContext
   https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr#Boot-Files

3. PWA shopfront knows subdomain through window.location

4. Code knows whether it is running client or server via process.env.CLIENT and process.env.SERVER

Use quasar boot file:
https://quasar.dev/quasar-cli/cli-documentation/boot-files

Example in this post:
https://forum.quasar-framework.org/topic/5224/integrating-thrid-party-component

Not a great comment mecjos. I am just a regular user of Quasar. Have found the support in this forum to be excellent. Much like the Quasar framework itself.

@rab

A Problem

• Vue 3 instances no longer implement the event emitter interface.
• Recommendation is to use mitt.
• See: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md

A Solution

• Load the code below as a boot file (e.g. pagebus.js).
• Using this.$on is detected as error so am using $$on instead.

// file boot/pagebus.js
import { boot } from 'quasar/wrappers'
import mitt from 'mitt'

export default boot(({ app }) => {
  app.use({
    install: function (Vue, options) {
      const pagebus = mitt()
      app.config.globalProperties.$$on = pagebus.on
      app.config.globalProperties.$$emit = pagebus.emit
    }
  })
})

If you wish to debug:

   ...
   app.config.globalProperties.$$on = function (ev, ...args) {
      console.log(ev, args)
      return pagebus.on(ev, ...args)
   }
   ...

Any support for twitter cards?

I am new to Twitter Cards. Afaik you add meta statements in your html. Beyond that I’m a blank canvas.

Ideally there is a solution where you get a screenshot posted based on the uri (i.e. different images for different pages).

• Is there any support for Twitter Cards in Quasar?
• Does it even make sense to ask the question?
• Can anyone share a solution?

Thanks

@rab

A Problem

• Vue 3 instances no longer implement the event emitter interface.
• Recommendation is to use mitt.
• See: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md

A Solution

• Load the code below as a boot file (e.g. pagebus.js).
• Using this.$on is detected as error so am using $$on instead.

// file boot/pagebus.js
import { boot } from 'quasar/wrappers'
import mitt from 'mitt'

export default boot(({ app }) => {
  app.use({
    install: function (Vue, options) {
      const pagebus = mitt()
      app.config.globalProperties.$$on = pagebus.on
      app.config.globalProperties.$$emit = pagebus.emit
    }
  })
})

If you wish to debug:

   ...
   app.config.globalProperties.$$on = function (ev, ...args) {
      console.log(ev, args)
      return pagebus.on(ev, ...args)
   }
   ...

Navigation drawers often contain a mix of internal and external links.

The following is working well for me:

// generate nav links as a list of q-items
<q-list>
  <q-item
    v-for="(item,id) in items" :key="id"
    exact
    tag="a"
    :to="item.to"
    :href="item.href"
    :target="item.target||'_'">
    <q-item-section>
      <q-item-label>
        {{ item.label }}
      </q-item-label>
    </q-item-section>
  </q-item>
</q-list>

You then provide data where items have either a to or an href:

// the data
  data () {
    return {
      items: [
        { label: 'One',     to:   '/one'            },
        { label: 'Two',     to:   '/two'            },
        { label: 'Bing',    href: 'http://bing.com' }
      ]
  }}

Please shout if this breaks something I should be aware or if there is an alternative recommended way.

Hope it helps.

You can add site-wide styles in css/app file.
Perhaps this helps you.

Not a great comment mecjos. I am just a regular user of Quasar. Have found the support in this forum to be excellent. Much like the Quasar framework itself.

The emit solution does not reload the page

Yes this is what I expected. My comment was not clear.

I assume the getData methods act on the new data (or the context is somehow different as otherwise would not need to be called again).

If it is working for you then the solution seems ok to me.

Perhaps you already know Vue persists data across page refreshes. It’s not clear you need it here.

I would store the data fetched within startEverything into a data variable (say myData) and call an updateMyData method when the new data is entered.

Depending on your UI the updateMyData could be triggered by a button (see @click)

You do not need to refresh / reload page to re-trigger the data fetch from the server.

@amoss PageSticky can be used to create a bottom fixed element. I don’t know how you would align elements in that with q-table columns. Perhaps if you take explicit css control of column widths you could make it work.

@amoss Suggestion is to add an extra item to the end of your data array to represent the count and total values. That item will appear in the correct columns as part of standard q-table rendering. If not a solution then please post your relevant code.

@amoss Calculate count and total in data before passing to q-table.