Skip to content

Component Usage

The GDialog component is the main part of the package. Install it and use it like any other component.

All props you can find here.


yarn add gitart-vue-dialog
npm i gitart-vue-dialog

You can install the component globally or locally. We will do it globally

// main.js
import { GDialog } from 'gitart-vue-dialog'
import 'gitart-vue-dialog/dist/style.css'

const app = Vue.createApp(/* ... */)
app.component('GDialog', GDialog)

Minimal working example

Let's use a standalone component (don't forget to install). In this example, we assume that you installed the component globally.

  <GDialog v-model="dialogState">

  <button @click="dialogState = true">
    Open Dialog
import { defineComponent } from 'vue'

export default defineComponent({
  data: () => ({
    dialogState: false,
import { ref, defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const dialogState = ref(false)

    return {
Live Example

Pretty ugly dialog, right? Let's add background and some content. Take a look:

Live Example


Activator slot


GDialog has an activator slot that helps activate the component when clicked on inside. default slot has onClose scoped function to close the dialog.

Live Example


Due to limited space, full-screen dialogs may be more appropriate for mobile devices.

Live Example


You can customize appearing with custom transitions.

Live Example


With persistent clicking on the outside does not close the dialog

Live Example


scrollable allows you to make scroll content somewhere inside your dialog. To make fixed actions or header, etc...

Live Example


local allows you to show your dialog above a specific part of your app. It disables teleportation to the body, so the dialog attaches the closest parent element with position: relative;.

Live Example
Component Usage has loaded