Finally I have used a quasar.conf.js from a new blank project generated with the latest CLI and moved all specifics from the former conf to the new one. Both conf files are different and I am not sure what has done it. But now the compiler option works. Seems like using a conf file from an old Quasar version (mine probably started with v0.17) breaks something with newer Quasar versions.

I have tried creating a Quasar project from scratch and using the demo project, install v-runtime-template and try a trivial example. That works, so the problem seems to be related with my particular project. I have tried removing both the node_modules directory and the package-lock.json file and run npm install but it does not help. Any ideas will be appreciated. Thank you!

Hello,

I am trying to use v-runtime-template (https://github.com/alexjoverm/v-runtime-template) or any other way of using Vue templates that are not pre-compiled. I have activated the option in quasar.conf.js:

build: {
  vueCompiler: true
}

That seems like the only necessary step to bundle both Vue runtime + compiler, but it does not seem to work. For instance, see https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build and https://github.com/alexjoverm/v-runtime-template/issues/16.

When I try to run the code with quasar dev, I get the error:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

I don’t think the problem is related to v-runtime-template as the message is the generic Vue error for the case when the compiler is not present.

I have upgraded to the latest Quasar version of everything but the problem persists.

Is there anything else I should be doing? Thank you in advance!

For those who want to know why this is so or shed some additional light, check: https://stackoverflow.com/questions/58546283/why-is-el-sometimes-necessary-when-using-refs-in-vue

Yes, it does work with $el. Thanks a lot!

Same problem here. I had a piece of working code which has stopped working. Just to make sure, I have just updated Quasar to 1.2.5 and so on, and the error persists. In my case the <q-btn> tag has a ref="button" which is contained in a <q-tab-panel name="whatever" @keyup.enter.native="$refs.button.click()">. Pressing the enter key was triggering the click action of the button. Now it gives the error above. Thanks.

Edited the question. It is still unanswered. Thanks!

Could someone with privileges please change the title to “on SSR with PWA client takeover”? Thank you!

Thank you for your responses!

Sorry, I forgot to mention that this happens with SSR with PWA client takeover. My mistake. If I understand correctly, on the client side, the platform detection should work as a PWA. In fact, I have noticed that the Quasar Dev web site behaves differently depending on the browser. For instance, on my Windows PC, the page:

https://quasar.dev/options/platform-detection#Usage

Has the menu drawer open on a fresh load with Chrome, but closed with Firefox. I don’t know how it has been coded, but I am guessing that it is the same issue I am experiencing.

Hello,

This is my first post here so excuse if I may be missing something…

I have a page with a typical layout that uses <q-toolbar> containing <q-btn @click="leftDrawerOpen = !leftDrawerOpen"> and then a <q-drawer v-model="leftDrawerOpen">.

This is all in a .vue file. The data, as it is supposed to work with SSR looks like this:

data() {
  return {
    leftDrawerOpen: this.$q.platform.is.desktop
  };
}

This way, the drawer will be open by default on any desktop platform. As I have tested, it does work with Chrome or Internet Explorer, but does not work with Firefox or Edge using SSR with PWA takeover (all under Windows.) While using quasar dev (so only PWA) it seems to work everywhere though.

I have tried using !this.$q.platform.is.mobile or even this.$q.platform.is.desktop || this.$q.platform.is.firefox but it does not work. The drawer is closed for Firefox in this case.

I have also tried delaying the platform detection and adding the initialization code inside mounted this way:

mounted: function () {
  this.leftDrawerOpen = this.$q.platform.is.desktop
}

or even:

mounted: function () {
  this.$nextTick(() => this.leftDrawerOpen = this.$q.platform.is.desktop)
}

But nothing works building with quasar build -m ssr.

Does someone know whether this is a bug or am I doing something wrong?

I am using the latest Quasar 1.0.4. This happens with previous versions as well but I have updated everything to make sure this is not something already fixed.

Thank you!