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.
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 am trying to use vue-masonry-wall in my NuxtJS (v2.15.7) app to give it a masonry layout. According to the docs, the vue-masonry-wall package is "SSR friendly". It states to simply add :ssr="{columns: 2}" to masonry so that during SSR, it will be loaded in 2 columns.
I tried this in my code (codesandbox here). But, during SSR, nothing is loaded.
Anyone got any idea on what is happening and why I can't see any of the items? It works fine in client-mode.
Code example:
<vue-masonry-wall :items="items" :options="{width: 300, padding: 12}" :ssr="{columns: 2}" #append="append">
<template v-slot:default="{item}">
<div class="item">
<h5>{{item.title}}</h5>
<p>{{item.content}}</p>
</div>
</template>
</vue-masonry-wall>
One option is to run it just on the client side, so:
1- if loaded as plugin, globally: name the plugin file ending with ".client", for instance: 'vue-masonry-wall.client.js'
2- if used as module, you can wrap it with the tag.
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.
under nuxt.js i'm using vuetify. v-img works, but as i try to use the 'placeholder' feature, as described in the docs, it does not work. for the example i copy exactly the example that works in the docs.
we suppose to see a circle loader while we wait for the image.
for testing, i'm using chrome to slow down the connection.
this doesn't work. there is a blank for a few seconds, then the image appears.
here is the code. any idea?
<v-col cols="4">
<v-img :src="selectedItem.picture">
<template v-slot:placeholder>
<v-row class="fill-height ma-0" align="center" justify="center">
<v-progress-circular indeterminate color="blue"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-col>
note: i'm not using vuetify-loader. could this be the issue?
Better use 'default' slot and show it while checking #error="imgLoadStatus='error'" of image.
For me, sometimes in runtime while dynamically loading and changing image, placeholder was not showing up at all.
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.