Add a cookie consent message

Context

We need to inform a user, that some cookies are being stored. Simple message + link to privacy policy + button to dismiss cookies

I have reviewed couple of packages, this one seems to be ok + it has good config options → https://www.npmjs.com/package/cookieconsent (documentation)

Problem

This (and other packages) need to be executed at client, so they can store a cookie, that consent has been dismissed, so it isn't shown on the web indefinitely. When you go through step-by-step guide to config the cookieconsent, you'll end up with an easy solution:

However, I don't know where to place the code in Nuxt app. Let me elaborate

Load script/style in the Head

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />

this is not an issue, since the package can be also installed (npm install cookieconsent --save)
or it can be placed as an external resource in config.nuxt.js

Place js config somewhere

The problem is where to place this:

<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#edeff5",
      "text": "#838391"
    },
    "button": {
      "background": "#4b81e8"
    }
  },
  "theme": "classic",
  "content": {
    "message": "TBD custom cookies msg to go here.",
    "href": "https://tota.sk/podmienky-pouzivania"
  }
});
</script>

The problem is that this should be executed at client, not at a server as the templates are usually executed in Nuxt. Here's a very slight hint on what can be done about it in Nuxt Docs

surfinzap / tota