docs: How to wrap useAsyncData for SSR aware code (seo meta tags)
I maintainer di solito rispondono entro 1 giorno
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Idoneità per principianti
- 52/100
- Tipo di issue
- Documentazione
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- nuxt, typescript
- Ambito
- documentation
Direzione di ricerca
Inizia con la sezione «Un’unica codebase» del cookbook collegato e confronta le indicazioni su useAsyncData con il workaround useIonMeta segnalato. Aggiorna quella sezione con un esempio chiaro di wrapper SSR-aware per dati SEO asincroni, incluso il comportamento previsto lato server e lato client.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
📚 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
- Wrap useSeoMeta & useServerSeoMeta like so:
useIonMeta.ts
export function useIonMeta(seoInput: UseSeoMetaInput) {
useServerSeoMeta(seoInput);
onIonViewWillEnter(() => {
useSeoMeta(seoInput);
});
}
- 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
- Lingua principale
- TypeScript
- Stelle
- 458
- Fork
- 53
- Merge medio
- 15h 54m
- PR unite (30g)
- 25
Preparare l'ambiente
Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di nuxt-modules/ionic
-
bug
Difficoltà 3/5 1-2 giorni Idoneità per principianti 74/100
nuxt-modules/ionic#1004 ·
I maintainer di solito rispondono entro 1 giorno
-
bug
Difficoltà 4/5 3-5 giorni Idoneità per principianti 35/100
nuxt-modules/ionic#908 · 2 reazioni ·
I maintainer di solito rispondono entro 1 giorno
-
bug
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 35/100
nuxt-modules/ionic#867 ·
I maintainer di solito rispondono entro 1 giorno
-
bug needs reproduction
Difficoltà 4/5 3-5 giorni Idoneità per principianti 25/100
nuxt-modules/ionic#696 ·
I maintainer di solito rispondono entro 1 giorno
-
IonCardApertabug
Difficoltà 3/5 1-2 giorni Idoneità per principianti 25/100
nuxt-modules/ionic#610 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
Tutte le issue di nuxt-modules/ionic
Issue simili
-
area/frontend good first issue kind/cooldown
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
I maintainer di solito rispondono entro 1 giorno
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 85/100
voidzero-dev/oxc-angular-compiler#511 ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
langchain-ai/deepagentsjs#898 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 92/100
anomalyco/models.dev#8509 · 2 commenti ·
I maintainer di solito rispondono entro 1 giorno
-
bug documentation P2 UI/UX
Difficoltà 2/5 1-3 ore Idoneità per principianti 85/100
I maintainer di solito rispondono entro 1 giorno