docs(example): Nuxt Data Fetch

[alexwpengine]

Description

Ready for review.

1. Template hierarchy "stolen" from Alex examples (Svelte/Astro).
2. Mutations are triggered by submitting a comment.
3. CSR is in Load More in Blog page.
4. useGraphQL - SSR and CSR.
5. All imported demo content must be working (any links for routing, buttons, submission, menu items etc.).

Related Issue

closes #174

Type of Change

• ✅ Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to change)
• 🧹 Code refactoring (no functional changes)
• 📄 Example update (no functional changes)
• 📝 Documentation update
• 🔍 Performance improvement
• 🧪 Test update

How Has This Been Tested?

Screenshots

Checklist

• I have read the CONTRIBUTING document
• My code follows the project's coding standards
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (if applicable)
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• Any dependent changes have been highlighted, merged or published

[ahuseyn]

@alexwpengine I had an issue running the example.
These are the steps I've taken:

1. npm run example:setup
2. npm run example:start

Here is the result:

 
ℹ Error: [GET] "http://127.0.0.1:63028/__nuxt_vite_node__/manifest": 500 Server Error

 ⁃ at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
 ⁃ at async $fetchRaw2 (node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:311:14)

   306 ┃          await callHooks(
   307 ┃            context,
   308 ┃            context.options.onResponseError
   309 ┃          );
   310 ┃        }
 ❯ 311 ┃        return await onError(context);
   312 ┃      }
   313 ┃      return context.response;
   314 ┃    };
   315 ┃    const $fetch = async function $fetch2(request, options) {
   316 ┃      const r = await $fetchRaw(request, options);

 ⁃ at async $fetch2 (node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:316:15)
 ⁃ at async <anonymous> (node_modules/nuxt/dist/core/runtime/nitro/utils/renderer/build-files.js:14:20)
 ⁃ at async Object.render (node_modules/nuxt/dist/core/runtime/nitro/handlers/renderer.js:69:20)
 ⁃ at async Object.handler (node_modules/nitropack/dist/runtime/internal/renderer.mjs:25:22)
 ⁃ (async file://node_modules/h3/dist/index.mjs:2003:19)
 ⁃ at async Object.callAsync (node_modules/unctx/dist/index.mjs:72:16)
 ⁃ at async toNodeHandle (node_modules/h3/dist/index.mjs:2295:7)
 ⁃ at async b (node_modules/node-mock-http/dist/index.mjs:1:6808)

[CAUSE]
FetchError {
  stack: '[GET] "http://127.0.0.1:63028/__nuxt_vite_node__/manifest": 500 Server Error\n' +
  '    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)\n' +
  'at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:311:14)\n' +
  'at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:316:15)\n' +
  'at async <anonymous> (./node_modules/nuxt/dist/core/runtime/nitro/utils/renderer/build-files.js:14:20)\n' +
  'at async Object.render (./node_modules/nuxt/dist/core/runtime/nitro/handlers/renderer.js:69:20)\n' +
  'at async Object.handler (./node_modules/nitropack/dist/runtime/'... 617 more characters,
  message: '[GET] "http://127.0.0.1:63028/__nuxt_vite_node__/manifest": 500 
  Server Error',
  name: 'FetchError',
  request: [Getter]
  options: [Getter]
  response: [Getter]
  data: [Getter]
  status: [Getter]
  statusCode: [Getter]
  statusText: [Getter]
  statusMessage: [Getter]
}

[alexwpengine]

@ahuseyn It's fixed. I had some svelte stuff hanging there. I used the svelte and next/client-app-router-fetch-data as examples in this PR.

You can review it briefly and let me know how it is, since I am not 100% ready but I think I'm getting there. I've added some basic styling and I'm trying to make any sample data visible and working (cats, tags, links clickable and routing correctly).

[ahuseyn]

Thanks @alexwpengine! I'll check ASAP.

[moonmeister]

@alexwpengine, Please respond to and close any review comments. You don't have to implement if you disagree, but please communicate your decisions.

UPDATE: Oops, I never submitted my review. My bad... it's there now

[changeset-bot]

⚠️ No Changeset found

Latest commit: fea569d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR