nathanr Comments - Answer Overflow

<script lang="ts" setup>
import { USeparator } from '#components'
import type { Collections } from '@nuxt/content'
import { withLeadingSlash, joinURL } from 'ufo'

const route = useRoute()
// const { locale, t, localeProperties } = useI18n()

const slug = computed(() => {
    const s = route.params.slug
    return Array.isArray(s) ? s : [s]
})

const category = computed(() => slug.value[0] || '')

const path = computed(() => withLeadingSlash(joinURL('articles', ...slug.value)))

const collection = computed(() => 'articles' as const)

const { data: page } = await useAsyncData(path.value, async () =>
    await queryCollection(collection.value).path(path.value).first() as Collections['articles']
)

console.log(collection.value)

if (!page.value)
    throw createError({ statusCode: 404, statusMessage: 'Page not found' })

defineOgImage({
    url: page.value.featuredImage,
})
</script>

<script lang="ts" setup>
import { USeparator } from '#components'
import type { Collections } from '@nuxt/content'
import { withLeadingSlash, joinURL } from 'ufo'

const route = useRoute()
// const { locale, t, localeProperties } = useI18n()

const slug = computed(() => {
    const s = route.params.slug
    return Array.isArray(s) ? s : [s]
})

const category = computed(() => slug.value[0] || '')

const path = computed(() => withLeadingSlash(joinURL('articles', ...slug.value)))

const collection = computed(() => 'articles' as const)

const { data: page } = await useAsyncData(path.value, async () =>
    await queryCollection(collection.value).path(path.value).first() as Collections['articles']
)

console.log(collection.value)

if (!page.value)
    throw createError({ statusCode: 404, statusMessage: 'Page not found' })

defineOgImage({
    url: page.value.featuredImage,
})
</script>

27 replies

NNuxt

•Created by nathanr on 4/18/2025 in #❓・help

Nuxt Content ContentRenderer not rendering Markdown

@HugoRCD Thanks for looking, I was actually following how you have achieved this on your blog/ example Nuxt Content page

27 replies

NNuxt

•Created by nathanr on 4/18/2025 in #❓・help

Nuxt Content ContentRenderer not rendering Markdown

import { defineCollection, z } from '@nuxt/content'
import { asSeoCollection } from '@nuxtjs/seo/content'

const commonContentSchema = z.object({
    title: z.string().nonempty(),
    description: z.string().nonempty(),
    date: z.string().nonempty(),
})

const commonArticleSchema = z.object({
    title: z.string().nonempty(),
    category: z.string().nonempty(),
    description: z.string().nonempty(),
    date: z.string().nonempty(),
    featuredImage: z.string().url(),
    // readingTime: z.string().nonempty(),
    tags: z.array(z.string().nonempty()),
})


export const collections = {
    content: defineCollection(
        asSeoCollection({
            type: 'page',
            source: {
                include: '**/*.md',
                exclude: ['articles/*.md'],
            },
            schema: commonContentSchema,
        }),
    ),
    articles: defineCollection(
        asSeoCollection({
            type: 'page',
            source: {
                include: 'articles/**/*.md',
                prefix: '/articles',
            },
            schema: commonArticleSchema,
        }),
    )
}

import { defineCollection, z } from '@nuxt/content'
import { asSeoCollection } from '@nuxtjs/seo/content'

const commonContentSchema = z.object({
    title: z.string().nonempty(),
    description: z.string().nonempty(),
    date: z.string().nonempty(),
})

const commonArticleSchema = z.object({
    title: z.string().nonempty(),
    category: z.string().nonempty(),
    description: z.string().nonempty(),
    date: z.string().nonempty(),
    featuredImage: z.string().url(),
    // readingTime: z.string().nonempty(),
    tags: z.array(z.string().nonempty()),
})


export const collections = {
    content: defineCollection(
        asSeoCollection({
            type: 'page',
            source: {
                include: '**/*.md',
                exclude: ['articles/*.md'],
            },
            schema: commonContentSchema,
        }),
    ),
    articles: defineCollection(
        asSeoCollection({
            type: 'page',
            source: {
                include: 'articles/**/*.md',
                prefix: '/articles',
            },
            schema: commonArticleSchema,
        }),
    )
}

27 replies

NNuxt

•Created by nathanr on 4/18/2025 in #❓・help

Nuxt Content ContentRenderer not rendering Markdown

<template>
    <div v-if="page" class="h-full p-10">
        <FolioMeta :page :is-article="route.path.includes('/articles/')" />
        <NuxtLink to="/articles"
            class="mx-auto my-8 flex cursor-pointer items-center gap-2 px-4 py-4 text-white hover:text-neutral-500 transition-colors duration-200 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl">
            <UIcon name="lucide:arrow-left" class="size-4" />
            Articles
        </NuxtLink>
        <article class="bg-white mx-auto p-5 rounded-xl sm:max-w-2xl md:max-w-3xl lg:max-w-4xl">
            <h1 class="text-5xl">
                {{ page?.title }}
            </h1>
            <div class="mt-1 flex flex-col gap-2 sm:flex-row sm:gap-4">
                <p>{{ page?.date }}</p>
                <p class="hidden sm:block">
                    |
                </p>
                <p>{{ page?.tags }}</p>
                <p class="hidden sm:block">
                    |
                </p>
            </div>
            <USeparator class="my-5" size="lg"></USeparator>
            <ContentRenderer v-if="page" :value="page" />
        </article>
    </div>
</template>

<template>
    <div v-if="page" class="h-full p-10">
        <FolioMeta :page :is-article="route.path.includes('/articles/')" />
        <NuxtLink to="/articles"
            class="mx-auto my-8 flex cursor-pointer items-center gap-2 px-4 py-4 text-white hover:text-neutral-500 transition-colors duration-200 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl">
            <UIcon name="lucide:arrow-left" class="size-4" />
            Articles
        </NuxtLink>
        <article class="bg-white mx-auto p-5 rounded-xl sm:max-w-2xl md:max-w-3xl lg:max-w-4xl">
            <h1 class="text-5xl">
                {{ page?.title }}
            </h1>
            <div class="mt-1 flex flex-col gap-2 sm:flex-row sm:gap-4">
                <p>{{ page?.date }}</p>
                <p class="hidden sm:block">
                    |
                </p>
                <p>{{ page?.tags }}</p>
                <p class="hidden sm:block">
                    |
                </p>
            </div>
            <USeparator class="my-5" size="lg"></USeparator>
            <ContentRenderer v-if="page" :value="page" />
        </article>
    </div>
</template>

27 replies

NNuxt

•Created by nathanr on 4/18/2025 in #❓・help

Nuxt Content ContentRenderer not rendering Markdown

{
    "name": "nuxt-app",
    "private": true,
    "type": "module",
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "postinstall": "nuxt prepare"
    },
    "dependencies": {
        "@nuxt/content": "^3.0.1",
        "@nuxt/image": "^1.10.0",
        "@nuxt/ui": "^3.0.2",
        "@nuxtjs/seo": "^3.0.3",
        "nodemailer": "^6.10.0",
        "nuxt": "^3.6.0",
        "nuxt-gtag": "^3.0.2",
        "tailwindcss": "^4.1.4",
        "vue": "latest",
        "vue-router": "latest",
        "zod": "^3.24.3"
    },
    "devDependencies": {
        "@iconify-json/fa6-brands": "^1.2.5",
        "@nuxtjs/tailwindcss": "^6.13.1",
        "@tailwindcss/typography": "^0.5.16",
        "patch-package": "^8.0.0",
        "postinstall-postinstall": "^2.1.0"
    }
}

{
    "name": "nuxt-app",
    "private": true,
    "type": "module",
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "postinstall": "nuxt prepare"
    },
    "dependencies": {
        "@nuxt/content": "^3.0.1",
        "@nuxt/image": "^1.10.0",
        "@nuxt/ui": "^3.0.2",
        "@nuxtjs/seo": "^3.0.3",
        "nodemailer": "^6.10.0",
        "nuxt": "^3.6.0",
        "nuxt-gtag": "^3.0.2",
        "tailwindcss": "^4.1.4",
        "vue": "latest",
        "vue-router": "latest",
        "zod": "^3.24.3"
    },
    "devDependencies": {
        "@iconify-json/fa6-brands": "^1.2.5",
        "@nuxtjs/tailwindcss": "^6.13.1",
        "@tailwindcss/typography": "^0.5.16",
        "patch-package": "^8.0.0",
        "postinstall-postinstall": "^2.1.0"
    }
}

27 replies

NNuxt

•Created by nathanr on 4/18/2025 in #❓・help

Nuxt Content ContentRenderer not rendering Markdown

export default defineNuxtConfig({
    ssr: true,
    modules: [
        '@nuxt/ui',
        'nuxt-gtag',
        '@nuxt/image',
        '@nuxtjs/seo',
        '@nuxt/content',
    ],
    css: ['~/assets/css/main.css'],
    ui: {
        colorMode: false
    },
    nitro: {
        prerender: {
            routes: ['/articles']
        }
    },
    site: {
        url: 'https://protesthealth.com',
        name: 'Protest Health',
        indexable: true,
    content: {
        renderer: {
            anchorLinks: false,
        },
        preview: {
            api: 'https://api.nuxt.studio',
            dev: true,
        },
    },
    mdc: {
        highlight: {
            theme: {
                dark: 'github-dark',
                default: 'github-dark',
                light: 'github-light',
            },
        },
    },

    app: {
        head: {
            link: [
                { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
            ]
        }
    },
    compatibilityDate: '2024-11-01',
    devtools: { enabled: true },
})

export default defineNuxtConfig({
    ssr: true,
    modules: [
        '@nuxt/ui',
        'nuxt-gtag',
        '@nuxt/image',
        '@nuxtjs/seo',
        '@nuxt/content',
    ],
    css: ['~/assets/css/main.css'],
    ui: {
        colorMode: false
    },
    nitro: {
        prerender: {
            routes: ['/articles']
        }
    },
    site: {
        url: 'https://protesthealth.com',
        name: 'Protest Health',
        indexable: true,
    content: {
        renderer: {
            anchorLinks: false,
        },
        preview: {
            api: 'https://api.nuxt.studio',
            dev: true,
        },
    },
    mdc: {
        highlight: {
            theme: {
                dark: 'github-dark',
                default: 'github-dark',
                light: 'github-light',
            },
        },
    },

    app: {
        head: {
            link: [
                { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
            ]
        }
    },
    compatibilityDate: '2024-11-01',
    devtools: { enabled: true },
})

27 replies

NNuxt

•Created by nathanr on 4/18/2025 in #❓・help

Nuxt Content ContentRenderer not rendering Markdown

@kapa.ai tailwind.config.ts is outdated now

27 replies

NNuxt

•Created by Oliver on 4/13/2025 in #❓・help

Multiple input field

Yeah I originally missed that image 😄 but yeah honestly would be easier to create a new component, however I would quite like the challenge of adding a new component and be a contributor

24 replies

NNuxt

•Created by Oliver on 4/13/2025 in #❓・help

Multiple input field

So you're better off just having an input that pushes to an array, with that array displaying the "pills" (think I've heard them be called that before) with an 'x' next to it

24 replies

NNuxt

•Created by Oliver on 4/13/2025 in #❓・help

Multiple input field

24 replies

NNuxt

•Created by Oliver on 4/13/2025 in #❓・help

Multiple input field

At it's core yes, that is exactly the smae

24 replies

NNuxt

•Created by Oliver on 4/13/2025 in #❓・help

Multiple input field

Yeah I guess the same could be achieved with input/select menu and multiple

24 replies

NNuxt

•Created by Oliver on 4/13/2025 in #❓・help

Multiple input field

Or just add it to the pro version I guess

24 replies

NNuxt

•Created by Oliver on 4/13/2025 in #❓・help

Multiple input field

(As it could take away from the pro version)

24 replies

NNuxt

•Created by Oliver on 4/13/2025 in #❓・help

Multiple input field

Well it simply doesn’t exist in Nuxt Ui so there’s nothing else you can do 😂 I’m sure I could create it as a component for Nuxt Ui but not sure where they stand on people adding new components

24 replies

Gaming

Programming