@Marcelo-Gondim
in SPA mode this command throws errors, too:

quasar build -m spa

The problem is with “console.log” - please do not remove this possibility. “console.log” in production is useful, too.

@mrcalvo I have something like this in “quasar.conf.js”

function formatDate (date) {
  if (!date) {
    date = new Date()
  }
  var year = date.getFullYear(),
    month = ('0' + (date.getMonth() + 1)).slice(-2), // months are zero indexed
    day = ('0' + date.getDate()).slice(-2),
    hour = ('0' + date.getHours()).slice(-2),
    minute = ('0' + date.getMinutes()).slice(-2),
    second = ('0' + date.getSeconds()).slice(-2)
  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
}

module.exports = function (ctx) {

...

  const appenv = ctx.dev
    ? { // so on dev we'll have
    }
    : { // and on build (production):
    }
  let builddate = formatDate()
...
  appenv['MAIN_BUILD_DATE'] = JSON.stringify(builddate)

and later in configuration:

    build: {
...
      env: appenv,
...

In vue/js files it is accessible as:

console.log(process.env.MAIN_BUILD_DATE)

@bellagrunt Hmm, I didn’t work with SSR, so can’t say about prefetch. Anyhow, from Vue’s pov, if you’re using “created()” then imho it’s quite early in component lifecycle:

https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

In typical situation, I would use a “mounted()”.

Does your solution works without SSR in “normal” SPA mode?

@FrankRuss And who will read those docs? For example if they are “your” developers then maybe docs from code are OK. If they are “other” developers then maybe something like OpenAPI (previously Swagger) would be better. I’m thinking about something like in Python’s FastAPI:
https://fastapi.tiangolo.com/#interactive-api-docs
But I don’t know if there exists something similar for javascript. Probably yes, it just needs finding as always. Assuming it would help in your use case, of course.

@bellagrunt said in vuexorm in ssr hydration issue:

computed: {
items: () => Item.all()
},

Interesting. I don’t know how SSR mode works in the context of vueorm. BTW this fragment is one of the first I would check - I would put some console.log or debugger in this:

  computed: {
    items: () => Item.all()
  },

something like this:

  computed: {
    items () {
        let ret = Item.all()
        // debugger OR console.log(ret)
        return ret
    }
  },

@s-molinari said in How to get more than one badge per element?:

style=“pointer-events: auto;”

Great catch @s-molinari !! Q-badge works with your solution, too! Eventually, we have now a VERY interesting use case with many, many possibilities. I wonder why this css class was put there anyway, maybe something with ripple effect?

In q-tree nodes it is placed also. Now I know, why there were problems with dynamic popup menus in q-tree nodes in one of my components.

@s-molinari said in How to get more than one badge per element?:

How about just using a button?

Doesn’t seem to work either. In spite of bottom positioning, the click events are not propagated to q-btn, too. I tried with native, z-index etc. also:

https://codepen.io/qyloxe/pen/xxKaXmw?editors=1111

@s-molinari said in How to get more than one badge per element?:

I’d venture to say, QBadge was never intended to get clicked.

Hmm, don’t know what to say - those badges looks perfect BTW even with .native modifier, click doesnt work, too. I always assumed, that .native means, that developer from userland wants to handle DOM events at the tags level.

So, maybe there is a preferred solution to “close tab button” in quasar 1.+? Something like this (from 0.17 code):

@s-molinari said in How to get more than one badge per element?:
…

But, I was told by the master, it would be simpler to just leave it to devland to use CSS and he’s right, it’s not that hard. Also have a look at these:

…

https://codepen.io/rstoenescu/pen/MWgrVYG?editors=101

Scott

Hi Scott, I wonder if there is a preferred solution for capturing click events from those badges:

https://codepen.io/qyloxe/pen/xxKaXmw?editors=1111

The “obvious one” is not working as I can only see “tab click” on console instead of “badge click”:

@rconstantine looks like you are just about to reinvent a wheel. I would consider some kind of client side query language. Below is a very useful library, because it allows to declare rich nested models, retrieve relational data and query those using javascript. The vuex reactivity is added bonus. This library flattens nested structures which is the main pain point in using them in components:

https://vuex-orm.github.io/vuex-orm/guide/prologue/what-is-vuex-orm.html#issue-with-nested-relational-data