Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
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.
- Copiamos todo el código generado por la documentación.
- Pegamos el código en el playground.
- 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 preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
18
Probar Vuetify rápidamente
30
35
38
44
48
49
56
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript