VitePress

Vue Native Dialog

A wrapper arround browser is <dialog> tag Read more about this new tag here

Install

Install as: vue-native-dialognpm: npm install vue-native-dialog

yarn: yarn add vue-native-dialog

Usage

Import as:

import { VNativeDialog } from "vue-native-dialog";

Props

All the native dialog proprieties are passed to the parent using v-bind="attrs" but those bellow are computed internally

nametypedefaultdescription
openbooleanfalsedefines if the dialog is open
inlinebooleanfalseshould show the dialog as inline

Events

All the native dialog events are passed to the parent using v-bind="attrs"

Examples

Inline dialog

Creates a dialog component where it's declared, useful for inline questions and confirmation Example:

This is a native dialog with a vue wrapper

<v-native-dialog inline :open="open">
    <p>This is a native dialog with a vue wrapper</p>

    <button @click="open=false">
        Close
    </button>
</v-native-dialog>

<div>
    <button @click="open=true">
        Open inline dialog
    </button>
</div>

import { ref } from "vue";

const open = ref(false);

Backdrop dialog

Creates a dialog component over all the html with a backdrop behind. Example:

This is a native dialog with a vue wrapper and a backdrop behind

<v-native-dialog :open="open">
    <p>This is a native dialog with a vue wrapper</p>

    <button @click="open=false">
        Close
    </button>
</v-native-dialog>

<div>
    <button @click="open=true">
        Open inline dialog
    </button>
</div>
const open = ref(false);

import { ref } from "vue";

const open = ref(false);

Dialog inside another dialog

You can define dialogs inside another dialog. Example:

This is a native dialog with another dialog inside

The other one

  <v-native-dialog
    :open="open"
  >
    <p>This is a native dialog with another dialog inside</p>

    <button @click="open=false">
      Close
    </button>

    <button @click="open2=true">
      Open embed dialog
    </button>

    <v-native-dialog
      :open="open2"
    >
      <p>The other one</p>

      <button @click="open2=false">
        Close
      </button>
    </v-native-dialog>
  </v-native-dialog>

  <div>
    <button @click="open=true">
      Open dialog with another inside
    </button>
  </div>

import { ref } from "vue";

const open = ref(false);
const open2 = ref(false);

Github

https://github.com/algoz098/vue-native-dialog