Solved.

https://github.com/quasarframework/quasar/issues/8457

It should be written as:

<style lang="sass">
.q-toolbar__title
  font-size: 30px
  @media (max-width: $breakpoint-xs-max)
    text-align: center
.q-footer
  .q-tab__icon
    font-size: 30px
</style>

Thanks. When I use :name.sync with quasar V2 (vue 3) it says deprecated… That’s why I was using the V3 way. Johnny#5034 on discord chat helped me out
https://discord.com/channels/415874313728688138/806171748046733332/818570585801752676
Parent:

<modal-task-name v-model:name="taskToSubmit.name"/>

Child:

<q-input :rules="[val => !!val || 'Field is required']" 
     :modelValue="name"
     @update:modelValue="event => $emit('update:name', event)" 
     outlined label="Task name" class="col" autofocus clearable 
   />

By the way using:
Pkg quasar… v2.0.0-beta.9
Pkg @quasar/app… v3.0.0-beta.9

Hi, I am using q-input with v-model two ways data binding this way:

Parent:

<modal-task-name v-model:name="taskToSubmit.name"/>

Child:

<template>
  <div class="row q-mb-sm">
    <q-input :rules="[val => !!val || 'Field is required']" outlined  
        label="Task name" class="col" autofocus clearable 
        :value="name"
        @input="(event) => $emit ('update:name', event.target.value)" 
    />
  </div>
</template>

<script>
export default {
  props: ['name']
}
</script>

Changes in the prop “name” are not passed to the parent. However, if I change the q-input with a input component it works fine. Any idea why?

Reading some posts (https://github.com/quasarframework/quasar/issues/4733) it looks like it is the way it has to work when working on dev. I have made the production build and hosting and it works right.

So knowing this, it is fine for me

If I change to GenerateSW, the workbox Precaching 18 files is done correctly. However, I need the InjectManifest for push notifications

I have console.log self.__WB_MANIFEST and it shows an array:

(18) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {revision: “af49a4afbddb67acc19c25288c66253e”, url: “0.js”}
1: {revision: “ff7e46f28d1e05a7822427bf80fa0cf9”, url: “1.js”}
2: {revision: “446c1824dc65b307bbaea0eb474c681f”, url: “2.js”}
3: {revision: “b63d5b342bc0998986bd17c68b8471bf”, url: “3.js”}
4: {revision: “bf258e94b3661a5584726c8bb8e1b7d8”, url: “app.js”}
5: {revision: “a5ee087912cbedb6022426ea0b41f8bd”, url: “fonts/Eva-Icons.woff”}
6: {revision: “cae252678f70ff0200acde68a6e74640”, url: “fonts/Eva-Icons.woff2”}
7: {revision: “5cb7edfceb233100075dc9a1e12e8da3”, url: “fonts/KFOkCnqEu92Fr1MmgVxIIzQ.woff”}
8: {revision: “87284894879f5b1c229cb49c8ff6decc”, url: “fonts/KFOlCnqEu92Fr1MmEU9fBBc-.woff”}
9: {revision: “b00849e00f4c2331cddd8ffb44a6720b”, url: “fonts/KFOlCnqEu92Fr1MmSU5fBBc-.woff”}
10: {revision: “adcde98f1d584de52060ad7b16373da3”, url: “fonts/KFOlCnqEu92Fr1MmWUlfBBc-.woff”}
11: {revision: “bb1e4dc6333675d11ada2e857e7f95d7”, url: “fonts/KFOlCnqEu92Fr1MmYUtfBBc-.woff”}
12: {revision: “60fa3c0614b8fb2f394fa29944c21540”, url: “fonts/KFOmCnqEu92Fr1Mu4mxM.woff”}
13: {revision: “57d7c5f1564284b8704b641ecb899e01”, url: “fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff”}
14: {revision: “7df112be03585591874096e3254cdf34”, url: “fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2”}
15: {revision: “a3eb3a04b20741ab9f21347c5315e950”, url: “index.html”}
16: {revision: “66bdf7b5acf7b720c07e752c0cb36108”, url: “manifest.json”}
17: {revision: “1d944c9355d9f7040a1fcd57e5938d81”, url: “vendor.js”}
length: 18
proto: Array(0)

Hi, I am working on my first PWA with quasar V2 following a tutorial. When I use InjectManifest in the quasar.conf.js and write in the custom-service-worker.js file

import { precacheAndRoute } from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);

I get the following error on the console:

Uncaught not-an-array: The parameter ‘entries’ passed into ‘workbox-precaching.PrecacheController.addToCacheList()’ must be an array.

Any idea?

Solved.

https://github.com/quasarframework/quasar/issues/8457

It should be written as:

<style lang="sass">
.q-toolbar__title
  font-size: 30px
  @media (max-width: $breakpoint-xs-max)
    text-align: center
.q-footer
  .q-tab__icon
    font-size: 30px
</style>

I don´t know how to do that… can you point me in the right direction?

I have changed it to scss and it works

<style lang="scss">
  .q-toolbar__title{
    font-size: 30px;
    @media (max-width: $breakpoint-xs-max){
      text-align: center;
    }
  }
</style>

I have tried with quasar 2.1.14 and it does work with this style, however in the 3.0.0-beta.3 it does not

<style lang="sass">
  .q-toolbar__title
    font-size: 30px
    @media (max-width: $breakpoint-xs-max)
      text-align: center
  .q-footer
    .q-tab__icon
      font-size: 30px
</style>