CookiesModule

Cookies - Модуль для работы с куками

Nuxt install

// nuxt.config.js
export default {
  modules: [
    'shared-front/nuxt/cookies',
  ],
};

Module options

parseJSON

• type: boolean
• default: true

Аргумент для cookie-universal

Vue install

Vue 2

// main.js
import Vue from 'vue';
import { Plugin, useCookiesSymbol } from 'shared-front/lib/modules/cookies';

Vue.use(Plugin, {
  parseJSON: true,
});

const app = new Vue({
  // For using `useCookies` and `useCookie`
  provide: {
    [useCookiesSymbol]: Vue.prototype.$cookies,
  },
});

Vue 3

// main.ts
import { createApp } from 'vue';
import { Plugin } from 'shared-front/lib/modules/cookies';

import App from './App.vue';

const app = createApp(App);

app.use(Plugin, {
  parseJSON: true,
});

composables

useCookies

Получение инстанса ICookie

useCookie

Аналог nuxt 3 useCookie

Аргументы

name

• type: string
• required: true

Название куки

options.cookies

• type: ICookie
• default: useCookies()

Инстанс cookie-universal

options.default

• type: () => T
• required: false

Дефолтное значение для рефа

options

Опции для простановки куки

• type: CookieSerializeOptions
• default: {}

interface CookieSerializeOptions {
  domain?: string;
  expires?: Date;
  httpOnly?: boolean;
  maxAge?: number;
  path?: string;
  sameSite?: boolean | 'lax' | 'strict' | 'none';
  secure?: boolean;
}

Return

• type: WritableComputedRef<T>

Example

<template>
  <div>
    Server cookie counter: {{ serverCounter }}
    <br>
    Client cookie counter: {{ clientCounter }}
    <br>
    Ref cookie counter: {{ refCounter }}

    <br>

    <button @click="onClick">
      Click
    </button>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';

import { useCookies, useCookie } from '#sf/modules/cookies';

const cookies = useCookies();

let serverCounter = Number(cookies.get('server-counter')) || 0;
let clientCounter = Number(cookies.get('client-counter')) || 0;
const refCounter = useCookie('counter', {
  default: () => 0,
});


if (process.server) {
  cookies.set('server-counter', ++serverCounter);
}

const onClick = () => {
  refCounter.value++;
};

onMounted(() => {
  cookies.set('client-counter', ++clientCounter);
});
</script>