QOverlay

QOverlay is a Vue 3 and Quasar component for fullscreen and component-scoped overlays.

Install

pnpm add @quasar/quasar-ui-qoverlay
# or
bun add @quasar/quasar-ui-qoverlay
# or
yarn add @quasar/quasar-ui-qoverlay
# or
npm install @quasar/quasar-ui-qoverlay

Quasar Boot File

import { defineBoot } from '#q-app'
import QOverlay from '@quasar/quasar-ui-qoverlay'
import '@quasar/quasar-ui-qoverlay/dist/index.css'

export default defineBoot(({ app }) => {
  app.use(QOverlay)
})

Direct Component Import

<template>
  <q-overlay v-model="loading">
    <template #body>
      <div class="fullscreen row justify-center items-center">
        <q-spinner color="yellow" size="3em" />
      </div>
    </template>
  </q-overlay>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { QOverlay } from '@quasar/quasar-ui-qoverlay'
import '@quasar/quasar-ui-qoverlay/dist/index.css'

const loading = ref(false)
</script>

UMD

The UMD build exports window.QOverlay.

<link
  href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qoverlay/dist/index.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qoverlay/dist/index.umd.min.js"></script>

Support

If QOverlay is useful in your workflow and you want to support ongoing maintenance:

• GitHub Sponsors: https://github.com/sponsors/hawkeye64
• PayPal: https://paypal.me/hawkeye64

License

MIT (c) Jeff Galbraith [email protected]