how to use it in Vue？

[osmboy]

No description provided.

[Mintonne]

Webpack setup (Globally accessible using this.$vex)

npm i vex
npm i vex-dialog

vex.js

// src/plugins/vex.js

import Vue from 'vue'
import vex from 'vex-js'
import vexDialog from 'vex-dialog'

// Main css
import 'vex-js/dist/css/vex.css'

// Themes (Import all themes you want to use here)
import 'vex-js/dist/css/vex-theme-default.css'
import 'vex-js/dist/css/vex-theme-os.css'

// Options
vex.defaultOptions.className = 'vex-theme-default'

// Register vex-dialog
vex.registerPlugin(vexDialog)

Vue.prototype.$vex = vex

main.js

// src/main.js (entry file)

import Vue from 'vue'
import './plugins/vex'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

MyComponent.vue

// src/components/MyComponent.vue

<template>
 <div>
  <button @click="showPrompt ">Show Prompt</button>
 </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    showPrompt () {
      this.$vex.dialog.prompt({
        message: 'What planet did the aliens come from?',
        placeholder: 'Planet name',
        className: 'vex-theme-os',
        callback: function (value) {
          console.log(value)
        }
      })
    }
  }
}
</script>

Demo - https://codesandbox.io/s/vue-template-11xc9

[sislandemarcos]

How about with Composition API?