A native Quasar guided workflow with actual brand and spacing values, QForm validation, a three-step brief builder, radio format choices and a live forty-five-minute agenda.
Quasar 2.34.0 with Vue 3 and locally bundled Material Icons from @quasar/extras 2.1.0. · Implementation reference
02
Quasar Design System Design Reference
Quasar 2.34.0 with Vue 3. Colors are actual --q-* runtime variables; spacing and typography references come from its Sass defaults. The application heading, agenda artwork and system-font override are original. Material Icons are supplied locally through @quasar/extras 2.1.0.
Quasar Design System Components Can Build a Complete Guided Task
Quasar Components Can Build a Complete Guided Task
Quasar provides Vue components together with styling helpers and an application framework. This specimen uses the components directly in a Vue 3 entry: a native stepper coordinates a form, radio group, slider, toggle and final confirmation. It does not require a full-screen QLayout shell merely to demonstrate those controls.
The session brief has a specific purpose: choose a working format and group setup while seeing a corresponding agenda. The component library supplies the controls and navigation states; the three original agendas and their forty-five-minute totals are application content. No scheduling service is implied.
Quasar Design System Brand Variables and Named Palette Classes Coexist
Brand Variables and Named Palette Classes Coexist
The runtime --q-primary value is #1976D2 in the verified default stylesheet. QStepper, QBtn and QSlider receive color="primary", so their primary styling follows that role. Secondary, accent, positive, negative, info and warning remain separate named roles rather than ad hoc colors chosen for each control.
The saved banner uses named green palette utilities for a pale surface and dark text. Its explicit sentence communicates success as well as color. The blue ring illustration is original decorative artwork and is hidden from assistive technology; it does not encode an additional form state.
Quasar Design System Read the Quasar Spacing Suffixes Literally
Read the Quasar Spacing Suffixes Literally
Quasar spacing classes combine type, direction and size. q-mt-md means margin-top at the medium value; q-ml-sm adds a small left margin. The default base is sixteen pixels, with xs four, sm eight, md sixteen, lg twenty-four and xl forty-eight. The jump to xl is three base units, not a guessed thirty-two-pixel step.
The page uses these native helpers inside the controls and original CSS for the wider composition. Default typography utilities include text-body2 at 0.875rem and text-h5 at 1.5rem. The original page title is thirty-four pixels, and the page explicitly switches the font to system-ui while preserving Material Icons for native component glyphs.
Quasar Design System A Stepper Does Not Validate the Form by Itself
A Stepper Does Not Validate the Form by Itself
QStepper holds the current step number and contains three named QStep sections. A step is marked done only after navigation has moved past it. The specimen uses a vertical orientation in both layouts, retaining a clear sequence without squeezing three horizontal headers on a phone.
The first Continue action belongs to QForm. Its handler awaits validate before assigning step two. Header navigation is not enabled, so clicking a future heading cannot bypass that gate. Back actions deliberately preserve the title, format and group values because those models live in the parent SFC rather than inside an unmounted field.
Quasar Design System QForm Uses Internal Rules, Not Every Native Constraint
QForm Uses Internal Rules, Not Every Native Constraint
The title QInput has an internal rules array that trims whitespace and requires five meaningful characters. That rule participates in QForm.validate. A native required or email attribute alone is not a substitute for the rule when calling validate programmatically, which is why the working example expresses the actual constraint directly.
An invalid attempt shows the field error and keeps the user on the first step. Correcting the input allows the same Continue button to advance. The sixty-character limit and visible counter help the title fit the brief, while the inline rule explains why a short or blank title cannot proceed.
Submit the first step with an empty title to inspect the validation message.
Enter a meaningful title and choose a session format.
Continue and return with Back to confirm the input values survive navigation.
Quasar Design System Radio, Slider and Toggle Represent Different Decisions
Radio, Slider and Toggle Represent Different Decisions
QOptionGroup represents one choice among Design critique, Sketching session and Research synthesis. Changing it selects a corresponding agenda array. The agenda lengths are fixed sample content, so a change of format updates the named activities while preserving the forty-five-minute total.
QSlider controls an integer participant count from two to sixteen. QToggle records whether remote participants are included. The adjacent hint changes from one shared table to a shared board and remote facilitation. These controls alter the visible brief rather than functioning as disconnected demo widgets.
Quasar Design System The Final Step Locks a Local Result Until Reset
The Final Step Locks a Local Result Until Reset
The review step repeats the trimmed title, format, participant count and participation mode. Saving changes a local saved flag, disables Save and Back, and reveals a banner naming the group size. Start another clears all models and returns to step one, giving the example an observable complete loop.
There is no request to a calendar or messaging API. The banner explicitly states that no invitation was sent, and the review copy says saving does not create an event. A production scheduler would need date, timezone, recipients and a real backend response before making such a claim.
Quasar Design System Use Native Component Semantics and Real Focus Tests
Use Native Component Semantics and Real Focus Tests
The native controls provide radio, slider and switch roles. The slider receives a Participants label, and the title field has a visible label and field-level validation message. The stepper identifies the current step and labels its content using the step title. The example leaves decorative artwork out of the accessible reading sequence.
The local test changed the slider with the keyboard, toggled remote participation, advanced through validation and saved a nine-person hybrid brief. It also checked the narrow layout. A static picture of a stepper would not establish those relationships or prove that the validation gate is connected.
Keep the active step and its content title consistent.
Validate through rules before changing the step model.
Use a status banner that describes the exact local result.
Quasar Design System Include Quasar CSS and the Icon Set It Expects
Include Quasar CSS and the Icon Set It Expects
The entry file imports Quasar, registers its plugin, loads quasar/dist/quasar.css and imports the Material Icons stylesheet from @quasar/extras. The SFC imports the components it uses. The local bundle inlines the icon font files so checkmarks and edit indicators render without a remote font request.
The original stylesheet follows Quasar CSS and resets document height to content for embedding. It does not globally restyle every native component or invent a replacement spacing scale. A full Quasar CLI or Vite-plugin application can use its standard build integration; this complete sample demonstrates the same components in a small Vue entry.
Verified Quasar 2.34.0 and @quasar/extras 2.1.0 with Vue 3. The icon font is a required local asset for the default step indicators.
javascript
// Create the project first:
// npm create vite@latest quasar-specimen -- --template vue
// cd quasar-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected] @quasar/[email protected]
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import {Quasar} from 'quasar';
import 'quasar/dist/quasar.css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(Quasar, {plugins: {}}).mount('#app');
// index.html contains <div id="app"></div>.
// Components are explicitly imported in App.vue; no auto-import plugin is required here.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
A Prompt for Your Project
Agent Prompt
Use Quasar 2.34.0 and the supplied guided session brief. Preserve QStepper, QForm and QInput validation, the session-format radio controls, participant slider and agenda toggle. Await form validation before advancing, keep the entered values when moving back, and derive the review summary from those same values. Saving records a local brief; subsequent changes invalidate its saved status. Include the Quasar stylesheet and local Material Icons setup, and keep the narrow layout usable without inventing a dispatch or booking service.
05
Quasar Design System Sources and Scope
Quasar 2.34.0 with native components and local Material Icons. Original agendas and visual artwork are sample content. Saving neither creates a calendar event nor sends invitations.
