QWindow 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 the component and composables directly
Import QWindow and helpers such as useQWindowResponsiveProps directly when you want targeted registration.
Quasar CLI
App Extension
To add QWindow to your Quasar application, run the following in your Quasar app folder:
quasar ext add @quasar/qwindowThe QWindow v3 App Extension targets Quasar CLI Vite 3 and requires @quasar/app-vite >=3.0.0. It does not support webpack-based Quasar applications.
TIP
The App Extension can register QWindow without an import from application source. If your application imports a component or type from @quasar/quasar-ui-qwindow, add the UI package as a direct application dependency (for example, pnpm add @quasar/quasar-ui-qwindow). Do not rely on the App Extension’s transitive dependency, especially with strict package managers such as pnpm.
Manual Boot File
If you do not install through the App Extension, install the UI package directly:
pnpm add @quasar/quasar-ui-qwindowThen create and register a boot file:
import { defineBoot } from '#q-app'
import Plugin from '@quasar/quasar-ui-qwindow'
import '@quasar/quasar-ui-qwindow/dist/index.css'
export default defineBoot(({ app }) => {
app.use(Plugin)
})Vue 3 Or Vite
import { createApp } from 'vue'
import Plugin from '@quasar/quasar-ui-qwindow'
import '@quasar/quasar-ui-qwindow/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-qwindow/dist/index.css"></style>
<script setup lang="ts">
import { QWindow } from '@quasar/quasar-ui-qwindow'
</script>