Skip to content

vue-cookies isn't working in composition api ? #93

Closed
@hakimov-dev

Description

@hakimov-dev

I've read how to use vue-cookies in composition api. int that place:
Screenshot_1

Then i use inject for using $cookie in composition api, but i received this bug:
image

What should i do ? How i can fix that ?

Activity

julisch94

julisch94 commented on Oct 10, 2023

@julisch94

Just to confirm, have you imported inject?

import { inject } from 'vue'
Kharente-Deuh

Kharente-Deuh commented on Oct 26, 2023

@Kharente-Deuh

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @cmp-cc@julisch94@Kharente-Deuh@hakimov-dev

        Issue actions

          vue-cookies isn't working in composition api ? · Issue #93 · cmp-cc/vue-cookies