aha, interesting. I didnt knew that.

@acros From the docs:

// row Object property to determine value for this column field: 'name', // OR field: row => row.some.nested.prop,

So you would use:

field: row => row.properties.name,

@acros

Here’s a codepen
https://codepen.io/ontwikkelfabriek/pen/ExgagbB

I used this demo:
https://quasar.dev/vue-components/table#Body-slots

@acros You can add the click event to the q-tr directly, like this:

<q-tr :props="props" :class="tableFormat(props.row)" @click="onRowClick($event, props.row)">

The @row-click event has no effect if you manually override the table row with the slot, so you can remove that from the q-table

@acros, as @Hawkeye64 mentioned - in my case it’s [ in App.vue ]

created () { this.$q.iconMapFn = (iconName) => { if (iconName.startsWith('chevron_left') === true) { return { cls: 'fal fa-chevron-left' } } if (iconName.startsWith('chevron_right') === true) { return { cls: 'fal fa-chevron-right' } } } },

@acros

You can see what becomes of q-layout in chrome inspector.

Screen Shot 2020-11-09 at 16.19.17.png

If you use q-layout (you are using Quasar) you will have to put elements inside it which are compatible with q-layout. It only make sense that way.

As you found out a single un-styled div isn’t compatible. While it isn’t impossible to make it compatible … you will likely going to rebuild q-headerin the process. And this extra work you are doing for what ?

So the options are

a, Style your custom component so it is compatible with q-layout.
b, Create your own layout and not use q-layout. I think you will miss out on a lot. q-drawer to start with. Unless of course you make your layout compatible with q-drawer.
c, the best IMO is to use q-layout with the already provided compatible elements after all why reinvent the wheel.

@perik for example like this:

Assuming, you host your own fonts in /fonts subdirectory. You can download them from google fonts for example or any other font source/converter. You will need them in woff and woff2 format.

in app.styl insert this:

@import 'myfonts.styl' @import 'myrules.styl'

Then in myfonts.styl you can insert this font variation declarations. Code is generated from this tool:

https://google-webfonts-helper.herokuapp.com/fonts/ubuntu?subsets=latin-ext,latin

/* ubuntu-300 - latin_latin-ext */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 300; src: local('Ubuntu Light'), local('Ubuntu-Light'), url('/fonts/ubuntu-v13-latin_latin-ext-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/ubuntu-v13-latin_latin-ext-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* ubuntu-300italic - latin_latin-ext */ @font-face { font-family: 'Ubuntu'; font-style: italic; font-weight: 300; src: local('Ubuntu Light Italic'), local('Ubuntu-LightItalic'), url('/fonts/ubuntu-v13-latin_latin-ext-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/ubuntu-v13-latin_latin-ext-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* ubuntu-regular - latin_latin-ext */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url('/fonts/ubuntu-v13-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/ubuntu-v13-latin_latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* ubuntu-italic - latin_latin-ext */ @font-face { font-family: 'Ubuntu'; font-style: italic; font-weight: 400; src: local('Ubuntu Italic'), local('Ubuntu-Italic'), url('/fonts/ubuntu-v13-latin_latin-ext-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/ubuntu-v13-latin_latin-ext-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* ubuntu-500 - latin_latin-ext */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url('/fonts/ubuntu-v13-latin_latin-ext-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/ubuntu-v13-latin_latin-ext-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* ubuntu-500italic - latin_latin-ext */ @font-face { font-family: 'Ubuntu'; font-style: italic; font-weight: 500; src: local('Ubuntu Medium Italic'), local('Ubuntu-MediumItalic'), url('/fonts/ubuntu-v13-latin_latin-ext-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/ubuntu-v13-latin_latin-ext-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* ubuntu-700 - latin_latin-ext */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('/fonts/ubuntu-v13-latin_latin-ext-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/ubuntu-v13-latin_latin-ext-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* ubuntu-700italic - latin_latin-ext */ @font-face { font-family: 'Ubuntu'; font-style: italic; font-weight: 700; src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url('/fonts/ubuntu-v13-latin_latin-ext-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/ubuntu-v13-latin_latin-ext-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

and then in myrules.styl you insert this:

// local font references .font-Ubuntu font-family: 'Ubuntu', sans-serif

from now you can use those fonts as any fonts for example:

<q-page class="font-Ubuntu"> ... </q-page>

@perik I inherited a project like this, where Quasar was added to a vuejs project. At some point I needed to install a Quasar extension, which wouldn’t install from the vuejs directory.

Eventually muscled up, created a new quasar project and started porting over the files from the vuejs directory. Was easier than I thought and wish I had done so sooner.

Basically after I ran quasar create I copied over all files from src and was careful about not to overwrite any of the Quasar generated files. Think I had to do some work on boot, but that was it for the src directory. Next I scanned package.json in the vuejs project and did a “yarn add” on the Quasar project which saved any modules that were missing.

Don’t recall what I did with the routes, but think I recreated them rather than copy over the vuejs routes.