Vuejs-Vue if bot: vue-if-bot - A lightweight component to hide/show content to clients based on the user agent

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

Comments

  • Configure Renovate
    Configure Renovate

    Oct 14, 2018

    WhiteSource Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • package.json (npm)
    • .travis.yml (travis)

    Configuration

    🔡 Renovate has detected a custom config for this PR. Feel free to ask for help if you have any doubts and would like it reviewed.

    Important: Now that this branch is edited, Renovate can't rebase it from the base branch any more. If you make changes to the base branch that could impact this onboarding PR, please merge them manually.

    What to Expect

    With your current configuration, Renovate will create 18 Pull Requests:

    chore(deps): update all non-major dependencies
    chore(deps): update commitlint monorepo (major)
    chore(deps): update devdependency babel-jest to v27
    • Schedule: ["at any time"]
    • Branch name: renovate/major-jest-monorepo
    • Merge into: master
    • Upgrade babel-jest to ^27.3.0
    chore(deps): update devdependency babel-loader to v8
    • Schedule: ["at any time"]
    • Branch name: renovate/major-babel-monorepo
    • Merge into: master
    • Upgrade babel-loader to ^8.2.2
    chore(deps): update devdependency bili to v5
    • Schedule: ["at any time"]
    • Branch name: renovate/bili-5.x
    • Merge into: master
    • Upgrade bili to ^5.0.5
    chore(deps): update devdependency cross-env to v7
    • Schedule: ["at any time"]
    • Branch name: renovate/cross-env-7.x
    • Merge into: master
    • Upgrade cross-env to ^7.0.3
    chore(deps): update devdependency eslint to v8
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-8.x
    • Merge into: master
    • Upgrade eslint to ^8.0.1
    chore(deps): update devdependency eslint-config-standard to v16
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-config-standard-16.x
    • Merge into: master
    • Upgrade eslint-config-standard to ^16.0.3
    chore(deps): update devdependency eslint-plugin-node to v11
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-plugin-node-11.x
    • Merge into: master
    • Upgrade eslint-plugin-node to ^11.1.0
    chore(deps): update devdependency eslint-plugin-promise to v5
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-plugin-promise-5.x
    • Merge into: master
    • Upgrade eslint-plugin-promise to ^5.1.0
    chore(deps): update devdependency eslint-plugin-standard to v4
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-plugin-standard-4.x
    • Merge into: master
    • Upgrade eslint-plugin-standard to ^4.1.0
    chore(deps): update devdependency husky to v7
    • Schedule: ["at any time"]
    • Branch name: renovate/husky-7.x
    • Merge into: master
    • Upgrade husky to ^7.0.2
    chore(deps): update devdependency jest-serializer-vue to v2
    • Schedule: ["at any time"]
    • Branch name: renovate/jest-serializer-vue-2.x
    • Merge into: master
    • Upgrade jest-serializer-vue to ^2.0.2
    chore(deps): update devdependency vue-jest to v3
    • Schedule: ["at any time"]
    • Branch name: renovate/major-vue-monorepo
    • Merge into: master
    • Upgrade vue-jest to ^3.0.7
    chore(deps): update devdependency webpack to v5
    • Schedule: ["at any time"]
    • Branch name: renovate/webpack-5.x
    • Merge into: master
    • Upgrade webpack to ^5.58.2
    chore(deps): update devdependency webpack-dev-server to v4
    • Schedule: ["at any time"]
    • Branch name: renovate/webpack-dev-server-4.x
    • Merge into: master
    • Upgrade webpack-dev-server to ^4.3.1
    chore(deps): update node.js to v14
    • Schedule: ["at any time"]
    • Branch name: renovate/node-14.x
    • Merge into: master
    • Upgrade node to >=v14.18.1
    chore(deps): update npm to v8
    • Schedule: ["at any time"]
    • Branch name: renovate/npm-8.x
    • Merge into: master
    • Upgrade npm to >=8.1.0

    🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.


    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by WhiteSource Renovate. View repository job log here.

    Reply
  •  error - navigator is not defined
    error - navigator is not defined

    Dec 1, 2018

    Hi!

    I've error with nuxt 2.3.4.

        <vue-if-bot>
          Test
        </vue-if-bot>
    
    bug 
    Reply