🧰 Quasar Framework · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de Quasar Framework

UI ⭐ 23k stars
Framework Vue para SPA, móvil y escritorio con componentes de alta calidad.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: npm create quasar@latest

// Quasar App Vue file (src/pages/Index.vue)
<template><q-btn color="primary" label="Hola Quasar" /></template>

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. q-table

Tabla con columnas y filas.

<template>
  <q-table
    :rows="filas" :columns="columnas" row-key="id"
    :pagination="{ rowsPerPage: 5 }" />
</template>

<script setup>
const columnas = [{ name: 'nombre', label: 'Nombre', field: 'nombre' }];
const filas = [{ id: 1, nombre: 'Ana' }, { id: 2, nombre: 'Luis' }];
</script>
🔁 Cómo funciona: `q-table` recibe filas/columnas y gestiona ordenación, selección y paginación.

2. q-input con v-model

Campo de texto enlazado.

<template>
  <q-input v-model="email" label="Email" type="email" outlined />
  <q-btn color="primary" @click="enviar">Enviar</q-btn>
</template>

<script setup>
import { ref } from 'vue';
const email = ref('');
function enviar() { console.log(email.value); }
</script>
🔁 Cómo funciona: `v-model` sincroniza el input; `q-btn` dispara la acción.

5 · Referencia

CategoríaUI
Stars (GitHub)⭐ 23k
Sitio oficialhttps://quasar.dev/
GitHubhttps://github.com/quasarframework/quasar
Instalaciónnpm create quasar@latest
RelacionadasVue.js · Vuetify · Ionic
📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.