Getting started

QuasarUI Components are plain Vue 3 single-file components built with Quasar 2. Each one imports what it needs from vue and quasar, so it works in any Quasar project. Set up a project once, then copy Components into it.

You need Node 20 or later and a package manager (npm, pnpm, Yarn or Bun).

Nuxt with nuxt-quasar-ui

Use this if your app is (or will be) a Nuxt app. nuxt-quasar-ui adds Quasar to Nuxt 3 or 4.

Create a Nuxt app, or open an existing one:

npm create nuxt@latest my-app
cd my-app

Install Quasar and add the module:

npm install quasar @quasar/extras
npx nuxi module add nuxt-quasar-ui

Enable the two icon sets the Components use, in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["nuxt-quasar-ui"],
  quasar: {
    extras: {
      fontIcons: ["material-icons", "mdi-v7"],
    },
  },
});

Start the dev server with npm run dev.

Nuxt auto-imports anything in components/, so a Component saved there can be used in a page straight away.

Quasar CLI

Use this for a single-page app, a PWA, or a mobile or desktop app built with Quasar.

Create a project and pick Quasar v2, Vite and Composition API when asked:

npm init quasar@latest

The same scaffold runs with pnpm create quasar, yarn create quasar or bun create quasar.

Enable the icon sets in quasar.config (.js or .ts):

export default defineConfig(() => ({
  extras: ["material-icons", "mdi-v7"],
}));

Start the dev server with npx quasar dev.

The Quasar docs explain the other options: Quick Start and picking a Quasar flavour.

What the Components need

Icons: Material Icons (name="menu") and Material Design Icons v7 (name="mdi-github"), set up above.
Quasar plugins: none. Responsive layouts use useQuasar().screen, which works out of the box.
CSS: none beyond Quasar. Spacing and layout use Quasar's classes, such as q-pa-md, row and col-12 col-md-6.

Next, use a Component.

Using a Component