Single Comments - Answer Overflow

Single

Explore posts from servers

•Created by Single on 3/6/2025 in #❓・help

Toggle useAsyncData's server option on SSG with SSR dynamically.

I doubt this is the best approach but it works:

<script lang="ts" setup>
import { type News } from '~/types/directus/news'

const liveStore = useLiveStore()

const fetchNews = async () => {
  return await useDirectus().getItems<News[]>('news', useDirectus().getLocaleFilter())
}

const { data: news } = await useAsyncData<News[]>(async () => {
  return await fetchNews()
})

onMounted(async () => {
  if (liveStore.live) {
    news.value = await fetchNews()
  }
})
</script>

<template>
  <div class="flex flex-col gap-y-24 justify-center items-center container">
    <Welcome :title="$t('news.title')" :subTitle="$t('news.description')" />

    <div v-if="news?.length" class="lg:w-4/5 sm:w-full grid sm:grid-cols-1 lg:grid-cols-3 gap-12">
      <AppNews v-for="n in news" :key="n.id" :news="n" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { type News } from '~/types/directus/news'

const liveStore = useLiveStore()

const fetchNews = async () => {
  return await useDirectus().getItems<News[]>('news', useDirectus().getLocaleFilter())
}

const { data: news } = await useAsyncData<News[]>(async () => {
  return await fetchNews()
})

onMounted(async () => {
  if (liveStore.live) {
    news.value = await fetchNews()
  }
})
</script>

<template>
  <div class="flex flex-col gap-y-24 justify-center items-center container">
    <Welcome :title="$t('news.title')" :subTitle="$t('news.description')" />

    <div v-if="news?.length" class="lg:w-4/5 sm:w-full grid sm:grid-cols-1 lg:grid-cols-3 gap-12">
      <AppNews v-for="n in news" :key="n.id" :news="n" />
    </div>
  </div>
</template>

22 replies

NNuxt

•Created by Single on 3/6/2025 in #❓・help

Toggle useAsyncData's server option on SSG with SSR dynamically.

@kapa.ai refresh()options do not accept force

22 replies

NNuxt

•Created by Single on 3/6/2025 in #❓・help

Toggle useAsyncData's server option on SSG with SSR dynamically.

@kapa.ai i am trying to do it like this but refresh seems not to load it from the remote but from the cache? <script lang="ts" setup> import { get } from '@vueuse/core' import { useRouteQuery } from '@vueuse/router' import { type News } from '~/types/directus/news' const { data: news, refresh } = useAsyncData<News[]>('news', async () => { return await useDirectus().getItems<News[]>('news', useDirectus().getLocaleFilter()) }) onMounted(() => { if (get(useRouteQuery('ssr')) === 'false') { refresh() } }) </script> <template> <div class="flex flex-col gap-y-24 justify-center items-center container"> <Welcome :title="$t('news.title')" :subTitle="$t('news.description')" /> <div v-if="news?.length" class="lg:w-4/5 sm:w-full grid sm:grid-cols-1 lg:grid-cols-3 gap-12"> <AppNews v-for="n in news" :key="n.id" :news="n" /> </div> </div> </template>

22 replies

NNuxt

•Created by Single on 3/6/2025 in #❓・help

Toggle useAsyncData's server option on SSG with SSR dynamically.

Thats not what i want. I want SSR with an option to load the data from the client in prod.

22 replies

NNuxt

•Created by Single on 3/6/2025 in #❓・help

Toggle useAsyncData's server option on SSG with SSR dynamically.

@kapa.ai #2 doesnt load the content on the client when setting ?ssr=false querystring

22 replies

NNuxt

•Created by Single on 1/28/2025 in #❓・help

Download and serve NuxtImg's from /public folder when generating with SSR true

@kapa.ai Well, it does indeed download the image locally when whitelisting the directus url and not using the directus provider for nuxtimg.

19 replies

NNuxt

•Created by Single on 1/28/2025 in #❓・help

Download and serve NuxtImg's from /public folder when generating with SSR true

@kapa.ai 3. did the job - does it ALWAYS enforce the download?

19 replies

NNuxt

•Created by Single on 1/28/2025 in #❓・help

Download and serve NuxtImg's from /public folder when generating with SSR true

@kapa.ai 1. is actually what i want - does this only work for images being embeded from the public folder? It doesnt seem to work from images being mebded from an external source (directus).

19 replies

NNuxt

•Created by Zeeeth on 10/1/2024 in #❓・help

Add data to store on Page Refresh

Apparently, afterRestore has been renamed to afterHydrate in the latest version

8 replies

NNuxt

•Created by Zeeeth on 10/1/2024 in #❓・help

Add data to store on Page Refresh

https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html#afterhydrate

8 replies

Gaming

Programming