How to use the quasar.Dialog.create function in quasar

archive (event) {
      Dialog.create({
        title: this.$t('STOREEDIT.DIALOGS.ARCHIVE.TITLE'),
        message: this.$t('STOREEDIT.DIALOGS.ARCHIVE.MESSAGE'),
        cancel: this.$t('BUTTON.CANCEL'),
        ok: this.$t('STOREEDIT.DIALOGS.ARCHIVE.CONFIRM'),
      })
        .onOk(() => this.$emit('save', { id: this.value.id, status: 'archived' }, event))
    },
  },

destroy (event) {
      Dialog.create({
        title: this.$t('PICKUPDELETE.DELETE_SERIES_TITLE'),
        message: this.$t('PICKUPDELETE.DELETE_SERIES_TEXT'),
        buttons: [
          this.$t('BUTTON.CANCEL'),
          {
            label: this.$t('BUTTON.YES'),
            handler: () => {
              this.$emit('destroy', this.value.id, event)
            },
          },
        ],
      })
    },
  },

withdraw () {
      Dialog.create({
        title: this.$t('JOINGROUP.WITHDRAW_CONFIRMATION_HEADER'),
        message: this.$t('JOINGROUP.WITHDRAW_CONFIRMATION_TEXT', { groupName: this.group.name }),
        ok: this.$t('BUTTON.YES'),
        cancel: this.$t('BUTTON.CANCEL'),
      })
        .onOk(() => this.$emit('withdraw', this.application.id))
    },
  },

destroy (event) {
      Dialog.create({
        title: this.$t('PICKUPDELETE.DELETE_SERIES_TITLE'),
        message: this.$t('PICKUPDELETE.DELETE_SERIES_TEXT'),
        cancel: this.$t('BUTTON.CANCEL'),
        ok: this.$t('BUTTON.YES'),
      })
        .onOk(() => this.$emit('destroy', this.value.id, event))
    },
  },

function fetchFailure (reason) {
  let message = 'Unable to retrieve spells list'
  Dialog.create({
    title: 'Error',
    message,
    nobuttons: true
  })
  console.error(message, reason)
}

addNew () {
      var self = this
      Dialog.create({
        title: 'New List',
        form: {
          name: {
            type: 'textbox',
            label: 'List Name (max 25 characters)',
            model: ''
          }
        },
        buttons: [
          'Cancel',
          {
            label: 'Ok',
            handler (data) {
              if (data.name.length > 0) {
                if (data.name.length <= 25) {
                  var list = {

handler () {
            Dialog.create({
              title: 'Rating',
              form: {
                rating: {
                  type: 'rating',
                  label: 'How many stars?',
                  model: 0,
                  max: 5
                },
                rating2: {
                  type: 'rating',
                  label: 'How many pencils?',
                  model: 3,
                  max: 6,
                  icon: 'create'
                }
              },

},
        {
          label: 'Option 3',
          value: 'opt3'
        },
        {
          label: 'Option 4',
          value: 'opt4'
        },
        {
          label: 'Option 5',
          value: 'opt5'
        }
      ]

      Dialog.create(options).show()
    }
  }

handler () {
            Dialog.create({
              title: 'Confirm',
              message: 'Modern HTML5 Single Page Application front-end framework on steroids.',
              buttons: [
                {
                  label: 'Disagree',
                  handler () {
                    Toast.create('Disagreed...')
                  }
                },
                {
                  label: 'Agree',
                  raised: true,
                  handler () {
                    Toast.create('Agreed!')
                  }
                }

alert () {
      Dialog.create({
        title: 'FAB',
        message: 'Good job! Keep it going.'
      })
    },
    toast (icon) {