Yep, I know. So I first of all need another way to import it. (because I can’t even scope it the way I did it.)

.sry, not solved. But the system recognized my as spam, so I can’t change the title.
However, here is the sidenav component:

<template lang="pug">
    q-layout-drawer(
        v-model="leftDrawerOpen"
        overlay
        :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null")

      q-list(
        no-border
        link
        inset-delimiter)
        q-list-header Essential Links
        q-item(@click.native="openURL('http://quasar-framework.org')")
          q-item-side(icon="school")
          q-item-main(label="Docs" sublabel="quasar-framework.org")

</template>

<script>
import { openURL } from 'quasar'

export default {
    name: 'sidenav',
    props: ['leftDrawerOpen'],
    methods: {
        openURL
    }
}
</script>

I’d like to port some HTML that is styled with bulma into my quasar project.
All I did was installing bulma with node. (npm i bulma -S) and imported it in the script tag from the related component.

<script>
import 'bulma/css/bulma.css'
export default {
...
</script>

And it works for styling the elements in the component. But somehow it interfered with the styles of q-route-tab (alignment of the set icon attribute) in another component. (removing the import sets the interfered alignment back to default in the other component. )

So I think the import there is the wrong approach. Whats a better/ right way?

I want to use $grey-1 in my app.styl file. (and all the other variables)
How can I import those? (documentation says only how to uses them in *.vue files)

thanks

edit:: especially I want to apply helper classes like q-mx-sm

I found a sufficient solution:
-> put the q-list in a component (wrap the q-layout-drawer in a v-if element)

But its just more like a workaround.

I want to have my q-layout-drawer decoupled from my Layout.vue file, meaning moving it to a component.
You can assume the default quasar page of a vanilla quasar project.
And the modifications concern basic extraction, like so:
now having following in my Layout.vue file
under script:

import sidenav from './../components/q-layoutdrawer-moved-here.vue';
export default {
  name:'myLayout',
  components: {sidenav},
	data () {
		return {
			leftDrawerOpen: this.$q.platform.is.desktop
		}
	},

and in the template

<sidenav :leftDrawerOpen=leftDrawerOpen/>

which works… poorly
I get a warning that I should set up a computed proberty, because I am mutating a passed property for the v-model in the q-layout-drawer.
Also the drawer behaves not as expected I need click the menue button twice after initial loading of the page, before it does what it should do.

I’m looking for a solution that does not involve using Vuex and/ or that gets rid of the warning in the console. also an eventbus seems to be a more complicated solution, then it should be, but I’m not sure. …also the wierd doubleclick. …or some explaination about the v-model used on the q-layout-drawer, if I missed some easy solution because of my poor understanding of it.

Might be a lot I ask for, but maybe someone had this already solved.
I dont find the documentation for using open() on a ref as suggested here but there also was no v-model on q-drawer 2 years ago (I guess).

I’m fairly new, and I got some basic understanding issue.
I know about viewports, mediaqueries and the ideas about having things visible under certain conditions.
And I think I understand what is ment by the other visible conditions onthe documentation here.

But what does it mean to have my page wrapped by an Electron App? …should I do something like Electrion-UI in combination with Quasar? Or more in general: would it be good practice to integrate Quasar into an Electron App, to have superior desktop experiences for my users? …I’m a bit confused about the use-cases as well.

regards Z