Adding a cookie consent banner

When in Europe and using cookies we need to show a cookie consent banner so our users are aware that we are using cookies on the site.

To add a cookie banner to your Nuxt.js application you can use the vue-cookieconsent-component

yarn add vue-cookieconsent-component

We then create a cookie box component with the props of message and link-label.

<template>
  <CookieConsent
    message="We use Cookies for user analysis and on-page improvements!"
    link-label="Learn about cookies"
  />
</template>

And we then import our CookieConsent component.

<script>
  import CookieConsent from 'vue-cookieconsent-component/src/components/CookieConsent.vue'

  export default {
    components: {
      CookieConsent
    }
  }
</script>

We then add the styles so it looks how we want it to, positioned at the top or bottom of the page.

<style>
  .cookie-consent {
    display: flex;
    padding: 10px;
    align-items: center;
    align-self: center;
    justify-content: center;
    border-bottom: 1px solid white;
    color: white;
  }
  .cookie-consent button {
    border: 1px solid white;
    padding: 10px;
    margin-left: 20px;
    min-width: 140px;
  }
</style>

We can also add a package called VueIfBot which will hide your cookie consent for search engine crawlers.

yarn add vue-if-bot

We then wrap our CookieConsent component in the IfBot component.

<template>
  <VueIfBot>
    <CookieConsent
      message="We use Cookies for user analysis and on-page improvements!"
      link-label="Learn about cookies"
    />
  </VueIfBot>
</template>

Or you could create your own content

<cookie-consent>
  <template slot="message">
    This website uses cookies
    <a class="btn btn-link" href="/my-cookies">Read more</a>
  </template>
  <template slot="button">
    <button class="btn btn-info">Accept</button>
  </template>
</cookie-consent>

And of course we must import it in our script tag

<script>
  import VueIfBot from 'vue-if-bot/dist/vue-if-bot.es'
  import CookieConsent from 'vue-cookieconsent-component/src/components/CookieConsent.vue'

  export default {
    components: {
      VueIfBot,
      CookieConsent
    }
  }
</script>

We can then add our component to our header or footer or wherever we want to place it.

<footer>
  <TheCookieBox />
</footer>

And that's it. we now have a cookie consent banner on our site