A plugin for managing overlay components in Vue 3.
Using npm:
npm install overlay-manager-vue
Using yarn:
yarn add overlay-manager-vue
- Configure in your main.ts/js file:
import { createApp } from 'vue';
import App from './App.vue';
import { overlayManagerPlugin } from 'overlay-manager-vue';
const app = createApp(App);
app.use(overlayManagerPlugin());
app.mount('#app');
- Set up overlay rendering in App.vue
Add the following code to render overlays in your App.vue file:
<template>
<!-- Existing app content -->
<component
v-for="overlay in overlays"
:key="overlay.id"
:is="overlay.content"
:open="overlay.state"
:data="overlay.data"
:close="overlay.close"
/>
</template>
<script setup lang="ts">
import { useOverlayManager } from 'overlay-manager-vue';
const { overlays } = useOverlayManager();
</script>
- Create an example overlay component
- Using radix-vue AlertDialog:
<template>
<AlertDialog v-bind:open="props.open">
<AlertDialogContent>
<h2>{{ title }}</h2>
<p>{{ data.message }}</p>
<Button @click="handleClose">Close</Button>
</AlertDialogContent>
</AlertDialog>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue';
import type { OverlayContentProps } from 'overlay-manager-vue';
import { AlertDialog, AlertDialogContent } from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
const props = defineProps<OverlayContentProps>();
const title = 'Example Overlay';
const handleClose = () => {
props.close();
};
</script>
- Use the overlay in a component:
Here's how to use the overlay in other components:
<script setup lang="ts">
import { useOverlayManager } from 'overlay-manager-vue';
import ExampleOverlay from './ExampleOverlay.vue';
const { overlayOpen } = useOverlayManager();
const openOverlay = () => {
overlayOpen({
content: ExampleOverlay,
data: { message: 'This is an overlay created by overlay manager.' },
});
};
</script>
<template>
<button @click="openOverlay">Open Overlay</button>
</template>
A Vue plugin that sets up the overlay manager.
A composable that provides access to overlay manager functionality.
Returns:
overlays
: Array of active overlaysoverlayOpen
: Function to open a new overlay
Opens a new overlay.
Parameters:
options
: An object with the following properties:content
: The overlay component to renderdata
: (optional) Data to pass to the overlay component
When creating an overlay component, it will receive the following props:
open
: Boolean indicating if the overlay should be displayeddata
: Any data passed when opening the overlayclose
: Function to close the overlay