Quasar Framework

A lot of post have been made asking how to reduce the Quasar css bundle size. Mostly how to use Purgecss to reduce the size , but apparently it breaks Quasar (something to do with used color classes not recognized by Purgecss).

As of now there’s no way to reduce the css bundle size of Quasar.( as far as I know)

https://forum.quasar-framework.org/topic/3116/purgecss

https://forum.quasar-framework.org/topic/6139/simple-page-scored-low-performance-using-google-lighthouse

dobbel

@Hawkeye64

But I assume that Purgecss also removed a lot of other css that was not in use, considering is was purging an empty Quasar app.

Or are you telling me that 195 kb in reduced bundle size is only because of color classes? So my conclusion stands Quasar is not very efficient at reducing it’s own css bundle size. Another way to say it is that Quasar does not reduce it’s bundle size at all. If that’s the case is this considered to be an issue at all by the Quasar team?

from the first page of the doc website:

Worried about bloat? You shouldn’t be. If you only want to build a website, >Quasar will only build the code required for a website, with nothing else. >Same goes for the other build modes.

Or am I seeing it wrong?

dobbel

@Scott3730

This vue component has double scrollbars:

https://binaryify.github.io/vue-custom-scrollbar/en/#why-use-vue-custom-scrollbar

dobbel

you could create a Github feature request

dobbel

@mayank091193 Great work!

some feedback:

the pie chart of the ‘Key Competitors’ touches/overlays the legend on my screen, especially when you focus on it so it expands. ( a bit more margin padding maybe)

dobbel

@Eaglorn

Isn’t that Vue3 code? Don’t think you will get support for that yet here. Anyways I saw this video that implements vuex 4 vue3 and typescript.

https://www.youtube.com/watch?v=fh0VboqAc8k

btw it’s a eslint error so you could comment that part of the code out to not be linted.

https://stackoverflow.com/questions/27732209/turning-off-eslint-rule-for-a-specific-line

dobbel

That’s really nasty if you don’t read that. You learn something every day with Quasar.

dobbel

@Pratik-Patel Very useful and great additions!

dobbel

@Abdullah-Sohail

import store from '../store/index.js';

instead of

import store from '../store';

dobbel

@Abdullah-Sohail

found this:

https://dev.to/mrbrowny/import-store-into-route-js-and-authenticate-routes-in-quasar-3a8m

dobbel

@emmajnr

try to put in in a const first like:

const img = “~assets/my-image.png”

or put it in static ( or public in v2 )

“static/my-image.png”

dobbel

@Abdullah-Sohail

https://forum.quasar-framework.org/topic/2825/store-is-no-longer-accessible-in-router/8

dobbel

@atulfinflock

50 years!

-validity 20000

https://stackoverflow.com/questions/23280371/sign-android-apk-with-a-certificate-that-expires-further-in-to-the-future

dobbel

@zhanggx

U can use !important to overrule the max-width ect

Now the width is max 800px :

 style: 'height: 600px; width: 800px !important;  max-width: 800px !important',

dobbel

@qjh if you make a marking codepen example it would be easier to help find the problem.

dobbel

@Hawkeye64 that can be but it does not explain the 200kb to 5kb CSS size reduction with PurgeCSS vs default Quasar. Only way to explain is that Quasar does a not so very good job at reducing it’s own css bundle size. Just my thoughts.

Posts made by dobbel