Skip to content

fix(tutorial): fetch todo data on mount instead of in setup - #3472

Open
hermanrous wants to merge 1 commit into
vuejs:mainfrom
hermanrous:docs/step10-ssr-safe-fetch
Open

hermanrous wants to merge 1 commit into
vuejs:mainfrom
hermanrous:docs/step10-ssr-safe-fetch

Conversation

@hermanrous

Copy link
Copy Markdown

Description of Problem

Tutorial step 10's composition-API variant calls fetchData() directly inside setup(). The request fires during server-side rendering and the result is discarded — an SSR-unsafe pattern that users may copy into production. The step description already says todos are fetched "on component mount", and the Options API variant uses mounted().

Proposed Solution

Move the initial fetch into onMounted() in both App/composition.js and _hint/App/composition.js, matching the existing step description and the Options API variant. Browser behavior is unchanged (data loads immediately after mount), and the watch-based todo filtering is unaffected.

Additional Information

Closes #2416.

@netlify

netlify Bot commented Oct 2, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for vuejs ready!

Name Link
🔨 Latest commit 7b4eb3a
🔍 Latest deploy log https://app.netlify.com/projects/vuejs/deploys/6abfcce0973e6b0007ddf1ac
😎 Deploy Preview https://deploy-preview-3472--vuejs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

The fetchData usage in the tutorial step 10 is unsafe.

1 participant