Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Probar Vuetify rápidamente

Veamos cómo probar los componentes de Vuetify rápidamente a través de su playground.

Antes de instalar Vuetify en Vue 3

Antes de instalar Vuetify sobre nuestro proyecto de Vue 3, vamos a ir a "Introduction", específicamente a la primera página que dice "Why Vuetify".

Uso del Playground de Vuetify

Venimos aquí para usar el playground de Vuetify.

Así como hemos visto que Vue 3 tiene un playground y TypeScript tiene un playground, Vuetify también nos ofrece un playground.

Puedes visitar esta página y probar Vuetify sin tener que configurar nada ni instalar nada.

Aquí, Vuetify está usando un componente llamado v-text-field.

Prueba del componente v-card

Desde aquí es posible probar Vuetify sin realizar configuraciones adicionales. Vamos a probar rápidamente el componente v-card que se nos presenta en la documentación.

  1. Copiamos todo el código generado por la documentación.
  2. Pegamos el código en el playground.
  3. Observamos el resultado: un título, un subtítulo, el texto del v-card, y un botón que dice "Click Me".

Este componente v-card no existe en Vue 3 de forma nativa, sino que es agregado por Vuetify.

Uso del Playground para pruebas rápidas

Si quieres hacer alguna prueba rápida con algún componente de Vuetify, sin necesidad de instalarlo en tu proyecto, puedes hacerlo directamente en el playground de Vuetify.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Antes de instalar Vuetify sobre nuestro proyecto de Vue 3, vamos a ir a "introduction". Específicamente a la primera página que dice "why Vuetify". Venimos aquí para usar el playground de Vuetify. Así como hemos visto que Vue 3 tiene un playground y TypeScript tiene un playground, Vuetify también nos ofrece un playground. Puedes visitar esta página y probar aquí Vuetify. Aquí Vuetify está usando un componente llamado vue text field. Desde aquí es posible probar Vuetify sin tener que configurar nada, ni instalar nada. Vamos a probar nosotros rápidamente el componente cart que aquí se nos presenta. Vamos a copiarnos todo este código generado por la documentación, y lo vamos a pegar aquí. Como vemos, aquí está un título, un subtítulo, el texto del cart, y un botón que dice "click me". Este componente vue card, no existe en Vue 3. Lo está agregando Vuetify. Entonces si tú quieres hacer alguna prueba rápida con algún componente de Vuetify, por separado de tu proyecto, puedes hacerlo usando este playground.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos


















18

Probar Vuetify rápidamente










































































































Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Mago de Programación y más

Sólo debes registrarte 😉.