george.x.r Posts - Answer Overflow

george.x.r

•Created by george.x.r on 9/13/2024 in #❓・help

Nuxt Image does not optimize my images

hey guys, does anyone know why nuxt image doesn't optimize my images? I added the module as per documentation and this is my config:

 ssr: false,
  nitro: {
    static: true,
  },
image: {
    strapi: {},
    format: ["webp", "avif", "png", "jpeg", "jpg", "svg"],
    domains: [`${process.env.NUXT_STRAPI_URL}`], // For Strapi-hosted images
    provider: "ipx", // For client-side optimization
  }

 ssr: false,
  nitro: {
    static: true,
  },
image: {
    strapi: {},
    format: ["webp", "avif", "png", "jpeg", "jpg", "svg"],
    domains: [`${process.env.NUXT_STRAPI_URL}`], // For Strapi-hosted images
    provider: "ipx", // For client-side optimization
  }

 <NuxtImg
      :src="getStrapiMedia(`${data.hero_image.data.attributes.url}`)"
      :alt="data.hero_image.data.attributes.alternativeText"
      class="w-full max-w-[339px] sm:max-w-[500px] md:max-w-[1080px] rounded-t-xl rounded-tr-xl"
    />

 <NuxtImg
      :src="getStrapiMedia(`${data.hero_image.data.attributes.url}`)"
      :alt="data.hero_image.data.attributes.alternativeText"
      class="w-full max-w-[339px] sm:max-w-[500px] md:max-w-[1080px] rounded-t-xl rounded-tr-xl"
    />

getStrapiMedia returns the full url of the requested media (basically it appends the correct url in the value given if necessary. during the nuxt generate --prerender process there aren't any images been generated in the .output folder (optimized images I mean) and the images showing at the user are the same as they are in the CMS. Most images are .svg and they can be 2 MB worth of size which I do not want that. Any clues why they don't get optimized during the generate process?

9 replies

NNuxt

•Created by george.x.r on 9/10/2024 in #❓・help

Language Switcher (i18n) does not update components

hello all, did anyone else came across an issue with the language switcher (https://i18n.nuxtjs.org/docs/guide/lang-switcher) not updating the navigation component and the footer component? I have it as part of my navigation bar and when I change the locale it updates it in the main page but not the components. this is the layout's structure. Inside the TheNavigation i have another component that includes the language switcher. <slot/> gets updated but the data in the <TheNavigation/> and <TheFooter/> do not.

<template>
  <div class="relative mx-auto">
    <nav>
      <TheNavigation />
    </nav>
    <main>
      <slot />
    </main>
    <TheFooter />
  </div>
</template>

8 replies

NNuxt

•Created by george.x.r on 9/6/2024 in #❓・help

Static website with prerendered content

Hello everyone, I have developed a website and I am looking to export it as a fully static site. My goal is to ensure that all content is rendered during the build process. For instance, the text fetched through an API (content hosted in a CMS) should be retrieved and applied at the time of generation. After the site is generated, any future changes in the CMS should not affect the content on the website. I have already set the ssr:false and the nitro:{static:true} but these doesn't look like they are doing what I want. Also for some reason when these 2 are added in my nuxt.config.ts file the development server breaks and I am getting a net::ERR_CONTENT_LENGTH_MISMATCH 200 error in my browser's console. Could anyone provide guidance on the best approach to achieve this? Thank you!

11 replies

NNuxt

•Created by george.x.r on 8/1/2024 in #❓・help

ssr calls to api do not work

Hi all, I am trying to get some data from my Stapi CMS through the API but I am getting an error. in my useGetData.ts composable I am making a call to the server/api/get-data. I am getting back a 500 error [GET] "http://localhost:1337/api/hello-world?locale=es-ES&populate=*": <no response> fetch failed. Calling the api from postman works ok. the api key and endpoints are correct. It is worth mentioning that if I change the enpoint from the local CMS to the one on the server everything works ok. Does the server/api have issues when calling APIs that run locally? useGetData.ts

 const {data, seo} = await $fetch('/api/strapi/retrieve-data', {
                method: 'POST',
                body: {locale: iso, collection: collection},
            })

 const {data, seo} = await $fetch('/api/strapi/retrieve-data', {
                method: 'POST',
                body: {locale: iso, collection: collection},
            })

server/api/get-data

 const data = await $fetch(`${strapiURL}/api/${body.collection}`, {
        method: "GET",
        headers: {
            "Authorization": `Bearer ${strapiToken}`
        },
        query: {locale: body.locale, populate: '*'}
    });

 const data = await $fetch(`${strapiURL}/api/${body.collection}`, {
        method: "GET",
        headers: {
            "Authorization": `Bearer ${strapiToken}`
        },
        query: {locale: body.locale, populate: '*'}
    });

4 replies

Gaming

Programming