I’m trying to solve this problem too!

I was interested to see Meteor suggested. I used that years ago for a while, and was interesting with a big vision but ultimately it died on the launching pad. I didn’t even know it was still a thing.

I did pull down https://github.com/alexandesigner/quasar-meteor and tried to get it running, and immediatly ran into Meteor issues, which reminded me of why I dropped it in the end. The readme is very minimal, which always makes me wary, especially when it doesn’t run OOTB as advertised.

Posted about it here: https://github.com/quasarframework/quasar/discussions/15100 but will copy/paster it:
Any suggestions for robust backends that you could hook up to Quasar to jumpstart a SAAS?
Apart from Firebase. Looking for robust open source SAAS (ie: multi tenant) solutions that have the following (or some) of the core features:

• Authentication
• Security
• User and Role management
• Payments (Stripe preferred OOTB)
• Audit Logs
• Settings
• I18n
• Debugging

A couple I’ve looked at, with reasons:

• https://scaffoldhub.io/ Not updated for a while, Vue2/Vuex going to be discontinued (React only now). Nodejs 16 only.
• https://pocketbase.io/docs/ Very neat minimalist with a Quasar starter kit https://github.com/benallfree/awesome-pocketbase but could be a touch early for production use as it’s under active development to V1 still.
• https://strapi.io/ seems possible, but might be too heavyweight? Anyone with experience of this using it for a SAAS?
• WordPress headless, via Atlas https://github.com/wpengine/faustjs or similar

Would appreciate any other suggestions to seriously consider. Thanks!

text-center

Any clues on how to do this?
It might seem obvious but none of the regular position/align things seem to work.

I have a row
I have a column

  <q-list bordered separator>
    <q-item class="row q-col-gutter-sm justify-center align-center"
    v-for="x in y" :key='x'>
      <div class="col-1"
        v-for="a in b" :key='a'
      > <div class="align-center">{{ x[a] }}</div>
      </div>
    </q-item>
  </q-list>

Am I missing something?

@qyloxe said in conversion from bootstrap themes/templates:

@lucasfernog sure, but please read the thread carefully - we’re not talking about components but about thousands of free bootstrap themes, used as a base for frontend sites in business, blogs, landing pages and many other categories of sites.
It is possible to get those momentum in frontend technology because Quasar has a set of compatible with B4 CSS classes which means, that if there would be a clear or relatively easy path of conversion from B4 to Quasar, there is a big chance of putting Quasar mainstream and let the world use it instead of B4. Why? Because B4 has poor components but it’s very easy to start with good looking theme or template but when it comes to really making a site it is very hard. So, as you can see, CSS classes for layout, typography and colors are not a “developer” problem but rather a “marketing” problem.

I’ve just come across this issue converting a project that uses Bootstrap css, which I’m converting into Quasar.
It would have been helpful to have a guide. The point that @qyloxe makes above is very smart business sense as well.

Resolved. Seemed to be an issue purely with gitlab pages as when I deployed to netlify the offline add to homepage works just fine.

Fopra - Focused Music Practice Timer https://fopra.live/
Project page: http://sonicviz.com/project/fopra-focused-practice/

Fixed: https://www.codeproject.com/Tips/677451/Workaround-to-Fix-Audio-Autoplay-on-Mobile-Browser

Here’s my first Quasar work in progress prototype : http://sonicviz.com/project/fopra-focused-practice/

Any feedback or bug reports welcome!

Thanks for the cool tools Quasar!

Nice one!

You need to read and understand the lint errors, not ignore them.
It’s quite restrictive and in most cases they are exactly what they say they are.

Updated the manifest file with full start url but it’s still getting the url wrong for static icons

{
  "name": "Fopra App",
  "short_name": "Fopra-PWA",
  "icons": [
    {
      "src": "/statics/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/statics/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "https://sonicviz.gitlab.io/fopra",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#027be3"
}

Hi,
I’m working on a little quasar prototype but cannot get the audio to work on all platforms.

It’s a simple enough alarm timer app, using AUDIO[0].play()

The alarm sound plays on desktop browser but on mobile (Samsung S3 and Asus Memo Pad 7 ) it never plays, or I don’t hear it. Any clues?

Link to test: https://sonicviz.gitlab.io/fopra

Thanks, pc

Hi,
I’m testing a simple PWA and working on testing the Add to Home screen functionality as laid out in https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/

ie:
"Testing the app install banner
Once you’ve got your web app manifest set up, you’ll want to validate that it’s defined correctly. You’ve got two approaches at your disposal. One is manual, and the other is automated.
To manually trigger the app install banner:

1. Open Chrome DevTools.
2. Go to the Application panel.
3. Go to the Manifest tab.
4. Click Add to homescreen, highlighted in red in the screenshot below."

Using the default PWA framework in the manifest.json it has " “src”: “/statics/icons/icon-192x192.png”,

I have my test app deployed to Gitlab pages but when I try the above test I get an error:
icon-192x192.png:1 GET https://sonicviz.gitlab.io/statics/icons/icon-192x192.png 404 ()

but the file does exist correctly at https://sonicviz.gitlab.io/fopra/statics/icons/icon-192x192.png

If I change the manifest.json path to “src”: “./statics/icons/icon-192x192.png”, I now get an error
file does exist correctly at https://sonicviz.gitlab.io/fopra/statics/statics/icons/icon-192x192.png

So the relative linking is not working correctly in the manifest with gitlab it seems?

Any clues to fix it?

ty!

Nice job!