vueDemi.defineComponent is not a function Error Not working with Nuxt 3

[anish2690]

trafficstars

[DanSnow]

I have not tried Nuxt 3. Is it possible to make it client-only?

[IlyaSemenov]

It's also crashing the same way on nuxt/bridge (vue2) in vite/nitro mode.

[alehano]

I use it with Nuxt 3.0.0-rc.4 On dev it works fine, but when I build it to production I have infinite loop of errors. Wrapping with ClientOnly tag doesn't help

[nuxt] [request error] vueDemi.defineComponent is not a function
  at ./.output/server/chunks/app/server.mjs:170:28  
  at ./.output/server/chunks/app/server.mjs:63:4  
  at ./.output/server/chunks/app/server.mjs:64:4  
  at ./.output/server/chunks/app/server.mjs:288:3  
  at ModuleJob.run (node:internal/modules/esm/module_job:198:25)  
  at async Promise.all (index 0)  
  at async ESMLoader.import (node:internal/modules/esm/loader:385:24)  
  at async ./.output/server/chunks/handlers/renderer.mjs:11158:24  
  at async ./.output/server/chunks/handlers/renderer.mjs:11213:64  
  at async ./.output/server/node_modules/h3/dist/index.mjs:420:19

[alehano]

I got this to work. Under /plugins dir create a file named recaptcha.client.js with contents:

import { VueRecaptcha } from 'vue-recaptcha';

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.component('VueRecaptcha', VueRecaptcha)
})

Then you can use <VueRecaptcha> wrapped with <ClientOnly> in your components

[zhixXiang]

I got this to work. Under /plugins dir create a file named recaptcha.client.js with contents:

import { VueRecaptcha } from 'vue-recaptcha';

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.component('VueRecaptcha', VueRecaptcha)
})

Then you can use <VueRecaptcha> wrapped with <ClientOnly> in your components

Thank you, you save my day!

[matrixmandeep]

Hey, can you please share an example to implement this on nuxt 3