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).
Thanks
pagebus.js).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.
@amoss What are you trying to do? q-table comes with pagination footer that shows total number of items. If you want to use the total count then perhaps passing in pagination prop with .synch could work for you.
@metalsadman Thank you for the suggestion. I appreciate it.
@dmitry-polushkin Thanks. In my use case the state is sticky and users are assumed to toggle infrequently so bottom seemed ok to me, but you may well still be right even for my case.
Keeping this here for posterity but no longer works in Vue 3.
A solution that does work in Vue 3 is given in subsequent post (see reply below dated March 9th 2021).
For anyone interested this works as a plugin solution. Please shout if you have a better approach or can contribute to improving this one; e.g.:
/* pagebus.js
Using the global event bus to decouple components in a PWA works great
until there are multiple copies of a page instance in the browsing history;
each instance continues to receive and respond to events - especially
troublesome when one of the components fetches data from the server
(the data is fetched multiple times).
An interim workaround is provided here by propagating events and listeners
to the 'page' root not the 'app' root.
TO DO:
1. Locating the page root is an educated guess and may not fit all cases.
2. Desirable to use this.$page.$emit rather than this.$$emit.
3. A better solution using Vue extends may exist.
*/
import Vue from 'vue'
const DEBUG = true
export default {
install (Vue, options) {
Vue.mixin({
methods: {
$$page: function () {
// find the page root (educated guess)
let x = this;
do {
x = x.$parent;
} while (x && x.$parent && x.$parent.$parent !== x.$root);
return x
},
$$on: function (ev, ...args) {
// propagate to page root component
DEBUG && console.log('-> pagebus: on', this._uid, ev, args)
return (this.$$page() || this).$on(ev, ...args)
},
$$emit: function (ev, ...args) {
// propagate to page root component
DEBUG && console.log('-> pagebus: emit', this._uid, ev, args)
return (this.$$page() || this).$emit(ev, ...args)
}
}
})
}
}
@jadedRepublic Thank you. Although it seems bottom-row slot not present in grid mode.
I’ve been using the global event bus to create decoupled components for a PWA.
It works great until there are multiple instances of a page in the browsing history - each instance continues to receive and process events.
Options
Ignore it - just make sure event handlers are lightweight and idempotent.
Introduce scope into the global bus (e.g. override $emit and $listen to prefix events with id of root component).
Create a “page-bus” for each instance.
Do something else.
Any else had experience of this?
Anyone know how to tackle this?
Suggestion was to put image file in same folder as vue file just to check whether require working or not. After testing put assets where you like.
I think the “Getting Asset Paths in JavaScript” is giving you Webpack asset management for folders you specify.
I tried the examples on the docs page you linked to.
image-1.jpg in same folder as your .vue file and doing:computed: {
n () {
return 1
},
background () {
return require('./' + this.n + '.jpg')
}
}
statics folder option:Please note that whenever you bind “src” to a variable in your Vue scope, it must be one from the statics folder.