QFlashcard can be installed as a Quasar App Extension, as a Vue plugin, as a direct component import, or through the UMD bundle.
Recommended Path
Use the App Extension in Quasar CLI apps
Choose the App Extension when you want Quasar to add the boot file and stylesheet for you.
Use the Vue plugin for manual registration
Install the UI package directly when your app owns plugin registration or when you are not using the Quasar CLI App Extension flow.
Import components directly for targeted bundles
Import QFlashcard and QFlashcardSection directly when you only want to register the components used by a specific page or feature.
Quasar CLI
App Extension
To add QFlashcard to your Quasar application, run the following in your Quasar app folder:
quasar ext add @quasar/qflashcardThe QFlashcard v3 App Extension targets Quasar CLI Vite 3 and requires @quasar/app-vite >=3.0.0-rc.3. It does not support webpack-based Quasar applications.
Manual Boot File
If you do not install through the App Extension, install the UI package directly:
pnpm add @quasar/quasar-ui-qflashcardThen create and register a boot file:
import { defineBoot } from '#q-app'
import Plugin from '@quasar/quasar-ui-qflashcard'
import '@quasar/quasar-ui-qflashcard/dist/index.css'
export default defineBoot(({ app }) => {
app.use(Plugin)
})Vue 3 Or Vite
import { createApp } from 'vue'
import Plugin from '@quasar/quasar-ui-qflashcard'
import '@quasar/quasar-ui-qflashcard/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(Plugin)
app.mount('#app')Component Import
<style src="@quasar/quasar-ui-qflashcard/dist/index.css"></style>
<script setup lang="ts">
import { QFlashcard, QFlashcardSection } from '@quasar/quasar-ui-qflashcard'
</script>