I am seeking assistance with Quasar, I am completely new to coding and JS/Quasar framework. I was wondering if the out of box qdrawer can be tweaked so when launching the page, instead of having it opened by default, to have it closed instead and clicking the hamburger button will open it.
Mainlayout.vue:
<q-drawer v-model="leftDrawerOpen" show-if-above bordered> <---- In question
<q-list>
<q-item-label header> Essential List </q-item-label>
<EssentialLink
v-for="link in essentialLinks"
:key="link.title"
v-bind="link"
/>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
I attempted to rename to leftDrawerClosed but no success
The element q-drawer uses several mechanisms to be opened or closed. First and foremost the binding to the variable leftDrawerOpen is essential. You may consider initializing it to false in the setup section. However, as the q-drawer element also contains the show-if-above directive, you should be aware that the state of this variable is ignored for larger screens (see the API docs: https://quasar.dev/layout/drawer). If the drawer should be closed regardless of screen size you should in addition remove this directive.
Related
I've seen some threads on how to remove the leaflet attribution in the bottom right.
It seems like the creators of leaflet have no issue with it, so to save space I'd like to remove mine.
Here is a thread on it, but no answers relate to Vue unfortunately.
https://gis.stackexchange.com/questions/192088/how-to-remove-attribution-in-leaflet
I'm using nuxt but would greatly appreciate help if it's directed toward Vue.
The l-tile-layer has an attribute-prop which indeed helps me add attributions, but removing it made me realize the attribution seem to be connected to the l-map component as it's visible with no tile layer.
TLDR: I want to remove the "Leaflet"
Suggestions?
With the Leaflet API, it is removed by this config.
https://leafletjs.com/reference-1.7.1.html#map-attributioncontrol
L.map('map', {
attributionControl: false
}
With vue2-leaflet it seems it is possible to do the same with the options prop
https://vue2-leaflet.netlify.app/components/LMap.html#props
<l-map
:options="{attributionControl: false}"
>
...
</l-map>
As Kunukn pointed out (and which answer also kindly was provided by mikeu here: Link to github
The solution for Vue is to add the attributionControl:false option.
However, my requirement was to keep my other attributions, but fortunately after experimenting a tiny bit I just had to add the l-control-attribution component with an empty prefix.
In HTML
<l-map :zoom="8" :center="[59.3293, 18.0686]" :options="{ attributionControl: false }">
<l-tile-layer url="http://localhost:8080/styles/mytheme/{z}/{x}/{y}.webp" :attribution=attribution>
</l-tile-layer>
<l-control-attribution position="bottomright" prefix=""></l-control-attribution>
</l-map>
In scripts
data(){
return{
attribution:
'©OpenMapTiles ©OpenStreetMap contributors'
}
}
My current Vue app is laid out as follows:
Such that login Vue would be live under VContent, and aspects of the header and nav are be disabled based on auth state. For example, logout button if store.isAuthenticaaed. See below:
If a Register exists on the login page leading to a registration Vue, how would I break that Vue out of the parent App.vue as to not display the header or nav at all? Should I move my header/wrapper down a level and if so how?
The below answer is totally based on how I understand your requirement, happy to correct if the assumptions are wrong.
Redirecting to which page can be handled at the router configuration.
As per your layout, I can see you have
<VApp>
<VBar />
<VContent >
<router-view />
</VContent>
<VNavigationDrawer />
</VApp>
Now, your store knows whether the user is authenticated or not.
So Why not simply remove <VBar /> and <VNavigation /> using v-if. However, you need to make sure that your state is having the correct state at the initial render.
I can simply create a computed property stating
showBarAndNavigation () {
return store.isAuthenticated && this.$route.name === 'Login' && // anymore handlers
}
<VApp>
<VBar v-if="showBarAndNavigation" />
<VContent >
<router-view />
</VContent>
<VNavigationDrawer v-if="showBarAndNavigation" />
</VApp>
I am working on a Vue.js application that I am almost done, one major bug left. The bug/issue is that when you go to /login and login to the site you get redirected via a router push (tried replace too) and when this happens I want to render the whole dashboard. Currently since in my App.vue file the router view is a different part it only renders the dashboard info part and not my header or sidebar.
Pretty much imagine a dashboard without a header or sidebar. That's what's rendering. I'd be okay if I could do something like F5 does because then it all would load correctly though taking up to 2 seconds longer on login which is okay by me.
My App.vue file template code
<template>
<div class="fade page-sidebar-fixed page-header-fixed show page-container" v-if="!pageOptions.pageEmpty" v-bind:class="{
'page-sidebar-minified': pageOptions.pageSidebarMinified,
'page-content-full-height': pageOptions.pageContentFullHeight,
'page-with-top-menu': pageOptions.pageWithTopMenu,
'page-sidebar-toggled': pageOptions.pageMobileSidebarToggled,
'has-scroll': pageOptions.pageBodyScrollTop
}">
<Header />
<Sidebar v-if="!pageOptions.pageWithoutSidebar" />
<div id="content" class="content" v-bind:class="{ 'content-full-width': pageOptions.pageContentFullWidth, 'content-inverse-mode': pageOptions.pageContentInverseMode }">
<router-view></router-view>
</div>
</div>
<div v-else>
<router-view></router-view>
</div>
</template>
Looks like I have resolved my issue, it comes from vue-router and how I am doing that if statement in my template code. So in that code I am checking a boolean value then choosing which view to render. So I had though on all of my auth pages I set the value correctly on exit. Turns out not...
This was in my Login.vue file, idea was to have on an exit of the route that it would change the boolean to false which would let me render it right. This was something I did initally but had forgotten about till about 20 minutes ago.
Upon checking this I found the value was not being changed for some reason. So as a work around in the created part of my Dashboard.vue file I set the value to false explicitly
Login.vue
beforeRouteLeave (to, from, next) {
PageOptions.pageEmpty = false;
next();
},
Dashboard.vue
created() {
PageOptions.pageEmpty = false;
...
}
The main idea is to have several base pages each one of them is operate with its own set of internal views.
You have to redirect user to another view, which is the one and only active view and this view can contains sidebar header and main part that also contains router-view, and then! you load any needed components in it.
You have to have something like that:
App component is only contains router view tag and any other pages are load into this.
The routes structure then looks like that:
As you can see, there are two base views load in App view. And then the base view can has a lot of children. The level of nested routes is up to you. Here is the contents of my app Home view:
And the MainContent component which is contains router view only:
The good example of project structure is the one generated with vue-cli. You can use it to simplify dev process with a lot of benefits and good practice solutions.
I am using vue.js 2.0 and have a problem.
I have a custom component which is loaded with the page, but the element that uses the component isn't used until a button is pressed, at that point the HTML is loaded and added to the DOM in a slide panel (whose content is dynamic).
Edit: It might be usuful to know the slide panel is dynamicly created using the jquery-slidepanel plugin... meaning I can't put a a placeholer in it like this:
<div id="slidePanel">
<component v-bind:is="test-thing">
<DYNAMIC CONTENT>
</component>
</div>
My problem is the instead on the component rendering the new content correctly I just see the {{ someitem }} all over the place.
here is a jsFiddle demonstrating what I am talking about: jsfiddle example
I am using gmaps4jsf jar file for getting dynamic marker on google map but once i click on submit button then getting whole data on web page, evem map also with dynamic marker but map marker is coming after refresh the page.
jsf code:
<m:map id="map" width="650px" height="450px" latitude="#{map.latitude}" longitude="#{map.longitude}" enableScrollWheelZoom="true" zoom="9">
<m:marker latitude="#{point.latitude}" longitude="#{point.longitude}" >
<m:htmlInformationWindow htmlText="Click me!" />
</m:marker>
</m:map>
<p:column>
<p:commandButton value="Display" action="#{map.display}" update="form"/>
</p:column>
jsf component is refreshing fine only problem with google map..
You should use partiallyTriggered="true" for refresh the google map. as you said you are using gmaps4jsf jar so it will help and i'm updating your code so you can find here
<m:map id="map" partiallyTriggered="true" width="650px" height="450px" latitude="#{map.latitude}" longitude="#{map.longitude}" enableScrollWheelZoom="true" zoom="9">
<m:marker latitude="#{point.latitude}" longitude="#{point.longitude}" >
<m:htmlInformationWindow htmlText="Click me!" />
</m:marker>
</m:map>