Until version 2.6.1, the component worked correctly when used with the "mini" variant. However, since Vuetify version 2.6.2, it always collapse after interacting with the navigation, having the "permanent" property set.
<v-navigation-drawer
v-model="drawer"
:mini-variant.sync="mini"
permanent
>
***
</v-navigation-drawer>
I have created a codepen with the behavior of version 2.6.2:
Codepen example
This is a bug or did something change in the behavior of the component?
Related
I have a Vue3 wrapper component that implements a magnification feature in a dashboard. It displays an inner Vue component in two different ways. One is inline and the other is in a full-page pop-up for magnification. The gist of the template (I'm using Vuetify) is:
<template>
<v-card>
<!-- normal location -->
<component v-if="!full_page" :is="innerComponent" />
<!-- magnified full-page version -->
<v-dialog v-if="full_page">
<v-card>
<component :is="innerComponent" />
</v-card>
</v-dialog>
</v-card>
</template>
The above works in general, except that there are two different components in play. This means that if the non-magnified component has internal state then that is lost when switching to the magnified version. I see threee options:
guarantee that all state, even transient one, is maintained external to the component
reach into the component to clone state
ensure Vue moves the component from one spot in the DOM to the other
My question is whether the third option is possible?
With Vue 3 you can use Teleport component to move a component around.
You can do like that:
<div id="div1"></div>
<div id="div2"></div>
<Teleport :to="position ? '#div1' : '#div2'">
<YourComponent/>
</Teleport>
An important note is that
The teleport to target must be already in the DOM when the
component is mounted.
So you need some extra work to make it work with your own code.
Live demo
I'm attempting to use the Vuetify v-list component in NuxtJS however when I deploy my app the list is not reactive at all (no hover effect, no linking).
The documentation for NuxtJS says all internal page links must use the <NuxtLink> component, but how is this possible when using pre-built components?
The NuxtLink component adds undesired styling. I'm assuming I'll need to hack away at the CSS to make it not do this?
<v-list>
<v-list-item to="/some/endpoint">
<!-- content -->
</v-list-item>
</v-list>
Linking not working after being built
Component not reactive -- no hover effect (Assume because link is not registering).
Using this should work
<v-list-item nuxt to="/some/endpoint">
As told in the documentation
Specifies the link is a nuxt-link. For use with the nuxt framework.
If you want to style the specific nuxt links, you can check this part of the documentation. Otherwise, the rest is probably Vuetify specific than can be overwritten with regular CSS.
Okay, so I am trying to setup a simple grid layout with three v-cards at equal distances.
<v-main>
<v-container>
<v-row>
<v-col>
<v-card outlined tile>Card 1</v-card>
</v-col>
<v-col>
<v-card outlined tile>Card 2</v-card>
</v-col>
<v-col>
<v-card outlined tile>Card 3</v-card>
</v-col>
</v-row>
</v-container>
</v-main>
Now, according to the docs and examples they have this should leave me with 3 cards at equal distances, and it does indeed.
Problem is that moment I hover over any of them, they all darken. Looking through the dev tools reveals following issue:
As you can see, the v-cards are not inside v-cols as they should be. Yet, I can't see any errors in the code. Am I missing some extra rule or something?
I believe the problem with darkening on hover should be elsewhere and is not related to the oddity that you see in the Vue debugger. I don't think there is something wrong with your code (compare it to what I mention in #1 below). I tend to believe that the oddity in the debugger is either its own bug or a bug (or feature?) related to how the debugger reflects the Vuetify internals, which doesn't spoil the real app behavior. Here are my arguments:
Look at Vuetify grid with cards example - it is structured the same way as your example (ignore their 'cols' attribute of v-col tag - they showcase an uneven spread of columns, and if you remove that attribute you get pretty much your own example with 3 cards, each inside of its own v-col). However, if you try to copy-paste this standard Vuetify example into an empty Vue CLI app and look into the debugger you see the same odd hierarchy. Check my screenshot: This, however, doesn't spoil the DOM model, where the v-cards are inside of v-cols as expected: This also doesn't create any problems with the actual app behavior. Changing background color at hover (I added that simple CSS change to Vuetify original example just to try to reproduce your original problem) works like a charm. Note that red background in one card of the screenshot - it spreads to the single hovered card only.
I remember seeing the same Vuetify hierarchy oddity in Vue debugger in the past, though it didn't create any problems and didn't seem to be caused by any bugs in the code. I just ignored it at that time.
I also copied your example into a codepen adding just two basic things: the CSS to test hovering (the same as I added in #1 above) and the basic Vue object creation and mounting (which I'd suppose you should have auto-generated).
The CSS:
.v-card:hover {
background-color: red;
}
The JS:
new Vue({
vuetify: new Vuetify(),
}).$mount('#app')
The hovering also works well in that codepen (if I understand correctly the kind of problem you mentioned). I should mention there is one difference in CSS to what I had to use in #1, though. In #1 a custom CSS class (<v-card class="imgCard">) was used as v-cards are inside of another high-level v-card there, so I couldn't use '.v-card' to highlight just one nested card there - they would all highlight together otherwise. BTW, isn't that the problem you experience by chance?
So overall, I think that either your original code has something else that causes the problem (presuming you might have simplified it when writing the question), or I didn't get what kind of hovering you mean. Anyways, I'm quite certain that the oddity in Vuetify debugger doesn't mean there is something wrong with the code itself.
I dont understand why v-container do not apply fluid option. It always behaves as usual container. Here is code from my App.vue
<template>
<v-app id="main" :style="{background: $vuetify.theme.themes[theme].background}">
<v-container fluid="true">
</v-container>
</v-app>
</template>
I have tried many ways like :fluid="true, or only fluid but it still acts as usual container. After inspecting page I have noticed that it seems like browser is interpretating container class before container--fluid and overlaying it's max width. as on screenshot below. Is there any way to solve this issue? I'm using firefox for inspecting.
For anyone encountering simmilar issue in future:
For learning project I've installed both boostrap-vue and vuetify. When I removed bootstrap vue dependencies container started to act as expected.
So I tried to implement this example for a v-badge from vuetify and it is simply not showing in the DOM:
<v-badge bordered color="error" icon="mdi-lock" overlap>
<v-btn class="white--text" color="error" depressed>
Lock Account
</v-btn>
</v-badge>
Then I compared the source code of the working example on the vuetify website with the compiled source code of my example:
Working example on vuetify website:
Not working example in my vue instance:
Notice the absence of the v-badge__wrapper span. Instead of that there is only an empty comment: <!---->
Any idea why? And how to fix this?
Might be vuetify version issue, please upgrade your vuetify version. I solved it also by just upgrading it.