Beautiful Dialog Modal Component For Vue 3 – Gitart

Gitart is a beautiful & customizable dialog and modal component created for Vue 3 applications.

How to use it:

1. Import the Gitart Vue Dialog component.

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

2. Register the component.

export default {
  components: {
    GDialog,
  },
}

3. Create a basic dialog.

<GDialog v-model="value">
  Content
</GDialog>
<button @click="onOpen">Open Dialog</button>

// Composition API
export default {
  components: {
    GDialog,
  },
  setup() {
    const value = ref(false)
    const onOpen = () => {
      value.value = true
    }
    return {
      value,
      onOpen,
    }
  },
}

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

4. All available component props.

background: {
  type: [Boolean, String],
  default: true,
},
borderRadius: {
  type: [Boolean, Number, String],
  default: true,
},
contentClass: {
  type: String,
  default: '',
},
/**
 * removes box-shadow for content
 */
depressed: {
  type: Boolean,
  default: false,
},
fullscreen: {
  type: Boolean,
  default: false,
},
height: {
  type: [String, Number],
  default: 'auto',
},
/**
 * enables local mode for the dialog.
 * dialog is fixed to first "position: relative;" parent
 */
local: {
  type: Boolean,
  default: false,
},
maxWidth: {
  type: [String, Number],
  default: 'none',
},
modelValue: {
  type: Boolean,
  default: false,
},
overlayBackground: {
  type: [Boolean, String],
  default: true,
},
/**
 * clicking outside content will not close modal
 */
persistent: {
  type: Boolean,
  default: false,
},
scrollable: {
  type: Boolean,
  default: false,
},
transition: {
  type: String,
  default: 'g-dialog-transition',
},
width: {
  type: [String, Number],
  default: 'auto',
},

Preview:

Changelog:

v2.4.0 (07/08/2022)

• feat: add the possibility to close the dialog on navigation back

v2.3.1 (06/24/2022)

• feat: add the ability to add default props for modals using the plugin

Download Details:

Author: gitart-group

Live Demo: https://gitart-vue-dialog.gitart.org/

Download Link: https://github.com/gitart-group/vue-dialog/archive/refs/heads/main.zip

Official Website: https://github.com/gitart-group/vue-dialog

Install & Download:

# Yarn
$ yarn add gitart-vue-dialog

# NPM
$ npm i gitart-vue-dialog