Socket
Socket
Sign inDemoInstall

vue-honeypot

Package Overview
Dependencies
0
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-honeypot

A simple honeypot component for Vue.js.


Version published
Maintainers
1
Weekly downloads
255
decreased by-14.43%

Weekly downloads

Readme

Source

vue-honeypot

npm version Linux macOS Windows compatible Build status Coverage status Dependency status Renovate enabled
Open in Gitpod Buy Me a Coffee PayPal Patreon

A simple honeypot component for Vue.js.

A honeypot is an artificial input field that is invisible to the user but visible to spambots. Spambots try to fill out as many fields as possible, so this is an effective way to detect a spambot.

Features

  • Component and validation function
  • Uses position: absolute and opacity: 0 instead of display: none because some spambots detect display: none
  • Hide the component for screen readers
  • Disable autocomplete
  • Disable tab focus

Install via a package manager

# npm
$ npm install vue-honeypot

# Yarn
$ yarn add vue-honeypot

Add to local components:

<script>
import VueHoneypot from 'vue-honeypot'

export default {
  components: {
    VueHoneypot,
  },
}
</script>

Or register as a global component:

import VueHoneypot from 'vue-honeypot'

app.component('VueHoneypot', VueHoneypot)

Or register as a plugin:

import VueHoneypot from 'vue-honeypot'

app.use(VueHoneypot)

Install via CDN

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-honeypot"></script>

Usage

Add the component to your form and add a ref:

<template>
  <form @submit="submit">
    <label for="email">Email</label>
    <input type="email" id="email" />

    <label for="password">Password</label>
    <input type="password" id="password" />

    <!-- Setup the honeypot -->
    <vue-honeypot ref="honeypot" />
  </form>
</template>

Then validate the honeypot in the submit function:

<script>
export default {
  methods: {
    submit() {
      try {
        this.$refs.honeypot.validate()
      } catch (error) {
        // error handling
      }
    },
  },
}
</script>

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

Buy Me a Coffee  If you want to send me a one time donation. The coffee is pretty good 😊.
PayPal  Also for one time donations if you like PayPal.
Patreon  Here you can support me regularly, which is great so I can steadily work on projects.

Thanks a lot for your support! ❤️

License

MIT License © Sebastian Landwehr

Keywords

FAQs

Last updated on 15 Jun 2023

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc