Installation Types

QWindow

v3.0.0-rc.1

Installation Types

QWindow can be installed as a Quasar App Extension, as a Vue plugin, as a direct component import, or through the UMD bundle.

Quasar CLI

App Extension

To add QWindow to your Quasar application, run the following in your Quasar app folder:

quasar ext add @quasar/qwindow

The QWindow v3 App Extension targets Quasar CLI Vite 3 and requires @quasar/app-vite >=3.0.0-rc.2. 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

bun

yarn

npm

pnpm add @quasar/quasar-ui-qwindow

Then 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>

Ready for more?

Caught a mistake?Edit this page in browser

1. Introduction

2. Quasar CLI

2.1. App Extension

2.2. Manual Boot File

3. Vue 3 Or Vite

4. Component Import