Nuxt
When using vue-recaptcha in Nuxt, please try to utilize Nuxt's auto import feature as much as possible to avoid potential bugs.
vue-recaptcha supports Nuxt.js out of the box.
defineNuxtConfig({
modules: ['vue-recaptcha/nuxt'],
})
Please noticed that to prevent from conflict with your components, vue-recaptcha's Nuxt integration has renaming the following components
| Original name | Renamed to |
|---|---|
Checkbox | RecaptchaCheckbox |
ChallengeV2 | RecaptchaChallengeV2 |
ChallengeV3 | RecaptchaChallengeV3 |
Options
You can pass options to the module by adding a recaptcha key to your nuxt.config.js file in runtimeConfig.public.
defineNuxtConfig({
modules: ['vue-recaptcha/nuxt'],
runtimeConfig: {
public: {
recaptcha: {
v2SiteKey: 'YOUR_V2_SITEKEY_HERE',
v3SiteKey: 'YOUR_V3_SITEKEY_HERE',
},
},
},
})
Enterprise
If you are using reCAPTCHA Enterprise, you can use the recaptcha key in nuxt.config to enable the enterprise version support.
Enterprise version support is experimental and may be changed in the future.
defineNuxtConfig({
modules: ['vue-recaptcha/nuxt'],
runtimeConfig: {
public: {
recaptcha: {
v2SiteKey: 'YOUR_V2_SITEKEY_HERE',
v3SiteKey: 'YOUR_V3_SITEKEY_HERE',
},
},
},
recaptcha: {
enterprise: true,
},
})
Manually Install Plugin
If you want to take full control of the plugin, you can manually install the plugin by adding the following code to your nuxt.config.js file.
defineNuxtConfig({
modules: ['vue-recaptcha/nuxt'],
runtimeConfig: {
public: {
recaptcha: {
v2SiteKey: 'YOUR_V2_SITEKEY_HERE',
v3SiteKey: 'YOUR_V3_SITEKEY_HERE',
},
},
},
recaptcha: {
plugin: false,
},
})
Then you will need to manually set up the plugin by creating a file named recaptcha.ts in your plugins directory.
import VueRecaptchaPlugin from 'vue-recaptcha'
export default defineNuxtPlugin(({ vueApp }) => {
const {
public: { recaptcha },
} = useRuntimeConfig()
vueApp.use(VueRecaptchaPlugin, recaptcha)
})
Table of Contents