Michael has introduced a beautiful & customizable Dialog/Modal Vue 3 Package. With the help of Gitart Vue Dialog, you can easily stylize your dialogues according to your need. You can launch them programmatically and run your dialogs from any method without inserting them into the template. You can see the Demo here.

Types

Here you can see the Types of this dialog:

• Fullscreen
• Transitions
• Persistent
• scrollable

Requirements

Remember that the package only works with Vue 3

Installation

You can install this package via Npm or Yarn.

Npm

npm install gitart-vue-dialog

Yarn

yarn add gitart-vue-dialog

Setup

After the Installation, You should import the Dialog component somewhere in your script file or Vue component.

import "gitart-vue-dialog/dist/style.css";
import { GDialog, plugin } from "gitart-vue-dialog";

Usage

After the setup, you can use this component in your file or vue component.

<GDialog v-model="value">
  Your Content...
</GDialog>

<button @click="onOpen">Open Dialog</button>

// YourComponent.vue
import { GDialog } from 'gitart-vue-dialog'

export default {
  components: {
    GDialog,
  },
  data: () => ({
    value: false,
  }),
  methods: {
    onOpen() {
      this.value = true
    },
  },
}

If you want to explore this package,then you can view its whole documentation on its Official Website.