fix: use js-cookie outside component

Author: dargmuesli

src/runtime/components/CookieControl.vue

@@ -87,9 +87,8 @@
                           getCookieIds(localCookiesEnabled)?.includes(
                             getCookieId(cookie)
                           ) ||
-                          (Cookies.get(
-                            moduleOptions.cookieNameIsConsentGiven
-                          ) !== 'true' &&
+                          (getCookie(moduleOptions.cookieNameIsConsentGiven) !==
+                            'true' &&
                             typeof moduleOptions.isIframeBlocked === 'object' &&
                             moduleOptions.isIframeBlocked.initialState)
                         "
@@ -162,11 +161,17 @@
 </template>
 
 <script setup lang="ts">
-import Cookies from 'js-cookie'
 import { ref, computed, onBeforeMount, watch } from 'vue'
 
 import { Cookie, CookieType, Locale, Translatable } from '../types'
-import { getCookieId, getCookieIds, useResolveTranslatable } from '../methods'
+import {
+  getCookie,
+  getCookieId,
+  getCookieIds,
+  removeCookie,
+  setCookie,
+  useResolveTranslatable,
+} from '../methods'
 
 import { useCookieControl } from '#imports'
 
@@ -301,7 +306,7 @@ onBeforeMount(async () => {
     isColorsSet.value = true
   }
 
-  if (Cookies.get(moduleOptions.cookieNameIsConsentGiven) === 'true') {
+  if (getCookie(moduleOptions.cookieNameIsConsentGiven) === 'true') {
     for (const cookieOptional of moduleOptions.cookies.optional) {
       if (
         typeof moduleOptions.isIframeBlocked === 'boolean'
@@ -319,7 +324,7 @@ watch(
     localCookiesEnabled.value = [...(current || [])]
 
     if (isConsentGiven.value) {
-      Cookies.set(
+      setCookie(
         moduleOptions.cookieNameCookiesEnabledIds,
         getCookieIds(current || []).join(','),
         {
@@ -335,7 +340,7 @@ watch(
         document.getElementsByTagName('head')[0].appendChild(script)
       }
     } else {
-      Cookies.remove(moduleOptions.cookieNameCookiesEnabledIds)
+      removeCookie(moduleOptions.cookieNameCookiesEnabledIds)
     }
 
     // delete formerly enabled cookies that are now disabled
@@ -347,7 +352,7 @@ watch(
       if (!cookieOptionalDisabled.targetCookieIds) continue
 
       for (const cookieOptionalDisabledId of cookieOptionalDisabled.targetCookieIds) {
-        Cookies.remove(cookieOptionalDisabledId)
+        removeCookie(cookieOptionalDisabledId)
       }
 
       if (cookieOptionalDisabled.src) {
@@ -365,9 +370,9 @@ watch(
 )
 watch(isConsentGiven, (current, _previous) => {
   if (current === undefined) {
-    Cookies.remove(moduleOptions.cookieNameIsConsentGiven)
+    removeCookie(moduleOptions.cookieNameIsConsentGiven)
   } else {
-    Cookies.set(moduleOptions.cookieNameIsConsentGiven, current.toString(), {
+    setCookie(moduleOptions.cookieNameIsConsentGiven, current.toString(), {
       expires,
     })
   }

src/runtime/methods.ts

@@ -1,20 +1,20 @@
+import Cookies from 'js-cookie'
 import slugify from '@sindresorhus/slugify'
 
 import { LOCALE_DEFAULT } from './constants'
 import { Cookie, Translatable } from './types'
 
+export const getCookie = (name: string) => Cookies.get(name)
+
 export const getCookieId = (cookie: Cookie) =>
   cookie.id || slugify(resolveTranslatable(cookie.name))
 
 export const getCookieIds = (cookies: Cookie[]) =>
   cookies.map((cookie) => getCookieId(cookie))
 
-export const useResolveTranslatable = (locale = LOCALE_DEFAULT) => {
-  return (translatable: Translatable) =>
-    resolveTranslatable(translatable, locale)
-}
+export const removeCookie = (name: string) => Cookies.remove(name)
 
-const resolveTranslatable = (
+export const resolveTranslatable = (
   translatable: Translatable,
   locale = LOCALE_DEFAULT
 ) => {
@@ -30,3 +30,14 @@ const resolveTranslatable = (
 
   return result
 }
+
+export const setCookie = (
+  name: string,
+  value: string,
+  options: Cookies.CookieAttributes
+) => Cookies.set(name, value, options)
+
+export const useResolveTranslatable = (locale = LOCALE_DEFAULT) => {
+  return (translatable: Translatable) =>
+    resolveTranslatable(translatable, locale)
+}