tierra
tierra
PostsComments
NNuxt
Created by tierra on 11/8/2024 in #❓・help
NuxtImg & loading="lazy" load not fired after page route
@kapa.ai this does not help. Your references are about different things
11 replies
NNuxt
Created by tierra on 9/20/2024 in #❓・help
Server API proxy caching approach
Would this be a correct use within Nuxt? 
// utils/posts.ts
import { pageHomeUnfiltered, pageHomeFiltered } from "~~/utils/sanity.queries";

export const cachedPosts = defineCachedFunction(async (filters: string[] | undefined) => {
  const sanity = useSanity();
  if (filters?.length) {
    // fetching filtered data
    const tags = filters.toString().split(',')
    return await sanity.fetch(pageHomeFiltered, { filters: tags});
  } else {
    // fetching unfiltered
    return await sanity.fetch(pageHomeUnfiltered);
  }
}, {
  maxAge: 60 * 60 * 24 * 30, // 1 Month
  name: 'posts',
  getKey: (filters: string[] | undefined) => filters?.length ? arrayToUrlSafeString(filters) : 'allPosts'
})

function arrayToUrlSafeString(arr: string[]) {
  return arr
    .join(' ')                    // Join the array into a single string with spaces
    .toLowerCase()                // Convert to lowercase
    .trim()                       // Remove any leading or trailing spaces
    .replace(/\s+/g, '-')         // Replace spaces with dashes
    .replace(/[^a-z0-9\-]/g, '')  // Remove any non-alphanumeric characters except dashes
}
// utils/posts.ts
import { pageHomeUnfiltered, pageHomeFiltered } from "~~/utils/sanity.queries";

export const cachedPosts = defineCachedFunction(async (filters: string[] | undefined) => {
  const sanity = useSanity();
  if (filters?.length) {
    // fetching filtered data
    const tags = filters.toString().split(',')
    return await sanity.fetch(pageHomeFiltered, { filters: tags});
  } else {
    // fetching unfiltered
    return await sanity.fetch(pageHomeUnfiltered);
  }
}, {
  maxAge: 60 * 60 * 24 * 30, // 1 Month
  name: 'posts',
  getKey: (filters: string[] | undefined) => filters?.length ? arrayToUrlSafeString(filters) : 'allPosts'
})

function arrayToUrlSafeString(arr: string[]) {
  return arr
    .join(' ')                    // Join the array into a single string with spaces
    .toLowerCase()                // Convert to lowercase
    .trim()                       // Remove any leading or trailing spaces
    .replace(/\s+/g, '-')         // Replace spaces with dashes
    .replace(/[^a-z0-9\-]/g, '')  // Remove any non-alphanumeric characters except dashes
}
// server/api/posts.get.ts
import { cachedPosts } from "~~/utils/posts";

export default defineEventHandler(async (event) => {
  const { filter } = getQuery(event)
  const filters = filter?.toString().split(',')
  return await cachedPosts(filters).catch(() => 0)
});
// server/api/posts.get.ts
import { cachedPosts } from "~~/utils/posts";

export default defineEventHandler(async (event) => {
  const { filter } = getQuery(event)
  const filters = filter?.toString().split(',')
  return await cachedPosts(filters).catch(() => 0)
});
4 replies
NNuxt
Created by tierra on 9/20/2024 in #❓・help
Server API proxy caching approach
Thank you! This is what I was searching for -- will give it a shot!
4 replies
NNuxt
Created by tierra on 2/27/2024 in #❓・help
Hydration Classname Mismatch Warnings
It is already client only as you can see. That is also why I did not understand why the hydration warnings are still showing up...
13 replies
NNuxt
Created by tierra on 2/27/2024 in #❓・help
Hydration Classname Mismatch Warnings
In my case I am using a /plugins/lazysizes.client.js file like this: 
import lazySizes from "lazysizes"
import "lazysizes/plugins/parent-fit/ls.parent-fit"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(() => lazySizes)
})
import lazySizes from "lazysizes"
import "lazysizes/plugins/parent-fit/ls.parent-fit"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(() => lazySizes)
})
I've tried the nuxtApp hooks but somehow the plugin fires as soon as it is imported at the top. I did not find a way to have it fire only after mount
13 replies
NNuxt
Created by tierra on 2/27/2024 in #❓・help
Hydration Classname Mismatch Warnings
hi @success131 and thanks for your answer. I do understand why these warnings show up, and yes, lazyload plugin changes the classnames because it is indicating that the image is loaded, I mean it makes sense that the classnames are different on the client in the end somehow. I might have to change to a different lazyloader. It is just weird because these erros never showed up until recent updates
13 replies
NNuxt
Created by tierra on 7/11/2023 in #❓・help
ISR Deployment Netlify (with Sanity)
I do not quite understand why that is liek this though. I thought the benefit of ISR would be a fast browsing experience, but then it is basically the same speed as SSR ?
6 replies
NNuxt
Created by tierra on 5/20/2023 in #❓・help
Correct setup for `swr`
I've deployed a test on Netlify with these settings 
export default defineNuxtConfig({
  routeRules: {
    "/**": { isr: 15 },
    "/static": { prerender: true },
    "/dynamic": { isr: false },
  },
});
export default defineNuxtConfig({
  routeRules: {
    "/**": { isr: 15 },
    "/static": { prerender: true },
    "/dynamic": { isr: false },
  },
});
also, it looks like the page data is not updating after the routes from nuxt-link https://euphonious-melomakarona-134f3d.netlify.app/
2 replies
NNuxt
Created by tierra on 5/6/2023 in #❓・help
asyncData updates before page transition is done
I am not sure what you meant with the unique key; I added :key="page._id" at the first div in my template. But this did not help. After adding this key, I was seeing both (old and new) content during the page transition. It is like as if the fetching of new data does not work until the page transition is faded out
7 replies
NNuxt
Created by tierra on 5/6/2023 in #❓・help
asyncData updates before page transition is done
I just did a test with useLazyAsyncData which works as I would expect in terms of navigation.
7 replies
NNuxt
Created by tierra on 5/6/2023 in #❓・help
asyncData updates before page transition is done
This won't help. If I add a key I see both contents.
7 replies
NNuxt
Created by tierra on 3/28/2023 in #❓・help
Nuxt 3 i18n (@nuxtjs/i18n)
I managed to install it now... But now when I use <NuxtLink :to="switchLocalePath('en')">EN</NuxtLink> it will not create the locale path link. It is just empty
2 replies
NNuxt
Created by tierra on 2/9/2023 in #❓・help
SWR Setup Netlify
Mhm anyone has suggestions for a working swr mode on Netlify?
5 replies
NNuxt
Created by tierra on 2/14/2023 in #❓・help
server api useBody not working ?
Update: Ifound out this was because of my routeRules in my nuxt.config.ts …
11 replies
NNuxt
Created by tierra on 2/14/2023 in #❓・help
server api useBody not working ?
So I logged some things newsletter.post.ts 
export default defineEventHandler(async (event) => {
  console.log(event);
  const payload = await readBody(event);
  console.log(payload);
  return {
    test: "abc",
    email: payload,
  };
});
export default defineEventHandler(async (event) => {
  console.log(event);
  const payload = await readBody(event);
  console.log(payload);
  return {
    test: "abc",
    email: payload,
  };
});
11 replies
NNuxt
Created by tierra on 2/14/2023 in #❓・help
server api useBody not working ?
I am also experienceing debugging problems, for instance I change the code in my server/api folder but I would not update, even after restarting the server. I am on nuxt 3.2.0 but had the same with 3.1.2
11 replies
NNuxt
Created by tierra on 2/14/2023 in #❓・help
server api useBody not working ?
Thanks, I wasn't usign useBody as you can see in my example, I already figured this out. But still, nothing will be returned.
11 replies