Quick Start #

Installation #

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(/* ... */)
app.use(dialogPlugin)

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.

<template>
  <GDialog v-model="dialogState">
    Content 
  </GDialog>

  <button @click="dialogState = true">
    Open Dialog
  </button>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data: () => ({
    dialogState: false,
  }),
})
</script>

<script>
import { ref, defineComponent } from 'vue'

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

    return {
      dialogState,
    }
  },
})
</script>

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

Looks better.