Quasar Framework

javierabadia

Hi,

We are building a view component that needs a couple of medium-complexity modal dialogs for selecting options.

We are struggling to find a way to correctly encapsulate the logic for the modals in their own components: any advice?

OPTION A:

MainView.vue
<template>
    ... main view markup
    <my-options-modal>
    </my-options-modal>
</template>

MyOptionsModal.vue
<template>
  <q-modal>
      ... modal content here
  </q-modal>
</template>

OPTION B:

MainView.vue
<template>
    ... main view markup
    <q-modal>
      <my-options-modal-content>
      </my-options-modal-content>
    </q-modal>
</template>

MyOptionsModalContent.vue
<template>
      ... modal content here
</template>

Option A seems cleaner from the MainView point of view, but then the logic and code to open and close the modal is a bit too complex, because MyOptionsModal has to be a bridge between MainView and QModal.

Option B simplifies the opening/closing handling, but then the encapsulation is not so clean.

Any advice? Any best practices on how to create complex modals with logic inside?

Thanks!

javierabadia

Hi,

In ‘dev’ mode, my component styles always come after the quasar styles. They take precedence.
However in ‘build’ mode, quasar styles are compiled after the style in my components.

This causes problems in code like this:

.my-card-style {
margin-bottom: 50px;
}

because in ‘build’ mode this custom style is included before quasar styles and therefore overriden by .card styles

Alternatively, how can I modify the config of webpack to put quasar css styles in it’s own separate bundle?

Thanks!

javierabadia

Hi,

(working with v0.13.4)

Is there a way to style q-tooltips? I’d like to change the background color and font-size

<q-tooltip class=“bg-primary”>
my tooltip text here
</q-tooltip>

doesn’t work, because the span.q-tooltip element doesn’t get the ‘bg-primary’ class once inserted as a child of the <body>

Thanks!

javierabadia

We already have a Django + AngularJS app running and we want to migrate client side to Vue.js (we use django-rest-framework btw)

The integration I’m more interested in is the webpack build process and developer experience. In the example that I mentioned above (https://github.com/rokups/hello-vue-django) they use a django module to detect when webpack has finished compiling and update the django templates with the bundle names just created. They also support hot module reloading: django serves templates through one port (lets say 8000) and webpack communicates with the running app through another port (8001) to push the module replacements.

My main difficulty here is that Quasar’s webpack configuration structure is really different: I need to understand it and see where I need to add what, and before going that way I’d rather ask for others experience before.

javierabadia

Hi,

I want to create a fullstack app with Django + Quasar.
Ideally I’d like to keep the developer experience (webpack, hot reloading) while serving everything from a Django app
Is there any reference I can use?

I’ve been successful integrating Django + Vue such as in https://github.com/rokups/hello-vue-django

Awesome framework btw!

javierabadia

great to know, thanks!

javierabadia

Hi,

With the responsive grid layout classes (width-1of5, etc) I’m wondering why there is a limit of 5 columns.
Doesn’t it make sense to have elements that are width-1of12 ?

How would I create such a layout?

Thanks!

javierabadia

@javierabadia

Posts made by javierabadia