tierra Posts - Answer Overflow

Topics

tierra

•Created by tierra on 11/8/2024 in #❓・help

NuxtImg & loading="lazy" load not fired after page route

Hi I am using NuxtImage with loading lazy like this

<script lang="ts" setup>
// …
function onLoad() {
  isLoaded.value = true
}
</script>
<template>
  <NuxtImg
    v-if="props.image.asset?._id"
    :src="props.image.asset._id"
    loading="lazy"
    :width="cropWidth"
    :height="cropHeight"
    :sizes="props.sizes"
    quality="80"
    :data-loaded="isLoaded"
    :alt="altText"
    class="opacity-0 transition-opacity duration-400 data-[loaded=true]:(opacity-100)"
    @load="onLoad"
  />

<script lang="ts" setup>
// …
function onLoad() {
  isLoaded.value = true
}
</script>
<template>
  <NuxtImg
    v-if="props.image.asset?._id"
    :src="props.image.asset._id"
    loading="lazy"
    :width="cropWidth"
    :height="cropHeight"
    :sizes="props.sizes"
    quality="80"
    :data-loaded="isLoaded"
    :alt="altText"
    class="opacity-0 transition-opacity duration-400 data-[loaded=true]:(opacity-100)"
    @load="onLoad"
  />

However this onLoad function is only fired once; but if I route between pages the images won't fade in anymore. Only on the first time. I fixed this by adding a placeholder to the image component, but not this placeholder causes the lazyloading not to work, but instead when I inspect the website it will immediately load all images, even outside the viewport. Anyone has an idea on how to fix that? I do not care about the placeholder, I simply want the image to fade in once it has loaded

11 replies

•Created by tierra on 11/5/2024 in #❓・help

NuxtImage Fade In

Hello! Can someone explain to me how I can add a basic fade effect after the image has been loaded? I tried this

<script setup lang="ts">
// …
const isLoaded = ref(false)

function onLoad() {
  isLoaded.value = true
}
</script>

<template>
  <NuxtImg
    :src="props.src"
    loading="lazy"
    :width="props.width"
    :height="props.height"
    :sizes="props.sizes"
    quality="80"
    :data-loaded="isLoaded"
    :alt="props.alt"
    class="opacity-0 transition-opacity duration-400 data-[loaded=true]:(opacity-100)"
    @load="onLoad"
  />
</template>

<script setup lang="ts">
// …
const isLoaded = ref(false)

function onLoad() {
  isLoaded.value = true
}
</script>

<template>
  <NuxtImg
    :src="props.src"
    loading="lazy"
    :width="props.width"
    :height="props.height"
    :sizes="props.sizes"
    quality="80"
    :data-loaded="isLoaded"
    :alt="props.alt"
    class="opacity-0 transition-opacity duration-400 data-[loaded=true]:(opacity-100)"
    @load="onLoad"
  />
</template>

However, this works on first sight. But when I am switching pages back and forth. Images won't load again. It looks like as if cached images are not firing the load event anymore?

5 replies

•Created by tierra on 10/16/2024 in #❓・help

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'toString')

Hey, as of today I am getting a

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'toString')                                                                                                                          
  at ./node_modules/.cache/nuxt/.nuxt/prerender/chunks/build/server.mjs:16400:98  
  at ./node_modules/.cache/nuxt/.nuxt/prerender/chunks/build/server.mjs:16867:3  
  at ModuleJob.run (node:internal/modules/esm/module_job:218:25)  
  at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)  
  at async ./node_modules/.cache/nuxt/.nuxt/prerender/chunks/_/renderer.mjs:144:24  
  at async ./node_modules/.cache/nuxt/.nuxt/prerender/chunks/_/renderer.mjs:264:64

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'toString')                                                                                                                          
  at ./node_modules/.cache/nuxt/.nuxt/prerender/chunks/build/server.mjs:16400:98  
  at ./node_modules/.cache/nuxt/.nuxt/prerender/chunks/build/server.mjs:16867:3  
  at ModuleJob.run (node:internal/modules/esm/module_job:218:25)  
  at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)  
  at async ./node_modules/.cache/nuxt/.nuxt/prerender/chunks/_/renderer.mjs:144:24  
  at async ./node_modules/.cache/nuxt/.nuxt/prerender/chunks/_/renderer.mjs:264:64

Error.... Any idea where I should start looking at when debugging? I do not get any errors when I run local dev

2 replies

•Created by tierra on 10/9/2024 in #❓・help

NuxtImage Responsive Image Sizes

Hi everyone 👋 How do you use NuxtImage with srcset & sizes? Do you really set the sizes for each image you place in your project? In the past I've used my own image component with lazysizes which has a auto sizes function where it detects the rendered image size and sets the correct data-sizes attribute, I think the same exists in Next image if I am correct. I am a bit surprised this does not exist with NuxtImage yet, or does it? I also checked out unlazy which has something like this too: https://unlazy.byjohann.dev/guide/usage#auto-calculation-of-the-sizes-attribute Am I overseeing something?

1 replies

•Created by tierra on 9/20/2024 in #❓・help

Server API proxy caching approach

Hi all, I have a question regarding an approach to server api caching. I am using Sanity IO as a backend and I'd like to cache my server routes which is no problem. In my case right I have a filter function where a type (e.g. "posts") can be filtered with multiple tags, and I was wondering what the best approach is, because in my test queried cached routes did not work. Since the amount of filters/tags is infinite, I was thinking of a post request and not a get request. But how would I cache this route since the post req is always different/can change? One option I was thinking of is to have a cached route with all posts which then is fetched and filtered by the filtered route? Is that the correct approach? Or should I cache Route Parameters?

server/
└── api/
    ├── posts.get.ts  // cached
    └── filtered.get.ts // not cached

server/
└── api/
    ├── posts.get.ts  // cached
    └── filtered.get.ts // not cached

Whats the best way to approach this? Also the amount of posts is quite large, I am guessing around 1.000 entries Thank you!

4 replies

•Created by tierra on 9/13/2024 in #❓・help

SWR + NuxtLinks

Is there any way to have SWR + NuxtLinks which will not force a client side request? I found similar issues on GitHub: https://github.com/nuxt/nuxt/issues/28212#issuecomment-2238562281 Is there any workaround to this? The only solution I can think of right now is to also cache the /api/ routes, but there should be a better way, right?

1 replies

•Created by tierra on 2/27/2024 in #❓・help

Hydration Classname Mismatch Warnings

I keep getting Hydration Classname Mismatch Warnings and cannot get rid of them. Basically, I am using lazyssizes for lazyloading and the plugin will change the class lazyload to lazyloaded on the client once images are loaded. Now I keep getting these errors in my log and have no idea how I would get rid of them? On pages with 20 images I get 20 error logs which is a bit frustrating. Does anyone have an idea how I can get rid of them / solve the issue? An example

Hydration class mismatch on <img [...] />
- rendered on server: class="portrait fade lazyautosizes lazyloaded"
- expected on client: class="fade lazyload portrait"

Hydration class mismatch on <img [...] />
- rendered on server: class="portrait fade lazyautosizes lazyloaded"
- expected on client: class="fade lazyload portrait"

13 replies

•Created by tierra on 7/11/2023 in #❓・help

ISR Deployment Netlify (with Sanity)

Hey, until today it is not really clear to me how to properly deploy ISR on e.g. Netlify. I am currently using Sanity as a backend and in my /pages files I am fetching files as such

const { data, refresh } = useSanityQuery(query, {
  slug: route?.params?.slug || "",
});

const { data, refresh } = useSanityQuery(query, {
  slug: route?.params?.slug || "",
});

My nuxt config looks like this:

routeRules: {
  "/": { isr: true },
  "/**": { isr: true },
},

routeRules: {
  "/": { isr: true },
  "/**": { isr: true },
},

But when I deploy this page, I can see that there are still network fetches on every route... Can someone explain to me what I am not understanding / doing wrong?

6 replies

•Created by tierra on 6/20/2023 in #❓・help

Load Component in a function

Hey, I am using PhotoSwipe as a gallery right now, and they provide a function which lets you change the DOM after a certain event... I was just wondering if there is a way to add a Nuxt Component to the DOM ?

1 replies

•Created by tierra on 5/20/2023 in #❓・help

Correct setup for `swr`

I have a question: Why is the setup below not working? pages/index.vue

<template>
  <pre>{{ data?.data }}</pre>
</template>
<script setup>
const { data } = await useAsyncData(
  "home",
  async () => await $fetch("/api/data")
);
</script>

<template>
  <pre>{{ data?.data }}</pre>
</template>
<script setup>
const { data } = await useAsyncData(
  "home",
  async () => await $fetch("/api/data")
);
</script>

server/api/data.get.js

export default defineEventHandler((event) => {
  return {
    data: new Date().toISOString(),
  };
});

export default defineEventHandler((event) => {
  return {
    data: new Date().toISOString(),
  };
});

nuxt.config.js

export default defineNuxtConfig({
  routeRules: {
    "/**": { swr: 60 }
  },
});

export default defineNuxtConfig({
  routeRules: {
    "/**": { swr: 60 }
  },
});

This works below, but then I have to still do data fetches on every visit / route. But ideally I thought swr would just fetch once every 60s or whatever and keep a static page? nuxt.config.js

export default defineNuxtConfig({
  routeRules: {
    "/api/**": { swr: 60 }
  },
});

export default defineNuxtConfig({
  routeRules: {
    "/api/**": { swr: 60 }
  },
});

2 replies

•Created by tierra on 5/15/2023 in #❓・help

How do you handle previews of static websites?

In Nuxt2 we had the preview plugin? But how do you handle it with nuxt3? I found this: https://github.com/nuxt/nuxt/issues/15639 but this does not really work for me yet

1 replies

•Created by tierra on 5/9/2023 in #❓・help

Use nuxt-modules/apollo inside server/api

Can someone help me to understand how I can use https://github.com/nuxt-modules/apollo inside my /server/api ? I tried to use the client with const { clients } = useApollo(); but I get a annot access '_handle__get$1' before initialization error. Thanks!

1 replies

•Created by tierra on 5/6/2023 in #❓・help

asyncData updates before page transition is done

I am usign the /server/api and asyncData to fetch the data. Here is an example from my /pages/[slug].vue:

const route = useRoute();

const { data: page } = await useAsyncData("page", () =>
  $fetch(`/api/${route?.params?.slug}`)
);

const route = useRoute();

const { data: page } = await useAsyncData("page", () =>
  $fetch(`/api/${route?.params?.slug}`)
);

however, when I am routing, the content is already changing while the page transition is still running. page transition is in out-in mode though. Anyone knows why this is happening? (I am on "nuxt": "^3.4.2") Thanks!

7 replies

•Created by tierra on 5/3/2023 in #❓・help

Netlify Static Deploy Blank Page

I am trying to deploy a site to Netlify, and for some reason some pages occur blank, but when hit CMD + R the content is visible. In my case I have these routes:

/index.vue -> always works
/works/index.vue -> will work when routing, unless when I hit CMD + R on a [slug].vue page and re-route
/works/[slug].vue -> always blank, unless I hit CMD + R, then the content is visible
/[slug].vue

/index.vue -> always works
/works/index.vue -> will work when routing, unless when I hit CMD + R on a [slug].vue page and re-route
/works/[slug].vue -> always blank, unless I hit CMD + R, then the content is visible
/[slug].vue

1 replies

•Created by tierra on 4/17/2023 in #❓・help

Nested Route / Child Route Page Transitions

Is it possible to do Page Transitions with Child Routes? I found this GitHub Issue but am not sure if it is actually possible or a bug? https://github.com/nuxt/nuxt/issues/12361

1 replies

•Created by tierra on 3/28/2023 in #❓・help

Nuxt 3 i18n (@nuxtjs/i18n)

Can anyone explain to me how to add i18n to Nuxt 3? I am using pnpm and run into several issues: When I start the server I see this error: web dev: ERROR Cannot start nuxt: Cannot resolve vue-i18n on npm! please install it on 'node_modules'

2 replies

•Created by tierra on 3/22/2023 in #❓・help

Middleware to prepend new page component rather than swapping out the components

No description

1 replies

•Created by tierra on 2/9/2023 in #❓・help

SWR Setup Netlify

Hello, can someone help me to understand swr settings for netlify? I would like to have swr settings to let's say refetch every 5min. nuxt config:

  routeRules: {
    "/": { swr: 5 * 60 }, // TTL in seconds
    "/**": { swr: 5 * 60 }, // TTL in seconds
  },

  routeRules: {
    "/": { swr: 5 * 60 }, // TTL in seconds
    "/**": { swr: 5 * 60 }, // TTL in seconds
  },

Netlify Deploy settings are: yarn build and output dist. Somehow the site is doing API requests on every route though. So I don't think swr is actually working.

5 replies

•Created by tierra on 2/5/2023 in #❓・help

swr routing and vercel

Hello everyone, is there already a way to get swr running with vercel?

1 replies