djmtype Posts - Answer Overflow

djmtype

Explore posts from servers

•Created by djmtype on 7/28/2024 in #❓・help

Prerender RouteRules clarification

If I prender my api endpoint then build, and then start my dev server again, will it reference from the .output directory or make a new request from the source API?

nitro: {
    routeRules: {
      '/api/spotify/**': { prerender: true },
    }
  }

nitro: {
    routeRules: {
      '/api/spotify/**': { prerender: true },
    }
  }

I basically don't want or need to make any new requests during a development session because I'm fetching a bunch of data at once, and it will lead to a 429.

2 replies

NNuxt

•Created by djmtype on 2/27/2023 in #❓・help

Type checking components in markdown

Is there anyway to get type checking in markdown? I'm probably doing something wrong.

// components/content/media.vue
<script setup lang="ts">
    import { Image } from "@unpic/vue"

    export interface Props {
        src: string
        alt: string
        layout: "fixed" | "fullWidth" | "constrained"
        width: string | number
        height: string | number
        caption?: string
        decoding?: "async" | "sync"
        loading?: "lazy" | "eager" | "auto"
        fetchpriority?: "low" | "high"
        imgClass?: string
    }

    const props = withDefaults(defineProps<Props>(), {
        layout: "fixed",
        decoding: "async",
        loading: "lazy",
    })
</script>

<template>
    <figure>
        <Image
            :src="props.src"
            :alt="props.alt"
            :layout="props.layout"
            :width="props.width"
            :height="props.height"
            :loading="props.loading"
            :decoding="props.decoding"
            :fetchpriority="props.fetchpriority"
            :class="props.imgClass"
        />
        <figcaption v-if="props.caption" v-html="props.caption" />
    </figure>
</template>

// components/content/media.vue
<script setup lang="ts">
    import { Image } from "@unpic/vue"

    export interface Props {
        src: string
        alt: string
        layout: "fixed" | "fullWidth" | "constrained"
        width: string | number
        height: string | number
        caption?: string
        decoding?: "async" | "sync"
        loading?: "lazy" | "eager" | "auto"
        fetchpriority?: "low" | "high"
        imgClass?: string
    }

    const props = withDefaults(defineProps<Props>(), {
        layout: "fixed",
        decoding: "async",
        loading: "lazy",
    })
</script>

<template>
    <figure>
        <Image
            :src="props.src"
            :alt="props.alt"
            :layout="props.layout"
            :width="props.width"
            :height="props.height"
            :loading="props.loading"
            :decoding="props.decoding"
            :fetchpriority="props.fetchpriority"
            :class="props.imgClass"
        />
        <figcaption v-if="props.caption" v-html="props.caption" />
    </figure>
</template>

content/file.md

::media
---
src: "https://images.unsplash.com/photo-1677249490921-3246e81f19e3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" 
alt: "crystal" 
imgClass: "foobar"
height: 600
width: 600
caption: "Photo by <a href='https://unsplash.com/@stas_r?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Stanislav Rozhkov</a> on <a href='https://unsplash.com/photos/TnREirV-BUA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Unsplash</a>. Processed by <a href='https://github.com/ascorbic/unpic-img'>unpic-img</a>"
---
::

::media
---
src: "https://images.unsplash.com/photo-1677249490921-3246e81f19e3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" 
alt: "crystal" 
imgClass: "foobar"
height: 600
width: 600
caption: "Photo by <a href='https://unsplash.com/@stas_r?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Stanislav Rozhkov</a> on <a href='https://unsplash.com/photos/TnREirV-BUA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Unsplash</a>. Processed by <a href='https://github.com/ascorbic/unpic-img'>unpic-img</a>"
---
::

tsconfig.json

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": ["@nuxt/content"]
  }
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": ["@nuxt/content"]
  }
}

1 replies

NNuxt

•Created by djmtype on 2/24/2023 in #❓・help

Nuxt Image and Netlify issues in SSG

Building my project npm run generate and previewing it locally work fine. All image paths are intact. However, all images are broken from the public directory, running the same project on Netlify with npm run generate with destination directory set to dist. What do I need to fix?

17 replies

Gaming

Programming