vue-honeypot

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:

Thanks a lot for your support! ❤️

License

MIT License © Sebastian Landwehr