<v-app> takes a lot more space than necessary (vuetify) - vue.js

I am creating a project in which I use "vuetify" and "vuetify-jsonschema-form". Basically, the problem is that <v-app> element takes 498 x 754.4 space, even if the child component <v–content> takes only what's necessary – 498 x 94. I have tried many suggestions – adding app property, etc. – but no progress, so I am posting here.
Code: (added both div's to indicate that I am using it in the middle of all the program (I need vuetify only in small part of the page))
...
</div>
<v-app id="vuetify_edit">
<v-container>
<v-form>
<v-jsf v-model="editModel" :schema="editSchema" />
</v-form>
</v-container>
</v-app>
<div>
...

Put <v-app> tags at the top – right inside <template> tags.
Although <v-app works in the middle of the app, it has some random height, width you can't really change.

Related

How to move a Vue component around without loosing its state

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

How to make expand transition of v-card every time I press a button

I'm making a form where user press the button and new v-card shows. Everything works but I can't make a good expand transition. It only works with the first card then it tells me to use transition-group. But when I use transition-group I don't get any animation at all. I tried a lot of things and look at the vue documentation.
I shorten the link because I get an error and SO didn't let me post it
I put an important part of my code in codepen:
https://rb.gy/gw6xws
Anyone know the solution how to make expand-transition for every added card because now it works only for the first one?
First, you should move v-for directive to v-expand-transition.
Then you can use appear to trigger the animation when you add new v-expand-transition.
<v-expand-transition appear v-for="klad in kladi" :key="klad.key">
<v-card class="pl-3 pr-3 mt-2 mb-2 rounded-lg tertiary">
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6>
<p>something {{klad.key}}</p>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-expand-transition>
Example

Run TYPO3 Fluid on VueJS component

I have a VueJS component and I'm trying to add translated text via Fluid tag.
<div xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">
<h2><f:translate key="search.resultPage"/>"{{mutatedQuery}}".</h2>
</div>
The tags are displayed on frontend, but the <f:translate> tag is empty.
Assumed direction Fluid → Vue
Indeed that's tricky since Fluid does not support escape characters for inference literals like {} which are used in any other client-side frameworks like Vue or Angular as well.
case
Fluid template
rendered output
1
{{item.value}}
ø
2
{{ item.value }}
{{ item.value }}
3
{{<f:comment/>item.value<f:comment/>}}
{{item.value}}
1: empty string (we knew that already)
2: works, adding space between braces and variable name
3: works, since <f:comment/> breaks Fluid inline pattern (but it's "ugly")
Assumed Direction Vue → Fluid
It is not possible to call Fluid (server-side rendering) from Vue (client-side template & document fragment).
Alternative, combining both via slots
It is possible to use Fluid in the base template served by a web server and use slots to inject the content to Vue components, see https://v2.vuejs.org/v2/guide/components-slots.html.
Main Fluid template:
<div
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">
<my-app>
<template v-slot:resultPageLabel>
<f:translate key="search.resultPage"/>
</template>
</my-app>
</div>
Vue my-app component template:
<h2>
<slot name="resultPageLabel"></slot>
"{{mutatedQuery}}".
</h2>
I didn't succeed to integrate Fluid on Vue, I think that both have different rendering engines and can not be synchronize as I wanted.
I solved this issue by adding <f:translate key="search.resultPage"/> as a data-attribute on another tag(that is not rendered in vue) and get that translates on vue component.

V-container do not apply fluid

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.

nuxtjs vuetify v-img placeholder not working

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.