Skip to content
On this page

Quick Start

API Preference

This page and many other chapters later in the guide contain different content for Options API and Composition API. Your current preference is Options APIComposition API. You can toggle between the API styles using the "API Preference" switches at the top of the left sidebar.


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

For base usage, you should import component and styles. You can install the component globally or locally. We will do it globally.

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

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

Additionally, you can install plugin for advanced usage:

// main.js
import { plugin as dialogPlugin } from 'gitart-vue-dialog'

const app = Vue.createApp(/* ... */)

More about that read on the plugin guide.

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

Looks better.

Quick Start has loaded