useCookie example is misleading
See original GitHub issueEnvironment
- Operating System:
Linux
- Node Version:
v16.14.1
- Nuxt Version:
3.0.0-rc.1
- Package Manager:
npm@8.5.0
- Builder:
vite
- User Config:
vite
- Runtime Modules:
-
- Build Modules:
-
Reproduction
clone this repo ^
npm install
npm run dev
browse to localhost:3000
On Chrome :
- Press F12
- Go to the Application tab
- In “Storage”, click on “Cookies” then “Localhost:3000”
There should be a cookie with name “foo” and value “bar”, but that’s not the case because of the bug explained below.
Describe the bug
I want my client to get access to a specific cookie based on an example function given in the documentation here : https://v3.nuxtjs.org/guide/features/data-fetching#example-pass-on-cookies-from-server-side-api-calls-on-ssr-response
The only modification is that I added an object which sets the method type to GET
and useRequestHeaders()
which is needed in my case (even if you remove it, it doesn’t change much).
But I get an error 500 : nuxt instance unavailable (i.e. Logs)
Additional context
No response
Logs
[Vue warn]: Unhandled error during execution of setup function
at <App>
[nuxt] [request error] nuxt instance unavailable
at Module.useNuxtApp (./.nuxt/dist/server/server.mjs:396:13)
at Module.useRequestEvent (./.nuxt/dist/server/server.mjs:1234:58)
at readRawCookies (./.nuxt/dist/server/server.mjs:1122:62)
at Module.useCookie (./.nuxt/dist/server/server.mjs:1101:19)
at Module.fetchWithCookie (./.nuxt/dist/server/server.mjs:3428:26)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async setup (./.nuxt/dist/server/server.mjs:3374:12)
Issue Analytics
- State:
- Created a year ago
- Reactions:6
- Comments:9 (3 by maintainers)
Top Results From Across the Web
UseCookies in reactjs not working well - JavaScript
I need to check whenever the cookie name is Login or Default to check if the person is logged in so i wrote...
Read more >useCookie | @lilib/hooks - GitHub Pages
useCookie. This hook use js-cookie as the parser. ... Default is false . options.pollingInterval : Polling interval time, ... function Example() {
Read more >useCookie · Nuxt Composables
useCookie is an SSR-friendly composable to read and write cookies. ... changes for only top level properties; false Will not watch cookie ref...
Read more >React Cookies management with simple hooks
import React, { Component } from 'react'; import { useCookies } from '@js-smart/react-cookie-service'; export default function Example() ...
Read more >useCookies - VueUse
doNotParse (boolean = false): do not convert the cookie into an object no matter ... and returns useCookies function with provided universal-cookie instance....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@danielroe This solution is not practical because we have to define the cookie to retrieve in advance, but in some situations we have to wait for the return of the $fetch to parse the set-cookie and get the keys and their values. It would be cool to propose an example with a plugin
This is exactly how I fixed my problem and yes that part of the documentation is misleading.
It would be nice to have a proper example if anyone else wants to do the same as a plugin/middleware for example.