Headers y texto

Encabezados, párrafos, formato de texto y enlaces con un estilo hermoso para una legibilidad óptima.

Encabezamientos

Usa encabezados para organizar tu contenido y hacerlo más fácil de leer.

Los encabezados se pueden envolver en un enlace de anclaje cuando tienen un id, con un icono de hash que se muestra en el hover para H2 y H3 (en pantallas grandes) para que los lectores puedan vincular directamente a una sección.

Los enlaces de anclaje están habilitados de forma predeterminada para H2 a H4 cuando se usa @nuxt/content, y deshabilitados de lo contrario, Comark incluido.Use el componente [Themeph014/docs/components/theme) con el prop anchor para alternarlos para una sección de su aplicación:

<template>
  <UTheme :props="{ prose: { h2: { anchor: true }, h3: { anchor: true }, h4: { anchor: true } } }">
    <!-- your rendered markdown -->
  </UTheme>
</template>

Al usar @nuxt/content, los enlaces de anclaje están habilitados para H2, H3 y H4 de forma predeterminada. Puede controlar su generation (por ejemplo, para desactivarlos para las interfaces de chat de AI), así como la generation[xph034https://content.nuxt.com/docs/getting-started/configuration#toc) en su nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    renderer: {
      anchorLinks: false
    },
    build: {
      markdown: {
        toc: {
          depth: 3
        }
      }
    }
  }
})

Inicio 1

Nuxt UI (Edición española)

# Nuxt UI

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h1: {
        slots: {
          base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
          link: 'inline-flex items-center gap-2'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h1: {
            slots: {
              base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
              link: 'inline-flex items-center gap-2'
            }
          }
        }
      }
    })
  ]
})

Heading three

¿ Qué hay de nuevo en v4?

## What's new in v4?

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h2: {
        slots: {
          base: [
            'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          leading: [
            'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
            'transition'
          ],
          leadingIcon: 'size-4 shrink-0',
          link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h2: {
            slots: {
              base: [
                'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
                '[&>a>code]:transition-colors'
              ],
              leading: [
                'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
                'transition'
              ],
              leadingIcon: 'size-4 shrink-0',
              link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
            }
          }
        }
      }
    })
  ]
})

Capítulo 3

Componentes mejorados

### Enhanced components

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h3: {
        slots: {
          base: [
            'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          leading: [
            'absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
            'transition'
          ],
          leadingIcon: 'size-4 shrink-0',
          link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h3: {
            slots: {
              base: [
                'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
                '[&>a>code]:transition-colors'
              ],
              leading: [
                'absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
                'transition'
              ],
              leadingIcon: 'size-4 shrink-0',
              link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
            }
          }
        }
      }
    })
  ]
})

Capítulo 4

Inicio

#### Getting started

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h4: {
        slots: {
          base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3',
          link: ''
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h4: {
            slots: {
              base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3',
              link: ''
            }
          }
        }
      }
    })
  ]
})

Formato de texto

Estructura tu contenido con párrafos claros y un formato de texto consistente para una mejor legibilidad.

Artículo

Nuxt UI proporciona una colección completa de componentes, composables y utilidades de Vue para crear aplicaciones modernas y accesibles con un diseño consistente y una experiencia de usuario mejorada.

Nuxt UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      p: {
        base: 'my-5 leading-7 text-pretty'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          p: {
            base: 'my-5 leading-7 text-pretty'
          }
        }
      }
    })
  ]
})

fuerte

**Textofuerte **

**Strong text**

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      strong: {
        base: ''
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          strong: {
            base: ''
          }
        }
      }
    })
  ]
})

Énfasis

Texto subrayado *

*Emphasized text*

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      em: {
        base: ''
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          em: {
            base: ''
          }
        }
      }
    })
  ]
})

Enlaces

Para crear un enlace, envuelve el texto del enlace entre corchetes seguido de la URL entre paréntesis. Funciona tanto para enlaces externos como internos.

xxxx

[Nuxt documentation](https://nuxt.com)

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      a: {
        base: [
          'text-primary border-b border-transparent hover:border-primary font-medium rounded-xs outline-primary/25 focus-visible:outline-3 focus-visible:has-[>code]:outline-0 [&>code]:border-dashed [&>code]:outline-primary/25 focus-visible:[&>code]:outline-3 hover:[&>code]:border-primary hover:[&>code]:text-primary focus-visible:[&>code]:border-primary focus-visible:[&>code]:text-primary',
          'transition-colors [&>code]:transition-colors'
        ]
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          a: {
            base: [
              'text-primary border-b border-transparent hover:border-primary font-medium rounded-xs outline-primary/25 focus-visible:outline-3 focus-visible:has-[>code]:outline-0 [&>code]:border-dashed [&>code]:outline-primary/25 focus-visible:[&>code]:outline-3 hover:[&>code]:border-primary hover:[&>code]:text-primary focus-visible:[&>code]:border-primary focus-visible:[&>code]:text-primary',
              'transition-colors [&>code]:transition-colors'
            ]
          }
        }
      }
    })
  ]
})

Blockquotes (Edición española)

Utilice blockquotes para resaltar información importante o citas.

La interfaz de usuario de > Nuxt se adapta automáticamente a la configuración de su tema, asegurando una tipografía consistente en toda su aplicación.

> Nuxt UI automatically adapts to your theme settings, ensuring consistent typography across your entire application.

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      blockquote: {
        base: 'border-s-4 border-accented ps-4 italic'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          blockquote: {
            base: 'border-s-4 border-accented ps-4 italic'
          }
        }
      }
    })
  ]
})

Normas horizontales

Utilice reglas horizontales para separar visualmente las secciones de contenido.

---

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      hr: {
        base: 'border-t border-default my-12'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          hr: {
            base: 'border-t border-default my-12'
          }
        }
      }
    })
  ]
})

Introduction

Beautiful typography components and utilities to style your content with Nuxt UI.

Lists and tables

Organize information with styled lists and responsive tables for clear, consistent readability.