Or … even fetch if you like to try a clean interface, that is supposed to be a future standard.

Thanks, this make sense as long as the data list is somewhat small ( < 100), but if you have lists that is very large (10K) and like to range load data (to keep memory load on both the client and the backend down) and therefor need to make the provider (database) do the sorting and filtering we need to do something else.

That is why it could be nice with a data store interface, like the one suggested as we could model any data provider using something like this.

Inspired by things like dstore.

As this is really based on vue-router i guess you need to tell the router that this is a sub route, inside your router.js file.

I quess (I am quite new to Quasar too) that you still need a route setup that indicate subRoutes children in the route.js file. If you don’t, i quess the router only replace the topmost router-view.

I may have misunderstood the vue-router but I am not sure it automatically can quess the route context, you have to describe it in the mapping … as far as i understand it.

@s.molinari Sorry, and now fixed

@dgk It alway wise to be careful when starting on an new adventure

The Quasar.start, as far as I understand it, is a way to make sure that some of the mobile platforms are properly initialized (when needed), no magic just a way to give Quasar a change to init som stuff early. If you just make sure this is in you startup function, there is really not much to it.

Quasar is just components, BUT the layout filosofi here is to use the same layout on different platforms, and therefor quasar is able to help you most if it controls things like startup and layout (q-layout).

Regarding webpack … it is true that the cli version makes a rather large Webpack2 setup, but this is NOT at all necessary, I have a single file version using webpack 1.x (and i also use typescript) and this works just fine. What you need as a minimum, is stylus, babel and a few defines (PROD, DEV and __THEME).

The quasar build utility is just a wrapper, nothing magic just trying to be nice

So I understand you concern I have just been over all this myself

@druppy To answer my own post, when making a modal that holds another q-layout tag inside, the q-modal need to specify a size of the modal, using content-css property.

I am sure there is some logic to that, but not in my head at the moment

Just as a note … some of the browsers support’s this API, see : https://www.tutorialspoint.com/html5/html5_web_sql.htm

And then the workflow becomes much more light.

@s.molinari I think q-layout uses 100% of parent, and parent i as big as the child dictates … and then both got confused

content-css just apply the style to the div modal wrapper, so no real magic .

@s.molinari I am not sure that it is the case, it could be related to the concept of what is considered “light” and “natural”, in a component model that has its roots in a more and less pure html API model.

That it is also hard to model in a syntax strong environment, makes it even more worrying, in my perspective.

When we start to use Quesar along with tsx files (I am working on this), I thinks this will be even more clear, as these component properties can be type defined in typescript, but VueJS components ($refs) still need some kind of unsafe casting.

It is more a question of type safety or not, I guess … one that will be constant between Javascript and Typescript in the years to come

Hi …

We have build a simple navigation slot inside q-layout using a dynamic structure much like yours, like this :

 <q-tabs slot="navigation" class="gt-sm" default>
     <q-tab v-for="menuLink in menuLinks" :route="menuLink.path" :icon="menuLink.icon" :exact='menuLink.exact'>
                {{menuLink.name}}
     </q-tab>
 </q-tabs>

And this works nicly, but there are 3 things to notice :

• it must be a navigation slot insite q-layout
• ours use route not name (don’t know if both works)
• carefully consider the use of prop exact

Hope this helps

Interesting idea, to use canvas as resize tool and output as URL encoding …

To my best of knowledge, this needs to be done on you server (imagemagick is really helpful here), but scaling it down to a more manageable size.

Really nice you found a solution, sometimes this is the most important part.

But we may need to see if we could find a more streamlined solution in the future

I can’t say much about the css part of your questions, but I can see that Onsen UI uses real WebComponent’s. This simple fact could answer the performance part, as this has fairly good support in modern mobile browsers.

Quasar uses VueJs as the component layer, and this will have more overhead than on a browser that uses Onsen UI and have support for native WebComponent. But Quasar supports more browsers also in the desktop area (IE11+), and I quess that have a price

But again, I am just guessing

I quess you also need to add the QLayout as a component, as this is needed by 0.14

Try to look at datetime under doc, you will also find a references to the format it uses.

The point is that in 0.14 Quasar removes moment from its dependencies, and uses native JavaScript Date class to make it possible to slim down the size of a build (tree shaking).

I will recommend you to read this it will tell you what you need to know.

It looks ok to me, is this in a single vue file ?

Hi, I tried to understand how Quasar sets things up for the Stylus when loading styles, like platform detection.

I know it makes a mat and ios class depending on the scheme selected, but I can’t find any CSS class that is related to the platform detection and not just the scheme. It this true (btw. this info really need to be in the “Platform detect” doc) ?

The reason for this is that we, in one project, don’t want to change style on IOS (at the moment), but we really like to compensate for IOS in the more generic CSS (like iframes).

This is done using this column format

The col-column scoped slot is a brillian Vue feature, used inside DataTable, that will allow you for highly customized cell rendering.

Make a column called action and then make a :

<template slot='col-action' scope='cell'>
    <button @click='on_edit(cell)`><i>edit</i></button>
</template>

Hope this helps

Typescript work with vue-class-component as long as you enable it in the tsconfig.json file. But this error looks like the babel decorator feature is not properly installed in webpack (I am no expert on babel).