Failed to resolve component: Checkbox

[rudachenkoev]

Description

I am using Vue 3 (Composition API) + TS + Vite. The module is installed version 3.0.0-alpha.6. After installing the package and declaring the plugin in main.ts I still don't have access to the Checkbox component. As a result I get an error in the console [Vue warn]: Failed to resolve component: Checkbox

Minimal Reproducible Example

main.ts

import { VueRecaptchaPlugin } from 'vue-recaptcha/head'

app.use(VueRecaptchaPlugin, {
  v3SiteKey: import.meta.env.VITE_RECAPTCHA_SITE_KEY
})

app.vue

<script setup lang="ts">
  type RegistrationForm = {
    email: string,
    recaptcha: string
  }
  const body: RegistrationForm = reactive({
    email: '',
    recaptcha: ''
  })
</script>

<template>
  <Checkbox v-model="body.recaptcha" theme="light" />
</template>

System info

-

[theonelucas]

Same issue here, just following the v4 guide will lead to this error.

[DanSnow]

To make it tree-shake able, v3 does not register these components to global. You need to import them in your code

import { Checkbox } from 'vue-recaptcha'

[perinip]

To make it tree-shake able, v3 does not register these components to global. You need to import them in your code

import { Checkbox } from 'vue-recaptcha'

Hi @DanSnow , I was using <import { Checkbox } from 'vue-recaptcha/head'> and it was working so far. Suddenly the checkbox is not being displayed anymore. I tried to remove the /head but it gives me an error <Can't resolve '@unhead/vue' >

[SnowdropK]

To make it tree-shake able, v3 does not register these components to global. You need to import them in your code

import { Checkbox } from 'vue-recaptcha'

it dosn't work, I don't konw why throw error: Uncaught (in promise) Error: useRecaptcha() is called without provider.