v-native-dialog v0.3.1

v-native-dialog

A Vue 3 component using the native <dialog> element.

Docs

See the StoryBook page.

Install

npm install v-native-dialog

Usage

As a Vue component:

<script type="setup">
import { ref } from 'vue';
import { NativeDialog } from 'v-native-dialog';
const open = ref(true);
</script>
<template>
	<NativeDialog v-model:open="open" v-slot="{ closeDialog }">
		<p>The dialog content</p>
		<button type="button" @click="closeDialog('ok', 42)">OK</button>
		<button type="button" @click="closeDialog('cancel')">Cancel</button>
	</NativeDialog>
</template>
<style>
@import "v-native-dialog/style.css";
</style>

Customization

tbd

CSS custom properties

Component Props

Additional resources

Inspirations

• Component vue3-native-dialog
• Article 'Building a dialog component'

Misc

• Remaining caveats of the <dialog> element

Contribute

Build and Test

npm run build