Guías bluuweb

Appearance

Nuxt Content ​

Installation ​

bash
npm create nuxt <project-name>

Agregar Nuxt Content ​

bash
npx nuxi@latest module add @nuxt/content

content.config.ts

ts
import { defineContentConfig, defineCollection } from "@nuxt/content";

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: "page",
      source: "**/*.md",
    }),
  },
});

Markdown ​

content/index.md

md
---
title: My First Page Title page
description: This is the main page of my website.
date: 2025-06-15
---

# My First Page

Esta es la página principal de mi sitio web.

<!-- <u-alert
title="¡Bienvenido!"
> </u-alert> -->

::u-alert{title="¡Bienvenido!"}
::

## Código de ejemplo

Este es un código de ejemplo en JavaScript:

<!-- ```js
function greet() {
  console.log("Hello, world!");
}
greet();
``` -->

app/app.vue

vue
<template>
  <div>
    <nuxt-page />
  </div>
</template>

app/pages/index.vue

vue
<script setup lang="ts">
const { data: home } = await useAsyncData(() => {
  return queryCollection("content").path("/").first();
});

useSeoMeta({
  title: home.value?.title,
  description: home.value?.description,
});
</script>

<template>
  <div>
    <content-renderer
      v-if="home"
      :value="home"
    />
    <div v-else>Home not found</div>

    <u-alert
      title="Alerta con NuxtUI"
      close
    />
  </div>
</template>

Blog ​

content.config.ts

ts
import { defineCollection, defineContentConfig, z } from "@nuxt/content";

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: "page",
      source: "**/*.md",
    }),
    blog: defineCollection({
      type: "page",
      source: "blog/*.md",
      schema: z.object({
        date: z.string(),
      }),
    }),
  },
});

content/blog/primer-post.md

md
---
date: 2024-06-15
---

# Primer Post

Este es el contenido de mi primer post en Nuxt Content.

app/pages/blog/index.vue

vue
<script setup lang="ts">
const { data: posts } = await useAsyncData("posts", () => {
  return queryCollection("blog").order("date", "DESC").all();
});
</script>

<template>
  <div>
    <h1>Blog</h1>

    <ul>
      <li
        v-for="post in posts"
        :key="post.id"
      >
        {{ post.title }} -
        <nuxt-link :to="post.path">{{ post.path }}</nuxt-link>
      </li>
    </ul>

    {{ posts }}
  </div>
</template>

app/pages/blog/[slug].vue

vue
<script setup lang="ts">
const { slug } = useRoute().params;

const { data: post } = await useAsyncData(`blog-${slug}`, () => {
  return queryCollection("blog").path(`/blog/${slug}`).first();
});
</script>

<template>
  <content-renderer :value="post" />
</template>

Deploy ​

bash
npx nuxi build
npx nuxi preview

Nuxt Studio ​

Próximamente...