Nuxt•15mo ago•

5 replies

Issue with Vue 3 + Nuxt 3 useFetch Data Not Displaying in Template

Background

I’m building an app using Nuxt 3 and Vue 3 (Node v20.18.0). I’m running into a fundamental issue with template reactivity when trying to display data fetched with

useFetch

useFetch

. Specifically:
- I can log the data from

useFetch

useFetch

<script setup>

<script setup>

, and the data is correct.
- However, when binding to the fetched data in the template, the expected reactivity doesn’t occur.
- Some solutions work (like wrapping the data in

computed

computed

), but they feel unnecessary for something as fundamental as this.

What I’ve Tried

1. Debugging Data Reactivity

console.log("Data:", data.value); 
console.log("Title:", data.value.title);

console.log("Data:", data.value); 
console.log("Title:", data.value.title);

- These logs always show the correct data and title values.

2. Providing Default Values

const { data } = await useFetch('/api', { default: () => ({ title: 'Untitled' }) });

const { data } = await useFetch('/api', { default: () => ({ title: 'Untitled' }) });

- Ensures

data.value

data.value

is initialized, but this doesn’t fix the template reactivity for

data.value.title

data.value.title

3. Optional Chaining in the Template

<p v-else>Title: {{ data?.value?.title || 'No title available' }}</p>

<p v-else>Title: {{ data?.value?.title || 'No title available' }}</p>

- Prevents errors but still doesn’t display the title, even though

<pre>{{ data }}</pre>

<pre>{{ data }}</pre>

confirms it exists.

4. Using
computed
computed

const computedData = computed(() => data.value);

const computedData = computed(() => data.value);

- This works, and the title renders correctly when accessed as

computedData.title

computedData.title

Questions

1. Why is template reactivity for
data.value.title
data.value.title
failing?
- This seems like a fundamental part of Vue’s reactivity system, so I’m not sure why I need

computed

computed

for it to work.

2. Is this an issue with Nuxt’s
useFetch
useFetch
?
- Could Nuxt be optimizing reactivity in a way that breaks expected behavior for deep properties?

3. Am I misusing
useFetch
useFetch
?
- Is there a better way to fetch data in Nuxt 3 to avoid this issue entirely?

4. Is this a known issue?
- I couldn’t find documentation addressing this specific behavior. Should I file a bug report?

Nuxt•15mo ago•

5 replies

kāné

Issue with Vue 3 + Nuxt 3 useFetch Data Not Displaying in Template

Background

I’m building an app using Nuxt 3 and Vue 3 (Node v20.18.0). I’m running into a fundamental issue with template reactivity when trying to display data fetched with

useFetch

useFetch

. Specifically:
- I can log the data from

useFetch

useFetch

<script setup>

<script setup>

, and the data is correct.
- However, when binding to the fetched data in the template, the expected reactivity doesn’t occur.
- Some solutions work (like wrapping the data in

computed

computed

), but they feel unnecessary for something as fundamental as this.

What I’ve Tried

1. Debugging Data Reactivity

console.log("Data:", data.value); 
console.log("Title:", data.value.title);

console.log("Data:", data.value); 
console.log("Title:", data.value.title);

- These logs always show the correct data and title values.

2. Providing Default Values

const { data } = await useFetch('/api', { default: () => ({ title: 'Untitled' }) });

const { data } = await useFetch('/api', { default: () => ({ title: 'Untitled' }) });

- Ensures

data.value

data.value

is initialized, but this doesn’t fix the template reactivity for

data.value.title

data.value.title

3. Optional Chaining in the Template

<p v-else>Title: {{ data?.value?.title || 'No title available' }}</p>

<p v-else>Title: {{ data?.value?.title || 'No title available' }}</p>

- Prevents errors but still doesn’t display the title, even though

<pre>{{ data }}</pre>

<pre>{{ data }}</pre>

confirms it exists.

4. Using
computed
computed

const computedData = computed(() => data.value);

const computedData = computed(() => data.value);

- This works, and the title renders correctly when accessed as

computedData.title

computedData.title

Questions

1. Why is template reactivity for
data.value.title
data.value.title
failing?
- This seems like a fundamental part of Vue’s reactivity system, so I’m not sure why I need

computed

computed

Issue with Vue 3 + Nuxt 3 useFetch Data Not Displaying in Template

Background

What I’ve Tried

1. Debugging Data Reactivity

2. Providing Default Values

3. Optional Chaining in the Template

4. Using
`computed`
`computed`

Questions

Issue with Vue 3 + Nuxt 3 useFetch Data Not Displaying in Template

Background

What I’ve Tried

1. Debugging Data Reactivity

2. Providing Default Values

3. Optional Chaining in the Template

4. Using
`computed`
`computed`

Questions

Similar Threads

Similar Threads

Similar Threads

Issue with Vue 3 + Nuxt 3 useFetch Data Not Displaying in Template

Background

What I’ve Tried

1. Debugging Data Reactivity

2. Providing Default Values

3. Optional Chaining in the Template

4. Using computedcomputed

Questions

Issue with Vue 3 + Nuxt 3 useFetch Data Not Displaying in Template

Background

What I’ve Tried

1. Debugging Data Reactivity

2. Providing Default Values

3. Optional Chaining in the Template

4. Using computedcomputed

Questions

Similar Threads

Similar Threads

Similar Threads

4. Using
`computed`
`computed`

4. Using
`computed`
`computed`