I created a navigation drawer using Vuetify but none of the menus can be clicked.
Here's the code
<v-navigation-drawer v-model="drawer" temporary app class="primary">
<v-list>
<v-list-item v-for="link in links" :key="link.text" link :to="link.path">
<v-list-item-action>
<v-icon class="white--text">{{link.icon}}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title class="white--text">{{link.text}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
<template v-slot:append>
<div class="pa-2">
<v-btn block>
Sign out
<v-icon right>mdi-exit-to-app</v-icon>
</v-btn>
</div>
</template>
</v-navigation-drawer>
data() {
return {
drawer: false,
links: [
{icon: 'mdi-view-dashboard', text: 'Dashboard', path: '/'},
{icon: 'mdi-application-edit', text: 'Settings', path: '/settings'}
]
}
}
I have checked the routes in index.js and there is nothing wrong there. Also, if I go to /settings page, the Setting menu will be highlighted (active) but still cannot be clicked. How to fix this?
Solved it! The Navbar component was nested in a v-app-bar and somehow it affected the navbar. So I only removed the v-app-bar and the navigation drawer works perfectly fine!
Related
I'm currently using Vue and vuetify to build a navigation drawer container. I have just about what I am looking for... However, when I click on the drawer icon, I lose the Title and the drawer icon. I want those to both stay there even when the drawer is open.
Is there any way to achieve this by using simply vuetify? I can obviously add a custom title in and then add an icon in as well. Here is my code and here are some screenshots to better help with what I'm trying to achieve. I've looked through the documentation, and I've also looked at the props for the navigation drawer. Hoping someone has a good workaround.
code:
<template>
<v-card height="100%" flat>
<v-app-bar elevation="0" class="transparent">
<v-app-bar-nav-icon #click="drawer = true"></v-app-bar-nav-icon>
<v-toolbar-title>{{ Title }}</v-toolbar-title>
</v-app-bar>
<v-navigation-drawer prepend v-model="drawer" absolute temporary>
<v-list nav dense>
<v-list-item-group
v-model="group"
active-class="blue--text text--accent-4"
>
<v-list-item #click="setTitle(TitleList[0])" to="/home">
<v-list-item-icon>
<v-icon>mdi-home</v-icon>
</v-list-item-icon>
<v-list-item-title>Home</v-list-item-title>
</v-list-item>
<v-list-item #click="setTitle(TitleList[1])" to="/about">
<v-list-item-icon>
<v-icon>mdi-account</v-icon>
</v-list-item-icon>
<v-list-item-title>About</v-list-item-title>
</v-list-item>
<v-list-item #click="setTitle(TitleList[2])" to="/investments">
<v-list-item-icon>
<v-icon>mdi-currency-usd</v-icon>
</v-list-item-icon>
<v-list-item-title>Investments</v-list-item-title>
</v-list-item>
<v-list-item #click="setTitle(TitleList[3])" to="/contact">
<v-list-item-icon>
<v-icon>mdi-email</v-icon>
</v-list-item-icon>
<v-list-item-title>Contact</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
<v-divider></v-divider>
<router-view></router-view>
</v-card>
</template>
<script>
export default {
data() {
return {
drawer: false,
group: null,
Title: "Home",
TitleList: ["Home", "About", "Investments", "Contact"],
};
},
methods: {
setTitle(value) {
this.Title = value;
},
},
};
</script>
I think you're problem will be solved if do not passing absolute prop for v-navigation-drawer.
I'm having a difficult time setting the height to match size of the browser window and setting the color of vuetify's card.
I've copied the example code from vuetiy as show below:
<template>
<v-card
class="mx-auto"
height="400"
width="256"
>
<v-navigation-drawer
class="deep-purple accent-4"
dark
permanent
>
<v-list>
<v-list-item
v-for="item in items"
:key="item.title"
link
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
<template v-slot:append>
<div class="pa-2">
<v-btn block>
Logout
</v-btn>
</div>
</template>
</v-navigation-drawer>
</v-card>
</template>
<script>
export default {
data () {
return {
items: [
{ title: 'Dashboard', icon: 'mdi-view-dashboard' },
{ title: 'Account', icon: 'mdi-account-box' },
{ title: 'Admin', icon: 'mdi-gavel' },
],
}
},
}
</script>
But the colour doesn't show up as purple. Instead it's showing as dark grey. If I remove the dark attribute in v-navigation-drawer then it just appears white.
Changing the v-card's height to 100% seems to just change the card's height to 100 instead of 100%. I'm really confused as from what I can see here, How to set the height of vuetify card, having
<v-card
height=100%
>
would have fixed the issue but it doesn't. I must be missing something simple?
So I did end up able to modify change the height and the colour although I'm not sure why it can't be done within the card tag.
In the navigation drawer I made some changes as shown below and the color as well as the height changed.
<v-navigation-drawer
class="accent-4"
width="200"
height="100vh"
color="rgba(56, 95, 115,0.5)"
permanent
>
I also removed the v-card tag completely.
Desktop Mode Image
Mobile Mode Image
The "clipped" option works fine in desktop mode.
However, in mobile mode, menu items are hidden by the app-bar. ("Dashboard" item is hidden.)
How can I put the navigation-drawer under the app-bar even in mobile mode?
My Source:
<template>
<v-app>
<v-app-bar app color="primary" dark clipped-left>
<v-app-bar-nav-icon #click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
</v-app-bar>
<v-navigation-drawer app v-model="drawer" absolute clipped>
<v-list nav>
<v-list-item v-for="item in items" :key="item.title" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-main> </v-main>
</v-app>
</template>
<script>
export default {
name: "App",
components: {},
data: () => ({
drawer: null,
items: [
{ title: 'Dashboard', icon: 'mdi-view-dashboard' },
{ title: 'Photos', icon: 'mdi-image' },
{ title: 'About', icon: 'mdi-help-box' },
]
}),
};
</script>
This worked for me.
<v-app id="inspire">
<v-overlay
:value="drawer"
z-index="4"
>
</v-overlay>
<v-navigation-drawer
v-model="drawer"
app
clipped
hide-overlay
:style="{ top: $vuetify.application.top + 'px', zIndex: 4 }"
>
</v-navigation-drawer>
<v-app-bar
app
clipped-left
dark
color="#447fa6"
>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
</v-app>
Codepen
Below code worked for me.
<v-app-bar app clipped-left>
<v-app-bar-nav-icon v-if="!permanent" #click.stop="drawer = !drawer" />
<v-toolbar-title v-text="title" />
</v-app-bar>
<v-navigation-drawer
v-model="drawer"
:permanent="permanent"
expand-on-hover
clipped
app
>
...
</v-navigation-drawer>
I am able to do what I want using this link Vuetify 2 toolbar ans 1 navigation drawer with 1 toolbar above the navigation drawer
Adding :mobile-breakpoint="0" to navigation drawer fixes the issue.
No mobile styling is added to the navigation drawer and it works same as on desktop.
EX:
<v-navigation-drawer
app
v-model="drawerOpen"
:clipped="true"
:mobile-breakpoint="0"
>...
Try to remove app from <v-app-bar app>.
I don't know why, but for me it is working.
these changes made it work for me:
<v-app-bar :clipped-left="true" :clipped-right="true"></v-app-bar>
depending on what you need and which side you want to add the navigation drawer
then in navigation drawer add the clipped attribute as well
<v-navigation-drawer :clipped="true"></v-navigation-drawer>
i'm a beginner in Vuetify , and I'm develloping my first application, and my question is :
How by clicking on the "HEREEEEEEEEEEEEEEEEE" button in the navbar list the programm will route to a file called pass.vue (which is in the same folder ) ?
<template>
<div>
<v-toolbar
dark
prominent
src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Workers</v-toolbar-title>
</v-toolbar>
<v-navigation-drawer app
v-model="drawer"
class="deep-purple accent-4"
absolute
bottom
temporary>
<v-list
nav
dense
>
<v-list-item-group
v-model="group"
active-class="deep-purple--text text--accent-4"
>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-account</v-icon>
<router-view/>
</v-list-item-icon>
<v-list-item-title router:to="/pass.vue">HEREEEEEEEEEEEEEEEEE</v-list-item-title>
</v-list-item>
<v-list-item >
<v-list-item-icon>
<v-icon>mdi-help</v-icon>
</v-list-item-icon>
<v-list-item-title>Help</v-list-item-title>
</v-list-item>
<v-list-item >
<v-list-item-icon>
<v-icon>mdi-alarm</v-icon>
</v-list-item-icon>
<v-list-item-title>Timetable</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
</div>
</template>
Thank you !
I think you are confusing Vue with pure HTML. For Vue you need to use the Vue-Router library to create routes.
For Vuetify Components, or any components in general, remember that the :to creates a clickable link, so you would want to put it in a top level component which you want your user to click ex. <v-list-item> reather than v-list-item-title
Now for your particular case, your template should look like so:
<v-list-item v-for="(item,index) in items" :key="index" :to="{name: item.link}">
<v-list-item-content>
<v-list-item-title>
{{ item.text }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
Followed by:
...
data(){
return{
items:{
text: 'HEREEEEEEEEEEEEEEEEE',
link: 'pass' // this will be a named router link
}
}
...
Now in a seperate file for your router, which if you add using the vue-cli (recommended) will be created and called router.js, add the following
{
path: '/pass',
name: 'pass', // same as passed in component
component: () => import('#/path/to/file/pass.vue')
}
Now, this ,ight be overwhelming at first, but it's actually very easy. I recommend you checkout Vue-Router's Documentation before you get back to it.
Instead of item title you can use :to in v-list-item and name must be same as defined in your routes.
<v-list-item :to="{name:'pass'}">
<v-list-item-title>HEREEEEEEEEEEEEEEEEE</v-list-item-title>
</v-list-item>
I do it in this way, note that I use :to on v-list-item instead of v-list-item-title.
<v-list-item v-for="item in items" :key="item.text" :to="item.link">
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ item.text }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
Example of item.link
// url
:to="/profile"
// path of Location obj
:to="{ path: '/profile' }"
// a more detail Location obj
:to="{ name: 'profile2', params: { userId: 123 }}"
You can either pass a string url to :to or a Location. Make sure you've declare this route in your router like below:
const routes = [
{
path: '/profile',
name: 'profile',
component: Profile
},
{
path: '/profile2/:userId',
name: 'profile2',
component: Profile2
}
];
Working with Vuetify and have problem with the submenu to a a dropdown menu.
Everything works as it should, except for the main dropdown menu that does not closes when click on a submenu item. The submenu closes as it should.
1. The dropdown menu open on click
2. The submenu open on hover
3. If I click on a main menu item, the whole menu close. I want it to stay open as I don't have any router link for the main menu items, only for the submenu items.
4. If I click on a submenu item, I get routed to the new page, but the main menu does not close, only the submenu. Have to click a second time outside the dropdown box to close it.
I have tried with "close-on-click" and "close-on-content-click" without sucsess.
<v-menu offset-y :close-on-select="true">
<v-btn flat slot="activator">
<v-icon left>expand_more</v-icon>
<span>Our Adventures</span>
</v-btn>
<v-list class="py-0">
<v-list-tile>
<router-link to="/adventures">
<v-list-tile-title class="black--text plain-text">All our adventures</v-list-tile-title>
</router-link>
</v-list-tile>
</v-list>
<v-list v-for="item in items" :key="item.title" class="text-xs-left py-0">
<v-menu offset-x right open-on-hover>
<v-list-tile slot="activator">
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
<v-list dense>
<v-list-tile
v-for="subItem in item.items"
:key="subItem.title"
#click="close"
router
:to="subItem.link"
>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list>
</v-menu>
and the related script
items: [
{
title: "Nordic skating",
items: [
{ title: "Open tour", link: "/adventures/skating/weekend" },
{ title: "Private tour", link: "/adventures/skating/private" }
]
},
{
title: "Kayak",
items: [
{ title: "Open tour", link: "/adventures/kayak/weekend" },
{ title: "Private tour", link: "/adventures/kayak/private" }
]
},
{
title: "Hiking",
items: [
{ title: "Open tour", link: "/adventures/hiking/eightdays" },
{ title: "Private tour", link: "/adventures/hiking/private" }
]
},
{
title: "Cross country skiing",
items: [
{ title: "Open tour", link: "/adventures/skiing/weekend" },
{ title: "Private tour", link: "/adventures/skiing/private" },
{
title: "Winter adventures",
link: "/adventures/skiing/adventures"
}
]
}
],
Solved the issue of parentMenu not closing by using ref and the isActive property.
Steps:
Add ref = "parentMenuRef" to the parent v-menu
In the childMenu items, add #click="$refs.parentMenuRef.isActive = false"
This will close the parentMenu along with the childMenu when the childMenu item is clicked. Original answer
Remove the "open-on-hover" then it will work as it should be. Open-on-hover gives effect close window on 2 time click. I had same issue and no success. I would suggest you to custom menu instead of Vuetify menu.
You have not mentioned Vuetify version, but I assume it's 1.x.
Here's what I have done in my projects:
In top level v-menu, close-on-content-click="true". This prop is true by default, so, you don't need to add it.
The inner v-menu will have open-on-hover, which you code already has.
Moved the slot="activator" to a template.
On the activator of inner v-menu, I have added #click.stop.prevent
So, your code should look like:
<v-menu offset-y>
<v-btn flat slot="activator">
<v-icon left>expand_more</v-icon>
<span>Our Adventures</span>
</v-btn>
<v-list class="py-0">
<v-list-tile>
<router-link to="/adventures">
<v-list-tile-title class="black--text plain-text">All our adventures</v-list-tile-title>
</router-link>
</v-list-tile>
</v-list>
<v-list v-for="item in items" :key="item.title" class="text-xs-left py-0">
<v-menu offset-x right open-on-hover>
<template slot="activator">
<v-list-tile
#click.stop.prevent
>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
<template>
<v-list dense>
<v-list-tile
v-for="subItem in item.items"
:key="subItem.title"
#click="close"
router
:to="subItem.link"
>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list>
</v-menu>
Side Note: slot attribute is deprecated in Vue 2.6. Please consider using v-slot directive. https://v2.vuejs.org/v2/guide/components-slots.html