Hide stuff from bots (especially cookie consents)
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test feat: remove nested div from dummy element Jul 22, 2018
.babelrc
.eslintrc.js Initial commit May 22, 2018
.gitignore Initial commit May 22, 2018
.travis.yml
CHANGELOG.md
CONTRIBUTING.md Initial commit May 22, 2018
LICENSE.md Initial commit May 22, 2018
README.md chore: add thanks badge Oct 29, 2018
commitlint.config.js
package.json chore(release): 1.2.0 Jul 22, 2018

README.md

VueIfBot - Hide stuff from bots (especially cookie consents) 🚫👀

Build Status Code coverage Downloads Version License We use Conventional Commits Thanks badge

Lightweight component to hide/show content to clients based on the user agent

⁉️ Why this component exists

As you know, the GDPR is coming (or more likely: is already applicable when you read this). With it, a lot of information banners, consents concerning cookies, privacy policies and so on.

The average user will see those banners once (a year, that's the law), but search engine crawlers will always see it (as they don't have any cookies and won't click on it). On every page. Depending on the screen size they take, this could be annoying and even influence your SEO (negatively).

So stop it now! With VueIfBot.

Having any other cases you need this component? Feel free to share!

🔥 Features

  • Tiny functional component
  • SSR-safe (works with Nuxt.js)
  • Well tested and documented
  • Compatible with Node 8.0+
  • Vue as the only dependency
  • Highly customizable

🔎 Getting started

📦 Through NPM

$ npm install vue-if-bot

Synchronous import

import VueIfBot from 'vue-if-bot'

export default {
  components: {
    VueIfBot
  }
}

Async import

export default {
  components: {
    VueIfBot: () => import('vue-if-bot')
  }
}

🔗 Using a CDN

UNPKG | jsDelivr (available as window.ifBot)

Vue.component('if-bot', window.ifBot)

// Continue as you wish

🛠 Usage

Handling

By default, all children of the component are not displayed to bots. VueIfBot detects bots by testing their user agent against the regex /bot|googlebot|crawler|spider|robot|crawling/i

Prop overview

Prop Type Comment
invert Boolean Inverts the behavior (shows content only to bots)
regex RegExp Change the user agent regex to your own (eg /test/i)

Example usage

 <vue-if-bot>
   <h1>This will not be visible for bots</h1>
 </vue-if-bot>

 <vue-if-bot
    :invert="true">
    <h1>This will be visible for bots</h1>
  </vue-if-bot>

  <vue-if-bot
     :regex="/some-custom-browser/">
     <h1>This will be visible for users whose user agent contains some-custom-browser</h1>
   </vue-if-bot>

⚙️ Contributing

Please see our CONTRIBUTING.md

📑 License

MIT License - Copyright (c) Developmint - Alexander Lichter