use Vue Cookies to create modal and allow users to accept all or some of the cookies

accept-cookies.vue

<template>
  <div>
    <div v-if="!acceptedCookies">
      <p>This website uses cookies for:</p>
      <label>
        <input type="checkbox" v-model="acceptedAnalyticsCookies">
        Analytics
      </label>
      <label>
        <input type="checkbox" v-model="acceptedFunctionalCookies">
        Functional
      </label>
      <label>
        <input type="checkbox" v-model="acceptedMarketingCookies">
        Marketing
      </label>
      <button @click="acceptAllCookies">Accept all cookies</button>
      <button @click="acceptSelectedCookies">Accept selected cookies</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import VueCookie from 'vue-cookie';

Vue.use(VueCookie);

export default {
  data() {
    return {
      acceptedAnalyticsCookies: this.$cookie.get('acceptedAnalyticsCookies') || false,
      acceptedFunctionalCookies: this.$cookie.get('acceptedFunctionalCookies') || false,
      acceptedMarketingCookies: this.$cookie.get('acceptedMarketingCookies') || false,
      acceptedCookies: false,
    };
  },
  computed: {
    acceptedCookies: function () {
      return this.acceptedAnalyticsCookies && this.acceptedFunctionalCookies && this.acceptedMarketingCookies;
    },
  },
  methods: {
    acceptAllCookies() {
      this.$cookie.set('acceptedAnalyticsCookies', true, { expires: '1D' });
      this.acceptedAnalyticsCookies = true;
      this.$cookie.set('acceptedFunctionalCookies', true, { expires: '1D' });
      this.acceptedFunctionalCookies = true;
      this.$cookie.set('acceptedMarketingCookies', true, { expires: '1D' });
      this.acceptedMarketingCookies = true;
    },
    acceptSelectedCookies() {
      if (this.acceptedAnalyticsCookies) {
        this.$cookie.set('acceptedAnalyticsCookies', true, { expires: '1D' });
      }
      if (this.acceptedFunctionalCookies) {
        this.$cookie.set('acceptedFunctionalCookies', true, { expires: '1D' });
      }
      if (this.acceptedMarketingCookies) {
        this.$cookie.set('acceptedMarketingCookies', true, { expires: '1D' });
      }
    },
  },
};
</script>