Vuetify to Quasar Component Map

Moving a Vue app from Vuetify to Quasar? Search a v- component or a prop to get the Quasar equivalent, the props that change name, and the code for both, side by side.

All
Layout & navigation
Buttons & forms
Data & display
Overlays & feedback
57 of 57 mappings. Click a row for its props and code. Checked against Vuetify 3.13, Vuetify 4.3 and Quasar 2.35.2.
Vuetify
Quasar

How to use the Vuetify to Quasar Component Map

  1. Type the Vuetify component you're replacing, such as v-data-table or VNavigationDrawer, or a prop such as closable or prepend-icon. Quasar names and words such as toast or accordion work too.
  2. Read the Quasar equivalent in the right column. A note under the name tells you when it is a plugin, a set of CSS classes or a prop on another component.
  3. Click the row to see every common prop and what it becomes, with a note wherever a default changes.
  4. For the most used components, copy the Quasar code from the side-by-side snippets. Each one is a complete single-file component you can paste into a Quasar 2.35 app.
  5. Share a search with its link: the address bar keeps your query, for example ?q=v-data-table.

Rebuilding the screens as you go? Start from ready-made Quasar components for dashboards, forms and landing pages.

Frequently asked questions