The App Extension adds the stylesheet for you.

If you install the UI package directly, import the stylesheet in your boot file or app entry:

import '@quasar/quasar-ui-qflashcard/dist/index.css'

Quasar CLI projects can also centralize the stylesheet in quasar.config.ts:

// Note: using ~ tells Quasar the file resides in node_modules
css: [
  "app.scss",
  "~@quasar/quasar-ui-qflashcard/dist/index.css",
],

Keep runtime component registration in the App Extension and import only the component instance type in <script setup>:

import { useTemplateRef } from 'vue'
import type { QFlashcard } from '@quasar/quasar-ui-qflashcard'

const flashcardRef = useTemplateRef<QFlashcard>('flashcard')

A normal value import of QFlashcard creates a local component binding in <script setup> and takes precedence over the globally registered component. Use a normal import only when you intend to use the UI component directly, and follow the manual boot file installation path instead of registering it through both paths.

Because application source imports the type, add the UI package as a direct application dependency:

pnpm add @quasar/quasar-ui-qflashcard

Applications that only use the globally registered component in templates do not need this extra direct dependency.

Yes. After the App Extension is installed, run:

quasar describe QFlashcard
quasar describe QFlashcardSection

The same generated API is shown on the Using QFlashcard page.

Yes. Use no-hover on QFlashcard, then control each QFlashcardSection with its active prop.

Yes. transition accepts a string or an array. A string with spaces, such as fade-in flip-left-in, is split into multiple transition classes.