[{"data":1,"prerenderedAt":778},["ShallowReactive",2],{"blog-article-/blog/nuxt-cookie-consent":3,"blog-surround-/blog/nuxt-cookie-consent":769},{"id":4,"title":5,"body":6,"canonical":756,"date":757,"description":12,"extension":758,"featured":759,"image":760,"meta":761,"navigation":158,"ogImage":756,"path":762,"provider":763,"published":759,"seo":764,"stem":765,"tags":766,"url":756,"__hash__":768},"blog/blog/nuxt-cookie-consent.md","Adding a cookie consent banner",{"type":7,"value":8,"toc":754},"minimark",[9,13,23,49,52,122,125,202,205,412,421,435,438,506,509,633,636,712,715,748,751],[10,11,12],"p",{},"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.",[10,14,15,16],{},"To add a cookie banner to your Nuxt.js application you can use the ",[17,18,22],"a",{"href":19,"rel":20},"https://github.com/EvodiaAut/vue-cookieconsent-component",[21],"nofollow","vue-cookieconsent-component",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-bash shiki shiki-themes github-light github-dark","yarn add vue-cookieconsent-component\n","bash","",[31,32,33],"code",{"__ignoreMap":29},[34,35,38,42,46],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"sScJk","yarn",[34,43,45],{"class":44},"sZZnC"," add",[34,47,48],{"class":44}," vue-cookieconsent-component\n",[10,50,51],{},"We then create a cookie box component with the props of message and link-label.",[24,53,58],{"className":54,"code":55,"filename":56,"language":57,"meta":29,"style":29},"language-html shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003CCookieConsent\n    message=\"We use Cookies for user analysis and on-page improvements!\"\n    link-label=\"Learn about cookies\"\n  />\n\u003C/template>\n","CookieBox.vue","html",[31,59,60,73,83,95,106,112],{"__ignoreMap":29},[34,61,62,66,70],{"class":36,"line":37},[34,63,65],{"class":64},"sVt8B","\u003C",[34,67,69],{"class":68},"s9eBZ","template",[34,71,72],{"class":64},">\n",[34,74,76,79],{"class":36,"line":75},2,[34,77,78],{"class":64},"  \u003C",[34,80,82],{"class":81},"s7hpK","CookieConsent\n",[34,84,86,89,92],{"class":36,"line":85},3,[34,87,88],{"class":40},"    message",[34,90,91],{"class":64},"=",[34,93,94],{"class":44},"\"We use Cookies for user analysis and on-page improvements!\"\n",[34,96,98,101,103],{"class":36,"line":97},4,[34,99,100],{"class":40},"    link-label",[34,102,91],{"class":64},[34,104,105],{"class":44},"\"Learn about cookies\"\n",[34,107,109],{"class":36,"line":108},5,[34,110,111],{"class":64},"  />\n",[34,113,115,118,120],{"class":36,"line":114},6,[34,116,117],{"class":64},"\u003C/",[34,119,69],{"class":68},[34,121,72],{"class":64},[10,123,124],{},"And we then import our CookieConsent component.",[24,126,128],{"className":54,"code":127,"filename":56,"language":57,"meta":29,"style":29},"\u003Cscript>\n  import CookieConsent from 'vue-cookieconsent-component/src/components/CookieConsent.vue'\n\n  export default {\n    components: {\n      CookieConsent\n    }\n  }\n\u003C/script>\n",[31,129,130,139,154,160,171,176,181,187,193],{"__ignoreMap":29},[34,131,132,134,137],{"class":36,"line":37},[34,133,65],{"class":64},[34,135,136],{"class":68},"script",[34,138,72],{"class":64},[34,140,141,145,148,151],{"class":36,"line":75},[34,142,144],{"class":143},"szBVR","  import",[34,146,147],{"class":64}," CookieConsent ",[34,149,150],{"class":143},"from",[34,152,153],{"class":44}," 'vue-cookieconsent-component/src/components/CookieConsent.vue'\n",[34,155,156],{"class":36,"line":85},[34,157,159],{"emptyLinePlaceholder":158},true,"\n",[34,161,162,165,168],{"class":36,"line":97},[34,163,164],{"class":143},"  export",[34,166,167],{"class":143}," default",[34,169,170],{"class":64}," {\n",[34,172,173],{"class":36,"line":108},[34,174,175],{"class":64},"    components: {\n",[34,177,178],{"class":36,"line":114},[34,179,180],{"class":64},"      CookieConsent\n",[34,182,184],{"class":36,"line":183},7,[34,185,186],{"class":64},"    }\n",[34,188,190],{"class":36,"line":189},8,[34,191,192],{"class":64},"  }\n",[34,194,196,198,200],{"class":36,"line":195},9,[34,197,117],{"class":64},[34,199,136],{"class":68},[34,201,72],{"class":64},[10,203,204],{},"We then add the styles so it looks how we want it to, positioned at the top or bottom of the page.",[24,206,208],{"className":54,"code":207,"filename":56,"language":57,"meta":29,"style":29},"\u003Cstyle>\n  .cookie-consent {\n    display: flex;\n    padding: 10px;\n    align-items: center;\n    align-self: center;\n    justify-content: center;\n    border-bottom: 1px solid white;\n    color: white;\n  }\n  .cookie-consent button {\n    border: 1px solid white;\n    padding: 10px;\n    margin-left: 20px;\n    min-width: 140px;\n  }\n\u003C/style>\n",[31,209,210,219,226,241,256,268,279,290,310,322,327,337,355,368,383,398,403],{"__ignoreMap":29},[34,211,212,214,217],{"class":36,"line":37},[34,213,65],{"class":64},[34,215,216],{"class":68},"style",[34,218,72],{"class":64},[34,220,221,224],{"class":36,"line":75},[34,222,223],{"class":40},"  .cookie-consent",[34,225,170],{"class":64},[34,227,228,232,235,238],{"class":36,"line":85},[34,229,231],{"class":230},"sj4cs","    display",[34,233,234],{"class":64},": ",[34,236,237],{"class":230},"flex",[34,239,240],{"class":64},";\n",[34,242,243,246,248,251,254],{"class":36,"line":97},[34,244,245],{"class":230},"    padding",[34,247,234],{"class":64},[34,249,250],{"class":230},"10",[34,252,253],{"class":143},"px",[34,255,240],{"class":64},[34,257,258,261,263,266],{"class":36,"line":108},[34,259,260],{"class":230},"    align-items",[34,262,234],{"class":64},[34,264,265],{"class":230},"center",[34,267,240],{"class":64},[34,269,270,273,275,277],{"class":36,"line":114},[34,271,272],{"class":230},"    align-self",[34,274,234],{"class":64},[34,276,265],{"class":230},[34,278,240],{"class":64},[34,280,281,284,286,288],{"class":36,"line":183},[34,282,283],{"class":230},"    justify-content",[34,285,234],{"class":64},[34,287,265],{"class":230},[34,289,240],{"class":64},[34,291,292,295,297,300,302,305,308],{"class":36,"line":189},[34,293,294],{"class":230},"    border-bottom",[34,296,234],{"class":64},[34,298,299],{"class":230},"1",[34,301,253],{"class":143},[34,303,304],{"class":230}," solid",[34,306,307],{"class":230}," white",[34,309,240],{"class":64},[34,311,312,315,317,320],{"class":36,"line":195},[34,313,314],{"class":230},"    color",[34,316,234],{"class":64},[34,318,319],{"class":230},"white",[34,321,240],{"class":64},[34,323,325],{"class":36,"line":324},10,[34,326,192],{"class":64},[34,328,330,332,335],{"class":36,"line":329},11,[34,331,223],{"class":40},[34,333,334],{"class":68}," button",[34,336,170],{"class":64},[34,338,340,343,345,347,349,351,353],{"class":36,"line":339},12,[34,341,342],{"class":230},"    border",[34,344,234],{"class":64},[34,346,299],{"class":230},[34,348,253],{"class":143},[34,350,304],{"class":230},[34,352,307],{"class":230},[34,354,240],{"class":64},[34,356,358,360,362,364,366],{"class":36,"line":357},13,[34,359,245],{"class":230},[34,361,234],{"class":64},[34,363,250],{"class":230},[34,365,253],{"class":143},[34,367,240],{"class":64},[34,369,371,374,376,379,381],{"class":36,"line":370},14,[34,372,373],{"class":230},"    margin-left",[34,375,234],{"class":64},[34,377,378],{"class":230},"20",[34,380,253],{"class":143},[34,382,240],{"class":64},[34,384,386,389,391,394,396],{"class":36,"line":385},15,[34,387,388],{"class":230},"    min-width",[34,390,234],{"class":64},[34,392,393],{"class":230},"140",[34,395,253],{"class":143},[34,397,240],{"class":64},[34,399,401],{"class":36,"line":400},16,[34,402,192],{"class":64},[34,404,406,408,410],{"class":36,"line":405},17,[34,407,117],{"class":64},[34,409,216],{"class":68},[34,411,72],{"class":64},[10,413,414,415,420],{},"We can also add a package called ",[17,416,419],{"href":417,"rel":418},"https://github.com/Developmint/vue-if-bot#readme",[21],"VueIfBot"," which will hide your cookie consent for search engine crawlers.",[24,422,424],{"className":26,"code":423,"language":28,"meta":29,"style":29},"yarn add vue-if-bot\n",[31,425,426],{"__ignoreMap":29},[34,427,428,430,432],{"class":36,"line":37},[34,429,41],{"class":40},[34,431,45],{"class":44},[34,433,434],{"class":44}," vue-if-bot\n",[10,436,437],{},"We then wrap our CookieConsent component in the IfBot component.",[24,439,441],{"className":54,"code":440,"filename":56,"language":57,"meta":29,"style":29},"\u003Ctemplate>\n  \u003CVueIfBot>\n    \u003CCookieConsent\n      message=\"We use Cookies for user analysis and on-page improvements!\"\n      link-label=\"Learn about cookies\"\n    />\n  \u003C/VueIfBot>\n\u003C/template>\n",[31,442,443,451,459,466,475,484,489,498],{"__ignoreMap":29},[34,444,445,447,449],{"class":36,"line":37},[34,446,65],{"class":64},[34,448,69],{"class":68},[34,450,72],{"class":64},[34,452,453,455,457],{"class":36,"line":75},[34,454,78],{"class":64},[34,456,419],{"class":81},[34,458,72],{"class":64},[34,460,461,464],{"class":36,"line":85},[34,462,463],{"class":64},"    \u003C",[34,465,82],{"class":81},[34,467,468,471,473],{"class":36,"line":97},[34,469,470],{"class":40},"      message",[34,472,91],{"class":64},[34,474,94],{"class":44},[34,476,477,480,482],{"class":36,"line":108},[34,478,479],{"class":40},"      link-label",[34,481,91],{"class":64},[34,483,105],{"class":44},[34,485,486],{"class":36,"line":114},[34,487,488],{"class":64},"    />\n",[34,490,491,494,496],{"class":36,"line":183},[34,492,493],{"class":64},"  \u003C/",[34,495,419],{"class":81},[34,497,72],{"class":64},[34,499,500,502,504],{"class":36,"line":189},[34,501,117],{"class":64},[34,503,69],{"class":68},[34,505,72],{"class":64},[10,507,508],{},"Or you could create your own content",[24,510,512],{"className":54,"code":511,"language":57,"meta":29,"style":29},"\u003Ccookie-consent>\n  \u003Ctemplate slot=\"message\">\n    This website uses cookies\n    \u003Ca class=\"btn btn-link\" href=\"/my-cookies\">Read more\u003C/a>\n  \u003C/template>\n  \u003Ctemplate slot=\"button\">\n    \u003Cbutton class=\"btn btn-info\">Accept\u003C/button>\n  \u003C/template>\n\u003C/cookie-consent>\n",[31,513,514,523,539,544,573,581,596,617,625],{"__ignoreMap":29},[34,515,516,518,521],{"class":36,"line":37},[34,517,65],{"class":64},[34,519,520],{"class":68},"cookie-consent",[34,522,72],{"class":64},[34,524,525,527,529,532,534,537],{"class":36,"line":75},[34,526,78],{"class":64},[34,528,69],{"class":68},[34,530,531],{"class":40}," slot",[34,533,91],{"class":64},[34,535,536],{"class":44},"\"message\"",[34,538,72],{"class":64},[34,540,541],{"class":36,"line":85},[34,542,543],{"class":64},"    This website uses cookies\n",[34,545,546,548,550,553,555,558,561,563,566,569,571],{"class":36,"line":97},[34,547,463],{"class":64},[34,549,17],{"class":68},[34,551,552],{"class":40}," class",[34,554,91],{"class":64},[34,556,557],{"class":44},"\"btn btn-link\"",[34,559,560],{"class":40}," href",[34,562,91],{"class":64},[34,564,565],{"class":44},"\"/my-cookies\"",[34,567,568],{"class":64},">Read more\u003C/",[34,570,17],{"class":68},[34,572,72],{"class":64},[34,574,575,577,579],{"class":36,"line":108},[34,576,493],{"class":64},[34,578,69],{"class":68},[34,580,72],{"class":64},[34,582,583,585,587,589,591,594],{"class":36,"line":114},[34,584,78],{"class":64},[34,586,69],{"class":68},[34,588,531],{"class":40},[34,590,91],{"class":64},[34,592,593],{"class":44},"\"button\"",[34,595,72],{"class":64},[34,597,598,600,603,605,607,610,613,615],{"class":36,"line":183},[34,599,463],{"class":64},[34,601,602],{"class":68},"button",[34,604,552],{"class":40},[34,606,91],{"class":64},[34,608,609],{"class":44},"\"btn btn-info\"",[34,611,612],{"class":64},">Accept\u003C/",[34,614,602],{"class":68},[34,616,72],{"class":64},[34,618,619,621,623],{"class":36,"line":189},[34,620,493],{"class":64},[34,622,69],{"class":68},[34,624,72],{"class":64},[34,626,627,629,631],{"class":36,"line":195},[34,628,117],{"class":64},[34,630,520],{"class":68},[34,632,72],{"class":64},[10,634,635],{},"And of course we must import it in our script tag",[24,637,639],{"className":54,"code":638,"filename":56,"language":57,"meta":29,"style":29},"\u003Cscript>\n  import VueIfBot from 'vue-if-bot/dist/vue-if-bot.es'\n  import CookieConsent from 'vue-cookieconsent-component/src/components/CookieConsent.vue'\n\n  export default {\n    components: {\n      VueIfBot,\n      CookieConsent\n    }\n  }\n\u003C/script>\n",[31,640,641,649,661,671,675,683,687,692,696,700,704],{"__ignoreMap":29},[34,642,643,645,647],{"class":36,"line":37},[34,644,65],{"class":64},[34,646,136],{"class":68},[34,648,72],{"class":64},[34,650,651,653,656,658],{"class":36,"line":75},[34,652,144],{"class":143},[34,654,655],{"class":64}," VueIfBot ",[34,657,150],{"class":143},[34,659,660],{"class":44}," 'vue-if-bot/dist/vue-if-bot.es'\n",[34,662,663,665,667,669],{"class":36,"line":85},[34,664,144],{"class":143},[34,666,147],{"class":64},[34,668,150],{"class":143},[34,670,153],{"class":44},[34,672,673],{"class":36,"line":97},[34,674,159],{"emptyLinePlaceholder":158},[34,676,677,679,681],{"class":36,"line":108},[34,678,164],{"class":143},[34,680,167],{"class":143},[34,682,170],{"class":64},[34,684,685],{"class":36,"line":114},[34,686,175],{"class":64},[34,688,689],{"class":36,"line":183},[34,690,691],{"class":64},"      VueIfBot,\n",[34,693,694],{"class":36,"line":189},[34,695,180],{"class":64},[34,697,698],{"class":36,"line":195},[34,699,186],{"class":64},[34,701,702],{"class":36,"line":324},[34,703,192],{"class":64},[34,705,706,708,710],{"class":36,"line":329},[34,707,117],{"class":64},[34,709,136],{"class":68},[34,711,72],{"class":64},[10,713,714],{},"We can then add our component to our header or footer or wherever we want to place it.",[24,716,719],{"className":54,"code":717,"filename":718,"language":57,"meta":29,"style":29},"\u003Cfooter>\n  \u003CTheCookieBox />\n\u003C/footer>\n","TheFooter.vue",[31,720,721,730,740],{"__ignoreMap":29},[34,722,723,725,728],{"class":36,"line":37},[34,724,65],{"class":64},[34,726,727],{"class":68},"footer",[34,729,72],{"class":64},[34,731,732,734,737],{"class":36,"line":75},[34,733,78],{"class":64},[34,735,736],{"class":81},"TheCookieBox",[34,738,739],{"class":64}," />\n",[34,741,742,744,746],{"class":36,"line":85},[34,743,117],{"class":64},[34,745,727],{"class":68},[34,747,72],{"class":64},[10,749,750],{},"And that's it. we now have a cookie consent banner on our site",[216,752,753],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":29,"searchDepth":75,"depth":75,"links":755},[],null,"2020-07-29","md",false,"photo-1558961363-fa8fdf82db35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop",{},"/blog/nuxt-cookie-consent","imgix",{"title":5,"description":12},"blog/nuxt-cookie-consent",[767],"nuxt","PTkGoHH1y4A5STowwA-BWrxDnAzxsk_m-dwbmxCLnUg",[770,774],{"title":771,"path":772,"stem":773,"children":-1},"The JavaScript Array.Map() method","/blog/js-array-map-method","blog/js-array-map-method",{"title":775,"path":776,"stem":777,"children":-1},"Setting up cypress","/blog/cypress-setup","blog/cypress-setup",1790839748146]