@rab

Here’s an article about Twitter Cards and Vue.js:
https://loftie.com/post/how-to-add-twitter-and-facebook-cards-to-your-vue-app/

Useful tip, you could also do something like this:

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

And bind all attributes to the item. Binding unused attributes like label usually isn’t a problem, if you wanted could also do:

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

And v-bind="item.attrs"

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

@metalsadman Thank you for the suggestion. I appreciate it.

Excellent. Many thanks.

Nice. This is more like what I expected to find. Thanks.