nathanr
nathanr
PostsComments
NNuxt
Created by MrSacs on 4/30/2025 in #❓・help
Nuxt UI custom colors
:root {
    --ui-primary: var(--ui-color-primary-500);
    --ui-secondary: var(--ui-color-secondary-500);
    --ui-success: var(--ui-color-success-500);
    --ui-info: var(--ui-color-info-500);
    --ui-warning: var(--ui-color-warning-500);
    --ui-error: var(--ui-color-error-500);

    --ui-text: var(--ui-color-black);
    /* --ui-bg: var(--ui-color-secondary-200); */
}
:root {
    --ui-primary: var(--ui-color-primary-500);
    --ui-secondary: var(--ui-color-secondary-500);
    --ui-success: var(--ui-color-success-500);
    --ui-info: var(--ui-color-info-500);
    --ui-warning: var(--ui-color-warning-500);
    --ui-error: var(--ui-color-error-500);

    --ui-text: var(--ui-color-black);
    /* --ui-bg: var(--ui-color-secondary-200); */
}
I actually missed an important bit of code for the main.css which would have helped. So sort of have to redefine primary again here
16 replies
NNuxt
Created by MrSacs on 4/30/2025 in #❓・help
Nuxt UI custom colors
No worries give me a shout if you need anything, I recently did the upgrade for all Nuxt UI3 and TW4 stuff. Also make sure you have static in your theme, otherwise it won't load the colour unless it is defined elsewhere (app.config.ts / main.css root I believe)
16 replies
NNuxt
Created by MrSacs on 4/30/2025 in #❓・help
Nuxt UI custom colors
https://uicolors.app/generate/73cc24
16 replies
NNuxt
Created by MrSacs on 4/30/2025 in #❓・help
Nuxt UI custom colors
However you can use sites like this to get colour shades https://tailwindcss.color-get.com/code/dcc636
16 replies
NNuxt
Created by MrSacs on 4/30/2025 in #❓・help
Nuxt UI custom colors
Typically it defaults to 500
16 replies
NNuxt
Created by MrSacs on 4/30/2025 in #❓・help
Nuxt UI custom colors
No you don't if you don't need them
16 replies
NNuxt
Created by MrSacs on 4/30/2025 in #❓・help
Nuxt UI custom colors
Hi @MrSacs I can help with this as I sorted it a couple weeks again, you first have to define the colours using a similar schema as below 
@theme static {
    /* DEFINING COLOURS */
    --color-Yellow-50: #FDFBE4;
    --color-Yellow-100: #FCF8D1;
    --color-Yellow-200: #F9F2AB;
    --color-Yellow-300: #F6ED85;
    --color-Yellow-400: #F4E75F;
    --color-Yellow-500: #F1E139;
    --color-Yellow-600: #E2D010;
    --color-Yellow-700: #AEA00C;
    --color-Yellow-800: #796F09;
    --color-Yellow-900: #453F05;
    --color-Yellow-950: #2B2703;
}
@theme static {
    /* DEFINING COLOURS */
    --color-Yellow-50: #FDFBE4;
    --color-Yellow-100: #FCF8D1;
    --color-Yellow-200: #F9F2AB;
    --color-Yellow-300: #F6ED85;
    --color-Yellow-400: #F4E75F;
    --color-Yellow-500: #F1E139;
    --color-Yellow-600: #E2D010;
    --color-Yellow-700: #AEA00C;
    --color-Yellow-800: #796F09;
    --color-Yellow-900: #453F05;
    --color-Yellow-950: #2B2703;
}
export default defineAppConfig({
  ui: {
    colors: {
      primary: "Yellow",
    },
  },
});
export default defineAppConfig({
  ui: {
    colors: {
      primary: "Yellow",
    },
  },
});
Then you can use either class=" text-Primary-500"> or whatever the name is
16 replies
NNuxt
Created by nathanr on 4/18/2025 in #❓・help
Nuxt Content ContentRenderer not rendering Markdown
Ah yes, I think I use this before, but didn't know how to customise it, would you say nuxt pro is better?
27 replies
NNuxt
Created by nathanr on 4/18/2025 in #❓・help
Nuxt Content ContentRenderer not rendering Markdown
Am I missing this? https://content.nuxt.com/docs/components/prose
27 replies
NNuxt
Created by nathanr on 4/18/2025 in #❓・help
Nuxt Content ContentRenderer not rendering Markdown
Nothing too crazy, just '#' for headers, and '-' for lists, as well as '1.' working for numbered lists too
27 replies
NNuxt
Created by nathanr on 4/18/2025 in #❓・help
Nuxt Content ContentRenderer not rendering Markdown
The thing is the page is loading with the right meta data, I can search and query etc, it's just not rendering markdown as I'd have expected it
27 replies
NNuxt
Created by nathanr on 4/18/2025 in #❓・help
Nuxt Content ContentRenderer not rendering Markdown
Sorry I took it out the message as it wasn't formatting properly
27 replies
NNuxt
Created by nathanr on 4/18/2025 in #❓・help
Nuxt Content ContentRenderer not rendering Markdown
<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