Vue3 quasar UI notify plugin

Question

In a Vue3 component where I use composition API, I'm using Quasar Notify plugin successfully.

Here is the code I'm using :

import {useQuasar} from "quasar";

const q = useQuasar()

q.notify.registerType('notifyInfo', {
  icon: 'info',
  color: 'positive',
  position: 'bottom-left',
  group: false,
  actions: [
    {
      icon: 'close', size: '7px', color: 'white', handler: () => { /* ... */
      }
    }
  ]
})

q.notify.registerType('notifyError', {
  icon: 'error',
  color: 'negative',
  position: 'bottom-right',
  group: false,
  actions: [
    {
      icon: 'close', size: '7px', color: 'white', handler: () => { /* ... */
      }
    }
  ]
})

Here is a simple function, in the same file, using these custom registered notify types:

function resetForm() {
  myForm.value.resetValidation()
  userName.value = null
  userPassword.value = null
  console.log('resetForm() was called')
  q.notify({
    type: 'notifyInfo',
    message: 'resetForm() was called'
  })
}

I would like to externalyse this code to a single file I would be able to import in different components in order to reuse these custom types of notifications.

What could be a good practice to do that ?

Vue3 quasar UI notify plugin

0 Answers