I've read how to use vue-cookies in composition api.

Just to confirm, have you imported inject ? <div c

I'm currently working on vue3 with <code class="notra

vue-cookies isn't working in composition api ? about vue-cookies HOT 2 OPEN

hakimov-dev commented on June 12, 2024

vue-cookies isn't working in composition api ?

from vue-cookies.

Comments (2)

julisch94 commented on June 12, 2024

Just to confirm, have you imported inject?

import { inject } from 'vue'

from vue-cookies.

Kharente-Deuh commented on June 12, 2024

I'm currently working on vue3 with composition Api and Vite (cf vitesse https://github.com/antfu/vitesse/tree/main), and its working well for me.
Here's my implementation:

src/main.ts:

import { ViteSSG } from 'vite-ssg'
import { setupLayouts } from 'virtual:generated-layouts'
import * as cookies from 'vue-cookies'

// import Previewer from 'virtual:vue-component-preview'
import App from './App.vue'
import generatedRoutes from '~pages'
import './styles/main.scss'

const routes = setupLayouts(generatedRoutes)

// https://github.com/antfu/vite-ssg
export const createApp = ViteSSG(
  App,
  { routes, base: import.meta.env.BASE_URL },
  (ctx) => {
    ctx.app.use(cookies)
  },
)

src/composables/cookies.ts:

import { inject } from 'vue'
import type { VueCookies } from 'vue-cookies'

export function useCookies(): VueCookies {
  const $cookies = inject<VueCookies>('$cookies')
 // For js, use const $cookies = inject('$cookies')

  return $cookies as VueCookies
}

And then, use it like that:
src/App.vue:

<script setup lang="ts">
const cookies = useCookies()

cookies.set('Set-Cookie', 'HttpOnly;Secure;SameSite=Strict')
</script>

<template>
  <RouterView />
</template>