Nuxt•6mo ago

Cannot stringify arbitrary non-POJOs RefImpl

Hello, I would like to migrate a project from Nuxt 2 to Nuxt 3. So I'm exploring a bit, and I'm trying to familiarize myself with useFetch. The problem is that I just created a project (completely empty), And when I try to use useFetch, I get an error message and I can't use it as in the documentation. Here's my code: pages/index.vue

<template>
</template>

<script setup lang="ts">
const { data } = await useFetch('https://jsonplaceholder.typicode.com/todos/1')
console.log(data)
</script>

<template>
</template>

<script setup lang="ts">
const { data } = await useFetch('https://jsonplaceholder.typicode.com/todos/1')
console.log(data)
</script>

package.json

"dependencies": {
  "nuxt": "^3.11.1",
  "sass": "^1.72.0",
  "vue": "^3.4.21",
  "vue-router": "^4.3.0"
}

"dependencies": {
  "nuxt": "^3.11.1",
  "sass": "^1.72.0",
  "vue": "^3.4.21",
  "vue-router": "^4.3.0"
}

Response:

RefImpl {
  __v_isShallow: false,
  dep: undefined,
  __v_isRef: true,
  _rawValue: { userId: 1, id: 1, title: 'delectus aut autem', completed: false },
  _value: { userId: 1, id: 1, title: 'delectus aut autem', completed: false } }

 WARN  Cannot stringify arbitrary non-POJOs RefImpl

RefImpl {
  __v_isShallow: false,
  dep: undefined,
  __v_isRef: true,
  _rawValue: { userId: 1, id: 1, title: 'delectus aut autem', completed: false },
  _value: { userId: 1, id: 1, title: 'delectus aut autem', completed: false } }

 WARN  Cannot stringify arbitrary non-POJOs RefImpl

What i'm doing wrong ?

3 Replies

danielroe•6mo ago

Try console.log(data.value)

GFoniX•6mo ago

Okay it was just this x)

GFoniX•6mo ago

And do you know why my IDE don't understand the type ? It's working well in the <script setup lang="ts"> but not in the template on top

Gaming

Programming

Cannot stringify arbitrary non-POJOs RefImpl