Could someone explain how quasar-layouts should be used?

1. Where should they be stored?
2. How to apply a layout to component?
3. If I have my SPA and I want to apply one common layout for the whole app, where should I place it?
4. Can I use v-if in layouts?

Guys,
if you can - support Quasar on Patreon,
if you can’t (and also if you support on Patreon) - SHARE on social media - Twitter, Facebook, groups, forums etc.

Razvan is making great job and if he could more support from Quasar users and hopefully some big guys, Quasar can become even better!

Quasar needs your support!

Hi,
Can you add HTTPS/SSL to forum? Sending password over http is not great idea…

@rstoenescu

@Martin First of all, thank you for such a great effort!

1. It looks exactly the same as having one parent file with router-view inside, which is MUST BE when using router-view. What is the point then? @rstoenescu ?
2. @Martin said in Using layouts. How?:

If you need a different layout setup for a particular page, create a new <quasar-layout> for it and make your router.js
jump to that page instead of showing it inside a <router-view>

How? I haven’t seen that in vue-router docs anywhere.

3. Where is <div id="quasar-app" ?
4. How and where do you specify which component using which template?
5. Totally don’t understand how can I share one layout between components ?

EDIT: 1&2&3 - ok, got idea about layout component (I don’t know why I thought about it as something special, not component…) and subroutes. That’s clear. Sorry.

4 & 5 - still need answer as the only idea which I have is exactly sub-routes. Anything else how to share layouts between components ?

6. If I have subroutes, how can I change e.g. TOOLBAR TITLE when component’s changing in <router-view> ?

@wannymiarelli Could your company consider supporting Quasar on Patreon?

I would strongly recommend to post on Patreon page.
At least every release note!
It will make people able to see how much work you do!

Thank you.
Some parts I figured out last evening and night, but i is good you confirmed that I think right way. Thanks!

Not yet, but I promise that I will support you on Patreon!

Hi,

I need to limit the width of main container (so everything, including top nav, footer etc).
As I know, Q-layout has a lot of tweaks to work nice across all range of devices/resolutions and I do not want to screw it up.

This is the app which inspires me -

On resolutions over 1280 it limits the width of main container to 1170 and the app looks really nice even on large screens which is my current issue at the moment.
I am building app where the target user has to get as simple as possible app so on single page I have not too much content/interactions which make it looking bad on large screens even if it looks quite nice on phone/tablet resolution.

@rstoenescu - how can I make it with Quasar ? I know I can easily assign container width but want to be sure it won’t screw up all work which you have done.

@rstoenescu link to Editor is incorrect. Should be: http://quasar-framework.org/components/editor---wysiwyg.html

Hi,
Did anyone create top navigation with Quasar and wouldn’t mind to showcase that?

I mean something like:

or:

or:

or maybe something like that:

Guys,

I would appreciate any help with reducing Docker image with my quasar app.
At the moment my dockerfile-dev looks like that:

FROM node:10-alpine
ENV NODE_ENV development
RUN yarn global add @vue/cli && yarn global add quasar-cli

WORKDIR /srv
EXPOSE 8080
CMD quasar dev

It is working nice, because together with the volumes set up in docker-compose I have nice hot reloading etc, but I am getting closer to first deployment and I can’t imagine sending/pulling 1.1gb image every time…

As the result I have 1.2 GB image which is pretty bad… I suppose I would have to go for 2 stage build but I am not that docker expert to do that…

It is good idea. Post it on github issues

Hi,
I have mono-repo for three apps (I am working full stack).
One is quasar, one is api with feathersjs and another one is for hapi based service.

I’ve tried to introduce yarn workspaces so I can just ran yarn and install all dependencies in all folders, however Quasar doesn’t seem to like it because until I removed package.json from top level folder, I was just getting ‘ERROR: compilation failed with 9 errors’ without any details and so on.
I got the idea that’s about workspaces when I’ve tried to run build which shown issues with locating babel.

Is there any Yarn master who can help with that or there is something which could be changed in Quasar to help with that?

@imagina said in Quasar in Docker:

Same problem here. I think it could be “try catched” because in Linux it will fail always.

It fails only in Docker, doesn’t fail in Linux host.

I am going to prepare some PR for docs with quick Docker reference for development with hot reload etc, but it will happen over next 2 weeks as I am pretty busy now.

I would propose to switch off the Antivirus system.
I had similar issue while using MicroScan (or MicroOffice, something like that) and it was slowing down the builds.

Have you found the solution? I am facing this issue right now

@rstoenescu link to Editor is incorrect. Should be: http://quasar-framework.org/components/editor---wysiwyg.html

There is quite a few of chart libs for VueJS which makes me think it is not necessary to add it to quasar

Hi,
Did anyone create top navigation with Quasar and wouldn’t mind to showcase that?

I mean something like:

or:

or:

or maybe something like that:

@LaurentPayot @jlugao - 0.15 template is universal so you can use one template for all platforms. Isn’t it just amazing?!