I am using the @NuxtJS/Cloudinary module like so:
<cld-image
:public-id="post.photoURL"
class="rounded-circle me-1"
type="fetch"
width="40"
height="40"
crop="fill"
gravity="auto"
fetch-format="auto"
quality="auto"
:alt="`${post.displayName}'s avatar image`"
/>
It works fine in my app. However, in browser console I get the following Vue Hydration Warning:
vue.runtime.esm.js?2b0e:619
[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 do have the module added in my nuxt.config.js file like so:
modules: ['@nuxtjs/cloudinary'],
And, when I run an HTML validation, I get the following HTML validation error shown in my text editor like so:
error Unknown element <cld-image>
OK, so do I need to manually import the cld-image
component locally? If so, what is the purpose of having the cloudinary module in nuxt.config.js?
You could fix that with a client-only
tag.
Otherwise, maybe try the cloudinary integration of the Nuxt image module: https://image.nuxtjs.org/providers/cloudinary/