Search code examples
vue.jsnuxt.jscloudinary

Cloudinary Nuxt Module: Unknown element cld-image

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?

Solution

  • 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/