Hacktoberfest 2026：維護者為十月標記出來的 issue，仍然開放、適合新手。 瀏覽 Hacktoberfest issue

docs: How to wrap useAsyncData for SSR aware code (seo meta tags)

未關閉
  • 哪裡不對？
#466 0 則留言 1 個 reaction 已指派 0 人 在 GitHub 檢視

維護者通常 1 天內回覆

還沒有人認領這個 Issue。

評估

難度
2/5
預估耗時
1-3 小時
新手友好度
52/100
Issue 類型
文件
描述清晰度
基本清楚
活躍度
停滯
技術堆疊
nuxt, typescript
領域
documentation

研究方向

從連結的 cookbook 中的「單一程式碼庫」段落開始，並將其中關於 useAsyncData 的指引與回報的 useIonMeta workaround 進行比較。使用一個清楚的、針對非同步 SEO 資料的 SSR-aware wrapper 範例更新該段落，其中包括預期的伺服器端和用戶端行為。

由索引模型根據 Issue 內容生成。

描述

documentation
📚 Is your documentation request related to a problem?

I want to set meta tags server side for the web build.

The doc mentions to wrap useAsyncData for SSR aware code.

It is unclear how a implementation for such a wrapper function would look like.

🔍 Where should you find it?

https://ionic.nuxtjs.org/cookbook/web-and-device#a-single-codebase

ℹ️ Additional context

Our current workaround for SSR to set meta tags from asynchronous data on a nuxt/ionic web server is to

  1. Wrap useSeoMeta & useServerSeoMeta like so:
useIonMeta.ts

export function useIonMeta(seoInput: UseSeoMetaInput) {
  useServerSeoMeta(seoInput);

  onIonViewWillEnter(() => {
    useSeoMeta(seoInput);
  });
}
  1. Query async data and set tags in App.vue
App.vue

const { data } = await useFetch(`https://gorest.co.in/public/v2/users`);

  useIonMeta({
    title: () => data.value?.name,
    // more meta tags e.g. description, ogImageUrl, etc
  });

I would be more than happy to modify the docs and create a PR.

Thanks

主要語言
TypeScript
星號
458
分支
53
平均合併
15 小時 54 分鐘
30 天內合併 PR
25

環境準備

這個專案沒有提供開發容器、Dockerfile 或貢獻指南，環境需要你自己搭建：先看它的 README，通用步驟見我們的新手貢獻指南。

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

nuxt-modules/ionic 的其他 Issue

查看 nuxt-modules/ionic 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。