VUE CLI + Flex Addons

arogonov

Hi.

Cannot activate Flex addon in VUE CLI
I am trying to do like this in the Quasar.js file, but this does not work

Vue.use(Quasar, {
  config: {
    framework: {
      cssAddon: true,
    },
  }
....

Thanks, Aleksandr

s.molinari

Did you add Quasar via the Vue plugin system? If yes, this is what the docs say:

Your Vue config (in package.json or vue.config.js file, depending on what you chose when you created your vue app) will also contain a quasar object with some basic Quasar configuration.

Scott

arogonov

Thanks for the answer. Yes, I forgot to write.
This is what I have in vue.config.js

    quasar: {
      importStrategy: 'manual',
      rtlSupport: false,
      framework: {
        cssAddon: true,
      },
    },

Nothing works

s.molinari

What does “nothing works” mean? Hard to help you with that kind of info.

Scott

arogonov

@s-molinari Thanks for trying!

CSS properties described here. They do not work.
https://quasar.dev/layout/grid/introduction-to-flexbox#Flex-Addons

q-pa-sm-lg
items-sm-center
etc.

s.molinari

Can you show your whole vue.conf.js file?

Scott

arogonov

module.exports = {
  runtimeCompiler: true,
  pluginOptions: {
    quasar: {
      importStrategy: 'manual',
      rtlSupport: false,
      framework: {
        cssAddon: true,
      },
    },
    i18n: {
      locale: 'en',
      fallbackLocale: 'ru',
      localeDir: 'locales',
      enableInSFC: true,
    },
  },
  transpileDependencies: [
    'quasar',
  ],
};

s.molinari

I just tested it. It seems the addon is added without the entry in the config.

What are you using from the Flex Addon that you aren’t seeing? I just tested q-pa-md and xl and they worked.

Scott

s.molinari

One other small difference I have is importStrategy is set to kebab.

Scott

arogonov

@s-molinari
q-pa-md and xl always worked.

The properties described here do not work.
https://quasar.dev/layout/grid/introduction-to-flexbox#Flex-Addons

s.molinari

Can you give me some code you are using to test with? If q-pa-md worked, then everything else should work. It’s all the same addon.

Scott

metalsadman

He’s talking about the flex addons eg. q-pa-md-[width/sm/md/etc.].

@arogonov can you check the cdn/at quasar node_module folder of the css instead and import it in your src/quasar.js.

tested just now and it’s working, so yeah just import it. like this: import 'quasar/dist/quasar.addon.css' in your src/quasar.js file, then you should see it working.

s.molinari

Ah. See, I didn’t even realize what <bp> meant until just now. Sorry about that.

I’d still like to see some example code, just for my own curiosity, if it isn’t asking too much.

Scott

metalsadman

i don’t use it tbh, though kinda useful now that i got the chance to test it. i just did something like this to test the effect.

<div class="row q-pa-xs-md q-pa-sm-sm q-px-md-lg q-py-md-md bg-orange-1">
   <div class="text-h6 bg-blue-1">Hello world</div>
</div>

it’s a screen size aware css using media queries as you seen in the pic above. it’s a very large css file (5122 lines unminified) like the warning in the docs said, one of the reason why i don’t use it.

s.molinari

This was said by Dan, who is one of the devs, on the subject on Discord (was a coincidence a the subject of the CSS addons was being discussed).

you shouldn’t use the flex addons - it’s a huge css and in most cases the size never changes:

mobiles have only 2 widths, and it doesn’t change so frequent

desktops can change more frequently, but have a lot more processing power
try to use computed classes based on the screen plugin

Scott

No More Posting New Topics!

VUE CLI + Flex Addons