
Research
Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
vue-recaptcha-v3
Advanced tools
[](https://www.npmjs.com/package/vue-recaptcha-v3) [](https://www.npmjs.com/package/vue-recaptcha-v3)
A simple and easy to use reCAPTCHA (v3 only) library for Vue based on reCAPTCHA-v3.
The latest version of this package supports Vue 3! See here for Vue 2 usage.
With NPM:
$ npm install vue-recaptcha-v3
With Yarn:
$ yarn add vue-recaptcha-v3
To use this package you only need a valid site key for your domain, which you can easily get here.
import Vue from 'vue'
import { VueReCaptcha } from 'vue-recaptcha-v3'
// For more options see below
Vue.use(VueReCaptcha, { siteKey: '<site key>' })
new Vue({
methods: {
async recaptcha() {
// (optional) Wait until recaptcha has been loaded.
await this.$recaptchaLoaded()
// Execute reCAPTCHA with action "login".
const token = await this.$recaptcha('login')
// Do stuff with the received token.
}
},
template: '<button @click="recaptcha">Execute recaptcha</button>'
})
import { createApp } from 'vue'
import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3'
const component = {
setup() {
const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()
const recaptcha = async () => {
// (optional) Wait until recaptcha has been loaded.
await recaptchaLoaded()
// Execute reCAPTCHA with action "login".
const token = await executeRecaptcha('login')
// Do stuff with the received token.
}
return {
recaptcha
}
},
template: '<button @click="recaptcha">Execute recaptcha</button>'
}
createApp(component)
.use(VueReCaptcha, { siteKey: '<site key>' })
To get type suggestions for instance variables (this is not needed for composition API), create a new file called shims-vue-recaptcha-v3.d.ts
and put the following inside it:
import { ReCaptchaInstance } from 'recaptcha-v3'
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$recaptcha: (action: string) => Promise<string>
$recaptchaLoaded: () => Promise<boolean>
$recaptchaInstance: ReCaptchaInstance
}
}
This plugin offers optional options to configure the behavior of some parts.
Available options:
Name | Description | Type | Default value |
---|---|---|---|
siteKey | The site key for your domain from Google. | string | none |
loaderOptions | Optional options for the recaptcha-v3 loader. The available options are described here. | object | null |
To use the options just pass an object to the Vue.use(...)
method. For example:
import Vue from 'vue'
import { VueReCaptcha } from 'vue-recaptcha-v3'
Vue.use(VueReCaptcha, {
siteKey: '<site key>',
loaderOptions: {
useRecaptchaNet: true
}
})
Some topics which are not commonly used, but required in some cases.
In some cases it's necessary to interact with the reCAPTCHA-v3 instance, which provides more control over reCAPTCHA.
const recaptcha = this.$recaptchaInstance
// Hide reCAPTCHA badge:
recaptcha.hideBadge()
// Show reCAPTCHA badge:
recaptcha.showBadge()
FAQs
[](https://www.npmjs.com/package/vue-recaptcha-v3) [](https://www.npmjs.com/package/vue-recaptcha-v3)
The npm package vue-recaptcha-v3 receives a total of 50,209 weekly downloads. As such, vue-recaptcha-v3 popularity was classified as popular.
We found that vue-recaptcha-v3 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.