Guía de componentes Vue

Esta página recoge los componentes Vue utilizados en los apuntes de Desarrollo Web en Entorno Servidor.

Los componentes se encuentran principalmente en:

docs/.vitepress/theme/components/

TIP

Los containers se utilizan para bloques de contenido (objetivos, definiciones, prácticas, referencias, etc.).

Los componentes Vue permiten incorporar elementos visuales especializados, reutilización e interactividad.

Catálogo de componentes

Componente	Finalidad
`PhpRunner`	Ejecutar código PHP
`Ejercicio`	Incorporar ejercicios independientes
`Color`	Destacar fragmentos de texto
`Cmd`	Documentar comandos
`CmdPane`	Agrupar comandos
`Card`	Mostrar tarjetas
`CardPane`	Agrupar tarjetas
`DropDown`	Mostrar u ocultar contenido
`Quiz`	Incorporar preguntas interactivas
`ButtonSlides`	Enlazar presentaciones
`EnConstruccion`	Señalar contenido pendiente
`RequestJourney`	Visualizar una petición web
`ObjetivosModulo`	Objetivos generales del módulo
`StackOficial`	Presentar tecnologías oficiales
`IndiceCurso`	Mostrar el índice del curso

PhpRunner

Permite ejecutar código PHP directamente desde los apuntes.

Sintaxis

<PhpRunner filename="hola.php" description="Primer programa">

```php
<?php
echo "Hola mundo";
```

</PhpRunner>

Resultado

php

<?php
echo "Hola mundo";

Salida

Pulsa «Ejecutar» para ver el resultado.

Ejercicio

Incorpora un ejercicio almacenado en un archivo Markdown independiente.

Sintaxis

<Ejercicio id="php-arrays-001" />

Ejemplo

WARNING

Este componente está pendiente de completar su diseño.

Debe permitir reutilizar ejercicios, acceder a su URL independiente e integrar PhpRunner.

Color

Permite destacar fragmentos de texto.

Sintaxis

<Color>Texto destacado</Color>

Resultado

Texto destacado

Cmd y CmdPane

Estos componentes están relacionados:

Cmd representa una tarjeta que explica un comando.
CmdPane agrupa tarjetas en una cuadrícula responsive.

Propiedades de Cmd

Propiedad	Tipo	Obligatoria	Descripción
`name`	string	Sí	Nombre del comando
`mne`	string	No	Significado o regla mnemotécnica
`example`	string	No	Ejemplo de ejecución
`pkg`	string	No	Paquete que debe instalarse
`need`	string	No	Requisito previo
`wide`	boolean	No	Ocupa todo el ancho de la cuadrícula

El texto delimitado por * dentro de mne se destaca mediante el componente Color.

Ejemplo básico

<Cmd
  name="pwd"
  mne="*P*rint *W*orking *D*irectory"
  example="pwd"
>
Muestra el directorio de trabajo actual.
</Cmd>

Resultado

Muestra el directorio de trabajo actual.

Agrupar comandos

<CmdPane>

<Cmd
  name="pwd"
  mne="*P*rint *W*orking *D*irectory"
  example="pwd"
>
Muestra el directorio actual.
</Cmd>

<Cmd
  name="ls"
  mne="*L*i*s*t"
  example="ls -la"
>
Lista archivos y directorios.
</Cmd>

<Cmd
  name="cd"
  mne="*C*hange *D*irectory"
  example="cd /var/www/html"
>
Cambia de directorio.
</Cmd>

<Cmd
  name="mkdir"
  mne="*M*a*k*e *Dir*ectory"
  example="mkdir proyecto"
>
Crea un directorio.
</Cmd>

</CmdPane>

Resultado

Muestra el directorio actual.

Lista archivos y directorios.

Cambia de directorio.

Crea un directorio.

Instalación de paquetes

La propiedad pkg genera automáticamente la instrucción sudo apt install.

<Cmd
  name="tree"
  pkg="tree"
  example="tree -L 2"
>
Muestra los directorios en forma de árbol.
</Cmd>

Resultado

Muestra los directorios en forma de árbol.

Requisitos previos

La propiedad need permite indicar un requisito.

<Cmd
  name="docker"
  need="Requiere tener Docker instalado."
  example="docker ps"
>
Muestra los contenedores en ejecución.
</Cmd>

Resultado

Muestra los contenedores en ejecución.

Tarjeta de ancho completo

La propiedad wide permite ocupar las dos columnas de CmdPane.

<CmdPane>

<Cmd
  name="docker compose up"
  example="docker compose up -d --build"
  wide
>
Construye las imágenes necesarias e inicia los servicios.

La opción `-d` ejecuta los contenedores en segundo plano.
</Cmd>

<Cmd
  name="docker compose ps"
  example="docker compose ps"
>
Muestra los servicios.
</Cmd>

<Cmd
  name="docker compose down"
  example="docker compose down"
>
Detiene y elimina los contenedores.
</Cmd>

</CmdPane>

Resultado

Construye las imágenes necesarias e inicia los servicios.

La opción -d ejecuta los contenedores en segundo plano.

Muestra los servicios.

Detiene y elimina los contenedores.

Comportamiento responsive

CmdPane utiliza una columna en pantallas pequeñas.
A partir de 900 px muestra dos columnas.
wide ocupa las dos columnas disponibles.
Un Cmd también puede utilizarse fuera de CmdPane.

Permite mostrar y ocultar contenido utilizando el elemento HTML <details>.

Opcionalmente puede solicitar una contraseña antes de mostrar el contenido.

Propiedades

Propiedad	Tipo	Obligatoria	Descripción
`title`	string	No	Texto de la cabecera
`password`	string	No	Contraseña para desplegar el contenido

Si no se indica title, aparece Ver contenido.

Ejemplo básico

<DropDown title="¿Qué es PHP?">

PHP es un lenguaje de programación especialmente utilizado
para desarrollar aplicaciones web en el servidor.

</DropDown>

Resultado

¿Qué es PHP?

PHP es un lenguaje de programación especialmente utilizado para desarrollar aplicaciones web en el servidor.

Ejemplo con código

<DropDown title="Ver solución">

```php
<?php
$nombre = "Ana";
echo "Hola $nombre";
```

</DropDown>

Resultado

Ver solución

php

<?php
$nombre = "Ana";
echo "Hola $nombre";

Contenido protegido mediante contraseña

<DropDown
  title="Ver solución protegida"
  password="1234"
>

La solución es **42**.

</DropDown>

Resultado

Ver solución protegida

La solución es 42.

Seguridad

La contraseña se incorpora al código enviado al navegador.

Por tanto, no constituye una protección real de información confidencial.

Es adecuada únicamente como barrera didáctica para evitar que el alumnado consulte accidentalmente una solución.

ButtonSlides

Permite mostrar un botón que abre una presentación en una pestaña nueva.

Propiedades

Propiedad	Tipo	Obligatoria	Descripción
`href`	string	Sí	URL de la presentación

El texto del botón es fijo: 🎬 Ver diapositivas.

Sintaxis

<ButtonSlides href="/slides/introduccion/" />

Resultado

🎬 Ver diapositivas

INFO

El componente abre el enlace en una nueva pestaña mediante target="_blank".

La ruta del ejemplo debe sustituirse por una presentación existente.

Card y CardPane

Permiten presentar información mediante tarjetas. Card representa una tarjeta y CardPane organiza varias tarjetas.

Propiedades de Card

Propiedad	Tipo	Obligatoria	Descripción
`header`	string	No	Título original de la tarjeta (se conserva por compatibilidad).
`title`	string	No	Nuevo nombre alternativo del título; si se indican ambos, prevalece `title`.
`icon`	string	No	Clases de un icono Font Awesome, por ejemplo `fa-solid fa-network-wired`.
`link`	string	No	Ruta interna de VitePress, respetando la configuración `base`. Abre en la misma pestaña.
`href`	string	No	Enlace original. Abre en una pestaña nueva si no se indica `link`.
`color`	string	No	Color del borde, sombra y título. Por defecto `#4f46e5`.
`src`	string	No	URL de una imagen mostrada dentro de la tarjeta.
`alt`	string	No	Texto alternativo de la imagen. Por defecto utiliza el título.

Compatibilidad

El uso anterior con header, href, src, alt y color sigue funcionando. Las propiedades nuevas son opcionales. Si se indican link y href, prevalece link.

Ejemplo original: tarjetas de contenido

<CardPane>

<Card header="Léxico" color="#2563eb">

Palabras y símbolos del lenguaje.

</Card>

<Card header="Sintaxis" color="#16a34a">

Reglas para construir instrucciones válidas.

</Card>

<Card header="Semántica" color="#d97706">

Significado de las instrucciones.

</Card>

</CardPane>

Resultado

Léxico

Palabras y símbolos del lenguaje.

Sintaxis

Reglas para construir instrucciones válidas.

Semántica

Significado de las instrucciones.

Nuevo uso: título, icono y enlace interno

El atributo link utiliza la URL pública definida por los rewrites de VitePress.

<CardPane>

<Card
  title="Redes"
  icon="fa-solid fa-network-wired"
  link="/fundamentos/redes/"
  color="#2563eb"
>

Equipos, direcciones IP y comunicación.

</Card>

<Card
  title="HTTP y HTTPS"
  icon="fa-solid fa-arrow-right-arrow-left"
  link="/fundamentos/http/"
  color="#16a34a"
>

Peticiones, respuestas y comunicación segura.

</Card>

</CardPane>

Resultado

Redes

Equipos, direcciones IP y comunicación.

HTTP y HTTPS

Peticiones, respuestas y comunicación segura.

Enlace externo con `href` (comportamiento original)

<Card
  header="Documentación de PHP"
  icon="fa-brands fa-php"
  href="https://www.php.net/manual/es/"
>

Consultar el manual oficial de PHP.

</Card>

Resultado

Documentación de PHP

Consultar el manual oficial de PHP.

Tarjeta con imagen (comportamiento original)

<Card
  header="PHP"
  src="/images/php.png"
  alt="Logotipo de PHP"
>

Lenguaje de programación del lado del servidor.

</Card>

La ruta de src es ilustrativa: utiliza una imagen que exista en tu proyecto.

Quiz

Componente para incorporar preguntas interactivas.

Ejemplo didáctico previsto

Una pregunta podría tener este contenido:

¿Qué función de PHP devuelve el número de elementos de un array?

length()
count() — correcta
size()
sizeof_array()

Sintaxis del componente

La sintaxis concreta debe obtenerse de Quiz.vue, porque todavía no se han revisado sus propiedades.

No se incluye un <Quiz /> vacío, ya que no garantiza que aparezca una pregunta funcional.

Pendiente

Revisar Quiz.vue y añadir aquí:

Propiedades admitidas.
Estructura de preguntas y respuestas.
Ejemplo Markdown funcional.
Resultado interactivo.

EnConstruccion

Indica que una página o apartado está pendiente de completar.

Sintaxis

<EnConstruccion />

Resultado

🚧

En construcción

Este contenido está pendiente de desarrollo. Estará disponible próximamente.

RequestJourney

Representa el recorrido de una petición web.

Sintaxis

<RequestJourney />

Resultado

ObjetivosModulo

Presenta los objetivos generales del módulo mediante tarjetas de colores.

Procede de una página anterior de Hugo y se mantiene como componente específico.

Sintaxis

<ObjetivosModulo />

Resultado

Brújula del curso

Objetivo general

Construir, comprender y desplegar una aplicación web real, con código organizado, un entorno reproducible y un flujo de trabajo que permita desarrollarla, mantenerla y evolucionarla

Entender el escenario
Cliente, servidor, HTTP, request y response. Qué pasa cuando alguien escribe tu URL en el navegador.
Hablar PHP
Sintaxis, datos, control de flujo y un poco de POO. El idioma del servidor.
Montar con Laravel
Rutas, controladores, Blade, Eloquent. Una app con estructura, no un archivo gigante.
Mismo entorno para todos
Docker: que “en mi máquina sí” deje de ser una excusa.
No perder el trabajo
Git: commits, ramas y un remoto. El salvavidas del módulo (y de la vida).
IA con cabeza
Usarla para ir más rápido, no para no enterarte. Tú decides; la IA sugiere.

INFO

ObjetivosModulo es diferente del container ::: objetivos.

El container se utiliza para los objetivos particulares de cada tema.

StackOficial

Presenta tecnologías y recursos oficiales relacionados con el módulo.

Sintaxis

<StackOficial />

Resultado

No te lo inventes

Las webs oficiales, a un clic

En clase usamos estas fuentes. Si dudas, primero la documentación oficial: es más aburrida que un tutorial random… y mucho más cierta.

PHPphp.netManual, tipos, funciones. La biblia del lenguaje.Laravellaravel.com/docsRutas, Eloquent, Blade, artisan. Versión a versión.Dockerdocs.docker.comImágenes, contenedores y Compose. El laboratorio portátil.Gitgit-scm.comCommit, rama, merge. El libro oficial es corto y bueno.HTTPMDNMétodos, cabeceras, códigos. Cómo habla el navegador.Composergetcomposer.orgDependencias de PHP. Laravel llega montado encima.

IndiceCurso

Muestra el índice general del curso.

Sintaxis

<IndiceCurso />

Resultado

Explora los contenidos del módulo

Referencias

referencias pertenece al sistema de containers Markdown-it, no a los componentes Vue.

Se utiliza para presentar recursos, enlaces o documentación de consulta.

Sintaxis orientativa

::: referencias

- [Documentación oficial de PHP](https://www.php.net/manual/es/)
- [Documentación de Laravel](https://laravel.com/docs)
- [Documentación de VitePress](https://vitepress.dev/)

:::

Ejemplo

Referencias

Dónde buscar información

INFO

El ejemplo utiliza el nombre referencias identificado en la arquitectura de containers.

Si su implementación exige un subtítulo u otra cabecera, habrá que adaptar la sintaxis a referencias.ts.

Componentes internos del tema

Algunos componentes se utilizan desde el propio tema y no necesitan incorporarse directamente en Markdown.

Componente	Finalidad
`CollapsibleHeading`	Gestionar títulos plegables
`PrintButton`	Facilitar la impresión
`VisitorCount`	Mostrar estadísticas de visitas

Containers frente a componentes Vue

Necesidad	Tipo	Sintaxis
Objetivos de un tema	Container	`::: objetivos`
Finalidad	Container	`::: finalidad`
Conocimientos previos	Container	`::: previo`
Definiciones	Container	`::: definicion`
Información adicional	Container	`::: pageinfo`
Recordatorios	Container	`::: recuerda`
Actividades	Container	`::: actividad`
Prácticas	Container	`::: practica`
Preguntas	Container	`::: pregunta`
Referencias	Container	`::: referencias`
Ejecutar PHP	Vue	`<PhpRunner>`
Incorporar ejercicios	Vue	`<Ejercicio>`
Destacar texto	Vue	`<Color>`
Documentar comandos	Vue	`<Cmd>`
Agrupar comandos	Vue	`<CmdPane>`
Tarjetas	Vue	`<Card>` y `<CardPane>`
Contenido desplegable	Vue	`<DropDown>`
Preguntas interactivas	Vue	`<Quiz>`
Diapositivas	Vue	`<ButtonSlides>`

Organización y mantenimiento

Los componentes Vue se encuentran principalmente en:

text

docs/
└── .vitepress/
    └── theme/
        ├── components/
        │   ├── PhpRunner.vue
        │   ├── Ejercicio.vue
        │   ├── Color.vue
        │   ├── Cmd.vue
        │   ├── CmdPane.vue
        │   ├── DropDown.vue
        │   ├── ButtonSlides.vue
        │   └── ...
        ├── styles/
        │   ├── colors.css
        │   ├── containers.css
        │   └── ...
        └── index.ts

Criterios de mantenimiento

Utilizar nombres en PascalCase para los componentes.
Mantener los estilos específicos dentro de cada componente cuando corresponda.
Utilizar las variables de colors.css para los colores compartidos.
Evitar crear componentes cuando un container resuelva la misma necesidad.
Mantener los componentes heredados que sigan siendo necesarios.
Documentar las propiedades y ejemplos de cada componente.
Conservar los ejercicios en archivos independientes de las páginas que los utilizan.

Pendientes

[ ] Completar el diseño de Ejercicio.vue.
[ ] Documentar las propiedades reales de Quiz.vue.
[ ] Verificar las propiedades de Card.vue y CardPane.vue.
[ ] Verificar las propiedades de PhpRunner.vue.
[ ] Revisar la sintaxis de referencias.ts.
[ ] Completar la documentación de los componentes restantes.

Guía de componentes Vue ​

Catálogo de componentes ​

PhpRunner ​

Sintaxis ​

Resultado ​

Ejercicio ​

Sintaxis ​

Ejemplo ​

Color ​

Sintaxis ​

Resultado ​

Cmd y CmdPane ​

Propiedades de Cmd ​

Ejemplo básico ​

Resultado ​

Agrupar comandos ​

Resultado ​

Instalación de paquetes ​

Resultado ​

Requisitos previos ​

Resultado ​

Tarjeta de ancho completo ​

Resultado ​

DropDown ​

Propiedades ​

Ejemplo básico ​

Resultado ​

Ejemplo con código ​

Resultado ​

Contenido protegido mediante contraseña ​

Resultado ​

ButtonSlides ​

Propiedades ​

Sintaxis ​

Resultado ​

Card y CardPane ​

Propiedades de Card ​

Ejemplo original: tarjetas de contenido ​

Resultado ​

Nuevo uso: título, icono y enlace interno ​

Resultado ​

Enlace externo con href (comportamiento original) ​

Resultado ​

Tarjeta con imagen (comportamiento original) ​

Quiz ​

Ejemplo didáctico previsto ​

Sintaxis del componente ​

EnConstruccion ​

Sintaxis ​

Resultado ​

RequestJourney ​

Sintaxis ​

Resultado ​

ObjetivosModulo ​

Sintaxis ​

Resultado ​

Objetivo general

StackOficial ​

Sintaxis ​

Resultado ​

Las webs oficiales, a un clic

IndiceCurso ​

Sintaxis ​

Resultado ​

Referencias ​

Sintaxis orientativa ​

Ejemplo ​

Componentes internos del tema ​

Containers frente a componentes Vue ​

Organización y mantenimiento ​

Criterios de mantenimiento ​

Pendientes ​

Guía de componentes Vue

Catálogo de componentes

PhpRunner

Sintaxis

Resultado

Ejercicio

Sintaxis

Ejemplo

Color

Sintaxis

Resultado

Cmd y CmdPane

Propiedades de Cmd

Ejemplo básico

Resultado

Agrupar comandos

Resultado

Instalación de paquetes

Resultado

Requisitos previos

Resultado

Tarjeta de ancho completo

Resultado

DropDown

Propiedades

Ejemplo básico

Resultado

Ejemplo con código

Resultado

Contenido protegido mediante contraseña

Resultado

ButtonSlides

Propiedades

Sintaxis

Resultado

Card y CardPane

Propiedades de Card

Ejemplo original: tarjetas de contenido

Resultado

Nuevo uso: título, icono y enlace interno

Resultado

Enlace externo con `href` (comportamiento original)

Resultado

Tarjeta con imagen (comportamiento original)

Quiz

Ejemplo didáctico previsto

Sintaxis del componente

EnConstruccion

Sintaxis

Resultado

RequestJourney

Sintaxis

Resultado

ObjetivosModulo

Sintaxis

Resultado

StackOficial

Sintaxis

Resultado

IndiceCurso

Sintaxis

Resultado

Referencias

Sintaxis orientativa

Ejemplo

Componentes internos del tema

Containers frente a componentes Vue

Organización y mantenimiento

Criterios de mantenimiento

Pendientes