many of the FilePond property seem to not show an effect, but there are even some that render the component unusable. tried on codepen with the default example.
As soon as I add the following line:
stylePanelLayout='compact circle'
to the component it doesn't react anymore to file selects
<template>
<div id="app">
<file-pond
name="test"
ref="pond"
allow-multiple="true"
accepted-file-types="image/jpeg, image/png"
v-bind:files="myFiles"
stylePanelLayout='compact circle'
/> </div>
</template>
you can try urself by adding this line to the demo from FilePond:
https://codesandbox.io/s/github/KimGenius/Vue-FilePond-Live-Demo/tree/master/?from-embed
please set allow-multiple to false to fix the issue. Might not be clear from the docs that this is necessary.
Related
i'm new of this framework :(
the problem is here because i've tried to put the component in another page and work it.
It sign error the component
this is my index.vue page
If you're using nuxt2.0, you should wrap them in a container but this is not needed in nuxt3.0.
<template>
<main>
<navbar />
<slideshow />
</main>
</template>
If this is nuxt2.0, then you should also import the component and register it but you haven't done it here. The path you've given to the component is not correct also.
<script>
import Slideshow from '~/components/slideshow.vue';
export default {
components: { Slideshow }
}
</script>
You need to wrap the into a div or any other tag (to not have multiple tags at the root of the template) like that
<template>
<div>
<navbar></navbar>
<slideshow></slideshow>
</div>
</template>
And you can also skip the import part because Nuxt is already doing that for you as explained here: https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components/
I'm working on a project with Nuxt 3 and I keep getting this warning in the console
[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated.
at <Default >
at <AsyncComponentWrapper >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at <Transition name="layout" mode="out-in" >
at <Anonymous>
at <App key=1 >
at <NuxtRoot>
I dont have a transition yet but i think it's coming from nuxt spinner.
layouts/default.vue:
<template>
<TheHeader />
<slot />
</template>
I checked all my pages and components, all of them have only one root element of the following (header, nav, div, form, NuxtLink, button, img)
The warning doesn't specify where it's coming from and I don't know how to debug this.
In nuxt 3 everything should only have 1 root element:
<template>
<div>
<TheHeader />
<slot />
</div>
</template>
Just read the docs if you stuck on something: https://v3.nuxtjs.org/guide/directory-structure/layouts
If the transition isn’t in your code, I’d simply ignore the warning. As the warning states it will only cause non working animations for that specific component. I wouldn’t spent any time on debugging this since your code will be unaffected.
Edit:
If you really want to debug this, the easiest way is to use the Vue dev tools to search for the transition.
Versions
nuxt: ^2.14.12
node: v14.15.4
Reproduction
Hello everyone and thank you in advance.
I have a strange issue that I don't really understand what's the problem and how to deal with it.
I have installed a fresh nuxt ssr project.
I'm getting the following warning
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
I have three simple components: Form, Input, Button.
Form.vue
<template>
<form v-bind="$attrs" class="w-full" #submit.prevent="$emit('submitted')">
<div class="space-y-2 mb-4">
<slot name="fields" />
</div>
<slot name="button" />
</div>
</form>
</template>
<script>
export default {
computed: {
hasFields() {
return !!this.$slots.fields
},
},
}
</script>
Input.vue
<template>
<div class="relative w-full">
<input class="form-input block w-full" />
</div>
</template>
<script>
export default {
inheritAttrs: false,
}
</script>
Button.vue
<template>
<button
type="submit"
class="relative btn inline-flex items-center justify-center transition ease-in-out duration-150"
>
Save
</button>
</template>
<script>
export default {}
</script>
I use my components in pages/index.vue like this:
<template>
<div>
<Form>
<template #fields>
<Input />
<Input />
</template>
<template #button>
<Button />
</template>
</Form>
<Form>
<template #fields>
<Input />
<Input />
</template>
<template #button>
<Button />
</template>
</Form>
</div>
</template>
<script>
export default {}
</script>
If i use the Form component only once in the view i don't get the warning.
If i use it twice i get it.
Steps to reproduce
Reproduction link
Install a fresh nuxt ssr project.
Create the components as in the reproduction link
What is Expected?
All the components to render normally without any warnings or errors.
What is actually happening?
I get the following warning.
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
Some extra notes
I know that wrapping the whole thing inside a <client-only> fixes the problem but i want to understand why is this happening in order to avoid it in future cases.
Also if I remove components: true from nuxt.config.js and import the components normally again the warning is gone.
Changing the name of the components eg Button -> TheButton won't fix the problem. You can see the reproduction here.
<script>
import Input from '~/components/Input'
import Button from '~/components/Button'
import Form from '~/components/Form'
export default {
components: { Form, Button, Input}
}
</script>
There seems to be one or more components which are not supported in "Universal" Mode, i.e. they might have code which isn't being executed correctly on server end.
Please try finding that component which you think can cause an issue and wrap that component with .
Here's the link for more information: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component
Initially, I am fetching data from api in the created hook which is perfectly working.
created() {
this.fetchInformation()
}
But I was having look over best practices for lifecycle hooks and I came to this line You need to fetch some data for your component on initialization. Use created (or created + activated for keep-alive components)
I also tried to look for relevant articles or information on the internet.
Url for reference - https://alligator.io/vuejs/component-lifecycle/
My component is rendering inside keep-alive so I tried this for the test purpose.
activated() {
this.fetchInformation()
}
Instead of created, now as expected everytime the component activates it execute the api call which is really cool. But I still want to understand what this actually created + activated as I am using activated or created but if I am correct just by reading that I should do them both.
Please let me know if anything else required to understand my question.
Thanks
Use correctly keep-alive!!
Incorrect:
<template>
<div>
<div v-if="canRender">
<keep-alive>
<my-component />
</keep-alive>
</div>
</div>
<template>
Incorrect:
<template>
<div>
<keep-alive>
<div v-if="canRender">
<my-component />
</div>
</keep-alive>
</div>
<template>
Correct:
<template>
<div>
<div>
<keep-alive>
<my-component v-if="canRender" />
</keep-alive>
</div>
</div>
<template>
I want to use vue material for my app,
i already install vue-material in my app, and do this in my main.js:
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
Vue.use(VueMaterial)
but, when i use some component from vue-material in my index page like this:
<template>
<md-field>
<label>Username</label>
<md-input v-model="username"></md-input>
</md-field>
<md-field>
<label>Password</label>
<md-input v-model="password"></md-input>
</md-field>
</template>
my page show:
when i visit example form input in codepen, form input should like this:
whats wrong with my code?
This happened with me too,
To fix it, you just need to set a theme for your app like this:
import 'vue-material/dist/theme/default.css'
You are probably missing a crucial <form> tag
As per the documentation, removing some stuff for your use case, you should have at least the following wrapped around those <md-field> tags.
<form class="md-layout">
// your form inputs here
</form>