Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/developmint/vue-if-bot
Hide stuff from bots (especially cookie consents)
https://github.com/developmint/vue-if-bot
bot component functional hide javascript nuxtjs plugin ssr user-agent vue vuejs
Last synced: 2 days ago
JSON representation
Hide stuff from bots (especially cookie consents)
- Host: GitHub
- URL: https://github.com/developmint/vue-if-bot
- Owner: Developmint
- License: mit
- Created: 2018-05-22T18:01:18.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-05-30T07:14:25.000Z (over 2 years ago)
- Last Synced: 2024-04-25T16:45:08.310Z (5 months ago)
- Topics: bot, component, functional, hide, javascript, nuxtjs, plugin, ssr, user-agent, vue, vuejs
- Language: JavaScript
- Size: 14.6 KB
- Stars: 66
- Watchers: 4
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# VueIfBot - Hide stuff from bots (especially cookie consents) :no_entry_sign::eyes:
> Lightweight component to hide/show content to clients based on the user agent
## :interrobang: 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!
## :fire: 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
## :mag_right: Getting started
### :package: Through NPM
```
$ npm install vue-if-bot
```
#### Synchronous import
```js
import VueIfBot from 'vue-if-bot'
export default {
components: {
VueIfBot
}
}
```
#### Async import
```js
export default {
components: {
VueIfBot: () => import('vue-if-bot')
}
}
```
### :link: Using a CDN
[UNPKG](https://unpkg.com/vue-if-bot/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-if-bot/dist/) (available as window.ifBot)
```js
Vue.component('if-bot', window.ifBot)
// Continue as you wish
```
## :hammer_and_wrench: 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
```js
This will not be visible for bots
This will be visible for bots
This will be visible for users whose user agent contains some-custom-browser
```
## :gear: Contributing
Please see our [CONTRIBUTING.md](./CONTRIBUTING.md)
## :bookmark_tabs: License
[MIT License](./LICENSE.md) - Copyright (c) Developmint - Alexander Lichter