Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 3 years ago.
Improve this question
I am currently using vuetify 1.5.16, and when I use npm to upgrade to 2.0.
The application won't work anymore.
You could find the code from below, it's a basic drawer content toolbar layout which now couldn't be rendered.
I've looked into the official document, I didn't find any upgrade guide or deprecated warning.
new Vue({
el: '#app',
data: () => ({
drawer: {
// sets the open status of the drawer
open: true,
// sets if the drawer is shown above (false) or below (true) the toolbar
clipped: false,
// sets if the drawer is CSS positioned as 'fixed'
fixed: false,
// sets if the drawer remains visible all the time (true) or not (false)
permanent: true,
// sets the drawer to the mini variant, showing only icons, of itself (true)
// or showing the full drawer (false)
mini: true
},
toolbar: {
//
fixed: true,
// sets if the toolbar contents is leaving space for drawer (false) or not (true)
clippedLeft: false
},
footer: {
// sets the CSS position of the footer
fixed: true,
// sets if the footer is full width (true) or gives space to the drawer (false)
clippedLeft: true
}
}),
props: {
source: String
},
methods: {
// changes the drawer to permanent
makeDrawerPermanent () {
this.drawer.permanent = true
// set the clipped state of the drawer and toolbar
this.drawer.clipped = false
this.toolbar.clippedLeft = false
},
// toggles the drawer variant (mini/full)
toggleMiniDrawer () {
this.drawer.mini = !this.drawer.mini
},
// toggles the drawer type (permanent vs temporary) or shows/hides the drawer
toggleDrawer () {
if (this.drawer.permanent) {
this.drawer.permanent = !this.drawer.permanent
// set the clipped state of the drawer and toolbar
this.drawer.clipped = true
this.toolbar.clippedLeft = true
} else {
// normal drawer
this.drawer.open = !this.drawer.open
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire" dark>
<v-navigation-drawer
:clipped="drawer.clipped"
:fixed="drawer.fixed"
:permanent="drawer.permanent"
:mini-variant="drawer.mini"
v-model="drawer.open"
app
>
<v-list>
<v-list-tile
v-if="!drawer.permanent"
#click="makeDrawerPermanent">
<v-list-tile-action><v-icon>chevron_right</v-icon></v-list-tile-action>
<v-list-tile-content><v-list-tile-title>Static Drawer</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile #click="toggleMiniDrawer">
<v-list-tile-action><v-icon>aspect_ratio</v-icon></v-list-tile-action>
<v-list-tile-content><v-list-tile-title>Mini Drawer</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-divider></v-divider>
<v-list-tile #click="">
<v-list-tile-action><v-icon>dashboard</v-icon></v-list-tile-action>
<v-list-tile-content><v-list-tile-title>Dashboard</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar
app
:fixed="toolbar.fixed"
:clipped-left="toolbar.clippedLeft"
>
<v-toolbar-side-icon
#click.stop="toggleDrawer"
></v-toolbar-side-icon>
<v-toolbar-title>Vuetify Drawer Example</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center align-center>
<v-flex shrink>
<h2>Vuetify Drawer example</h2>
<p>Showing how to set the navigation drawer into different positions and styles</p>
<p>This took me a hour to comprehend properly, so this pen may save others some time</p>
<p>As always, if you can do it better, then please fork it and let me know</p>
<v-tooltip right>
<v-btn
icon
large
:href="source"
target="_blank"
slot="activator"
>
<v-icon large>code</v-icon>
</v-btn>
<span>Source</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer app :fixed="footer.fixed" :clipped-left="footer.clippedLeft">
<span class="caption mx-3">© 2018, MIT LICENSE - Free to use and learn from</span>
</v-footer>
</v-app>
</div>
the upgrade guide is available in the gitlab release notes
https://github.com/vuetifyjs/vuetify/releases?after=v2.0.3#user-content-upgrade-guide
looks like you're just missing the new vuetify instantiation
new Vue({
el: '#app',
vuetify: new Vuetify(),
//...
})
Related
I want to control the <v-navigation-drawer> by mobile-breakpoint status.
When it is enabling, use to drawer else to mini.
How can I refer the mobile-breakpoint status?
<template>
<v-app>
<v-navigation-drawer
v-model="drawer"
:mini-variant.sync="mini"
mobile-breakpoint="960"
app>
<h1>v-navigation-drawer</h1>
</v-navigation-drawer>
<v-btn #click="click"> Button </v-btn>
</v-app>
</template>
<script>
export default {
name: "foo",
data: () => ({
drawer: true,
mini: true
}),
methods: {
click() {
// How to refer 'mobile-breakpoint' status??
if (mobileBreakpointEnabled) {
this.drawer = !this.drawer
} else {
this.mini = !this.mini
}
}
}
}
</script>
If the value is gonna be hardcoded and not changed, I would recommend to just use a computed to check if the breakpoint is reached.
You can use:
this.$vuetify.breakpoint.name
to see if you have reached your breakpoint.
Perhaps just having a breakpoint variable with the width you want to break it at is helpful to have.
See documentation:
https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service
I am trying to find a way to close the vuetify navigation drawer component by clicking on the escape key. To do so, I tried using a key modifier as follows:
<v-navigation-drawer
v-model="drawer"
color="dark"
app
#keydown.esc="drawer = false"
>
Theoretically, I would expect this to work, but it does not. Nothing happens when I click on the escape key. Any idea how to get this to work?
For what it is worth, here is an outline of the code for the entire app-bar/navigation bar section:
<template>
<v-app>
<v-app-bar color="primary" app dark flat>
...
<v-app-bar-nav-icon
#click="drawer = !drawer"
></v-app-bar-nav-icon>
</v-app-bar>
<v-navigation-drawer
v-model="drawer"
color="dark"
app
#keydown.esc="drawer = false"
>
...
</v-navigation-drawer>
</v-app>
</template>
You cannot do that with a drawer, it's not an input element.
Set up a global listener instead:
mounted () {
window.addEventListener('keydown', this.keyDownHandler)
},
destroyed () {
window.removeEventListener('keydown', this.keyDownHandler)
},
methods: {
keyDownHandler (event) {
if (event.code === 'Escape') {
this.drawer = false
}
}
}
I am using vuex store state to show/hide Vuetify v-dialog in my NuxtJS app. Following are the code excerpt:
Vuex Store:
export const state = () => ({
dialogOpen: false
});
export const mutations = {
setDialogToOpen(state) {
state.dialogOpen = true;
},
setDialogToClosed(state) {
state.dialogOpen = false;
}
};
export const getters = {
isDialogOpen: state => {
return state.dialogOpen;
}
};
Dialog Component:
<v-dialog
v-model="isDialogOpen"
#input="setDialogToClosed"
max-width="600px"
class="pa-0 ma-0"
>
...
</v-dialog>
computed: {
...mapGetters("store", ["isDialogOpen"])
},
methods: {
...mapMutations({
setDialogToClosed: "store/setDialogToClosed"
})
}
This all works fine but when I redirect from one page to another page like below it stops working.
this.$router.push("/videos/" + id);
I hit browser refresh and it starts working again. Using the Chrome Vue dev tools, I can see the state is set correctly in the store as well as in the v-dialog value property as shown below
In Vuex store
In v-dialog component property
Yet the dialog is not visible. Any clue what is happening?
I am using NuxtJS 2.10.2 and #nuxtJS/Vuetify plugin 1.9.0
Issue was due to v-dialog not being wrapped inside v-app
My code was structured like this
default layout
<template>
<div>
<v-dialog
v-model="isDialogOpen"
#input="setDialogToClosed"
max-width="600px"
class="pa-0 ma-0"
>
<nuxt />
</div>
</template>
Below is the code for index page which replaces nuxt tag above at runtime.
<template>
<v-app>
<v-content>
...
</v-content>
</v-app>
</template>
So, in the final code v-dialog was not wrapped inside v-app. Moving v-app tag to default layout fixed it
<template>
<v-app>
<v-dialog
v-model="isDialogOpen"
#input="setDialogToClosed"
max-width="600px"
class="pa-0 ma-0"
>
<nuxt />
</v-app>
</template>
I have a project in Vue.js and I am using Vuetify. I have a toolbar and navigation drawer. What I would like is when on desktop the drawer is open. If the user clicks the side-icon the drawer switches to mini.
If on md the drawer switches to mini. if the user clicks the side-icon the mini switches back to drawer
If on sm or lower the navigation drawer switches to temporary
I have most of the pieces but I am getting an error when I click the side-icon. Computed property 'mini' was assigned to but it has no setter.
Here is my code:
<v-toolbar
:clipped-left="$vuetify.breakpoint.mdAndUp"
:app="$vuetify.breakpoint.mdAndUp"
:fixed="$vuetify.breakpoint.mdAndUp"
flat
fixed
:scroll-toolbar-off-screen="$vuetify.breakpoint.smAndDown"
:scroll-threshold="50">
<v-toolbar-side-icon #click.stop="mini = !mini">
</v-toolbar-side-icon>
<v-toolbar-title class="text-uppercase">
<span class="font-weight-light">LOGO</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="">
<v-btn icon v-for="item in menu" :key="item.icon">
<v-icon>{{item.icon}}</v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer
clipped
:mini-variant="mini"
v-model="drawer"
:permanent="$vuetify.breakpoint.mdOnly"
:temporary="$vuetify.breakpoint.smAndDown"
app
hide-overlay>
<v-list dense>
<v-list-tile
v-for="(item, index) in items"
:key="index"
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
I have created a codepen with what I have so far:
https://codepen.io/jsd219/pen/gJJMPQ
You're trying to assign a computed property to itself:
#click.stop="mini != mini"
You really don't want to do that. To find out why, you want to read on JS setters and getters.
If you want mini to be the computed which determines if your <navigation-drawer> is minified or not, use two separate placeholders for your info:
one for whether the menu is forcefully opened (call it menuOpen), initially defined in data(), as false and then overwritten by your #click.stop="menuOpen != menuOpen"
and one coming from $vuetify.breakpoint.mdAndUp. Call it mdAndUp.
So your mini becomes:
mini() {
return !(this.mdAndUp|| this.menuOpen);
}
See it here.
The problem is that you are trying to modify the computed property mini.
To mutate a computed property, you would need to provide a computed setter:
computed: {
mini: {
get() {
// get logic
},
set(value) {
// set logic
}
}
}
In your case, your computed property mini returns true or false if based on $vuetify.breakpoint.mdAndDown. You would need to include a new variable, something like overwriteBreakpoint and use that in your setter.
data() => ({
overwriteBreakpoint: true
}),
computed: {
mini: {
get() {
return this.$vuetify.breakpoint.mdAndDown || this.overwriteBreakpoint;
},
set(value) {
this.overwriteBreakpoint = value;
}
}
}
Here's an example: https://codepen.io/dormenog/pen/MddbMY?editors=1011
Update:
To make this work on multiple screen sizes you'll need to come up with defined rules on when each prop of your nav bar should be true or false. This will become very messy, very quickly, and the benefit of the keeping track of the state is not really valuable because the screens will not change size in real time on the user's device.
I would advice separating the contents of your navbar into a component and wrap it with multiple <v-navigation-drawer /> that will only be rendered by vue if the screen size is correct. This can be achieved using v-if and v-else.
I have created a Sidebar component using Vuetify's navigation drawer. The code looks something like this:
<template>
<v-navigation-drawer persistent clipped v-model="isVisible" fixed app>
<!-- content of the sidebar goes here -->
</v-navigation-drawer>
</template>
<script>
export default {
name: 'Sidebar',
props: {
visible: Boolean,
},
data() {
return {
isVisible: this.visible,
};
},
}
</script>
Please note that I am duplicating the visible prop with the isVisible data. I tried using the prop directly in the v-model but every time the sidebar closed, I would get a warning in the console about changing props directly, as they would be overwritten when the parent re-renders.
In the parent view, I have a button on the toolbar that is supposed to change icon depending on the visibility of the toolbar.
<template>
<v-container fluid>
<sidebar :visible="sidebarVisible"/>
<v-toolbar app :clipped-left="true">
<v-btn icon #click.stop="sidebarVisible = !sidebarVisible">
<v-icon v-html="sidebarVisible ? 'chevron_right' : 'chevron_left'"/>
</v-btn>
</v-toolbar>
<v-content>
<router-view/>
</v-content>
<v-footer :fixed="fixed" app>
<span>© 2017</span>
</v-footer>
</v-container>
</template>
<script>
import Sidebar from '#/components/Sidebar.vue';
export default {
name: 'MainView',
data() {
return {
sidebarVisible: false,
fixed: false,
title: 'Title',
};
},
components: {
Sidebar,
},
};
</script>
The problem I have is that if I close the sidebar by clicking outside of it, the icon of the button on the toolbar does not change to chevron-left. Moreover, in order to bring the sidebar back, I need to click on the button twice.
Clearly this is because the sidebarVisible data in the main view is not updated when the sidebar closes. How do I make sure that sidebarVisible is updated when the sidebar closes?
I am use next construction...
in my component
<template>
<v-navigation-drawer v-model="localDrawer"></v-navigation-drawer>
</template>
...
<script>
export default {
props: { value: { type: Boolean } },
data: () => ({
localDrawer: this.value
}),
watch: {
value: function() {
this.localDrawer = this.value
},
localDrawer: function() {
this.$emit('input', this.localDrawer)
}
}
}
</script>
in parent layer
<app-drawer v-model="drawer"></app-drawer>
it's work for me
Use v-bind:value or :value to bind the drawer value from props.
Child component:
<template>
<v-navigation-drawer v-bind:value="drawer"></v-navigation-drawer>
</template>
<script>
export default {
props : ['drawer']
}
</script>
Parent component:
<template>
<app-side-bar :drawer="drawer"/>
<v-app-bar app clipped-left>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
</v-app-bar>
</template>
Vuetify navigation drawer issue fix:
Reset your browser window to default 100%
Here is the code,
Template:
<nav>
<v-toolbar flat app>
<v-toolbar-side-icon class="grey--text" #click="toggle"></v-toolbar-side-icon>
<v-toolbar-title class="text-uppercase grey--text">
<span class="font-weight-light">Repo</span>
<span>hub</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat color="grey">
<span>Sign Out</span>
<v-icon right>exit_to_app</v-icon>
</v-btn>
</v-toolbar>
<v-navigation-drawer app v-model="drawer" class="indigo">
<p>test</p>
</v-navigation-drawer>
</nav>
Script:
export default {
data() {
return {
drawer: false
};
},
methods:{
toggle(){
this.drawer = !this.drawer;
}
}
};