Notify plugin

[thierrydecker]

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 (typically the registerNotifyTypes() function ) 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 ?

The entire code, inserted in <script setup> is below :

<script setup>

import {ref, reactive, onMounted} from 'vue';
import {useQuasar} from "quasar";

const myForm = ref(null)
const userName = ref(null)
const userNameRules = reactive([val => val && val.length > 0 || 'Please type your user name'])
const userNameRef = ref(null)
const userPassword = ref(null)
const userPasswordRules = reactive([val => val && val.length > 0 || 'Please type your password'])
const userPasswordRef = ref(null)

const q = useQuasar()

function registerNotifyTypes() {
  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: () => {
          /!* ... *!/
        }
      }
    ]
  })
}

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

function onReset() {
  console.log('onReset() called')
  q.notify({
    type: 'notifyInfo',
    message: 'onReset() was called'
  })
  resetForm()
}

function onSubmit() {
  q.notify({
    type: 'notifyInfo',
    message: 'onSubmit() was called'
  })
  q.notify({
    type: 'notifyInfo',
    message: 'userName: ' + userName.value
  })
  resetForm()
}

function onValidationError() {
  console.log('onValidationError() called')
  q.notify({
    type: 'notifyError',
    message: 'onValidationError() was called'
  })
}

function onValidationSuccess() {
  console.log('onValidationSuccess() called')
  q.notify({
    type: 'notifyInfo',
    message: 'onValidationSuccess() was called'
  })
}

onMounted(() => {
  registerNotifyTypes()
})

</script>

[yusufkandemir]

https://quasar.dev/quasar-plugins/notify#predefined-types

Furthermore, you can register your own types or even override the predefined ones. The best place to do this would be in a @quasar/app-vite Boot File or a @quasar/app-webpack Boot File.

// How to register in a boot file:
import { Notify } from 'quasar'

Notify.registerType('my-notif', {
  icon: 'announcement',
  progress: true,
  color: 'brown',
  textColor: 'white',
  classes: 'glossy'
})

The docs have what you need 🙂

[yusufkandemir]

@thierrydecker:
Thanks for your Quick answer.

Does it mean I have to use the quasar CLI to create the project ? I used
Vue CLI Quasar plugin to create my crurent project and don’t have any
quasar.config.js.

Next time, please provide this type of info before it's asked.

No, it doesn't mean that. Instead of boot files, you have main.js/main.ts or similar. You can use it to put the type registration there. You can use the same code that I shared above to do it, so you don't need to and can't use useQuasar, useRouter, etc. outside the scope of .vue files, so you can use import { Notify } from 'quasar' and do Notify.registerType('type-name', { ... })

[thierrydecker]

Thanks for your Quick answer. Does it mean I have to use the quasar CLI to create the project ? I used Vue CLI Quasar plugin to create my crurent project and don’t have any quasar.config.js. Le jeu. 28 juil. 2022 à 23:03, Yusuf Kandemir ***@***.***> a écrit :

…

https://quasar.dev/quasar-plugins/notify#predefined-types Furthermore, you can register your own types or even override the predefined ones. The *best place to do this* would be in a ***@***.***/app-vite Boot File <https://quasar.dev/quasar-cli-vite/boot-files>* or a ***@***.***/app-webpack Boot File <https://quasar.dev/quasar-cli-webpack/boot-files>*. // How to register in a boot file: import { Notify } from 'quasar' Notify.registerType('my-notif', { icon: 'announcement', progress: true, color: 'brown', textColor: 'white', classes: 'glossy' }) The docs have what you need 🙂 — Reply to this email directly, view it on GitHub <#14082 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABZ74ASRMOE3CLSK2LMXVZDVWLYRVANCNFSM5457DJTQ> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[thierrydecker]

Thanks again Yusuf, Searching on my side, I finally found that the Quasar plugin for Vue CLI creates a quasar-user-options.js file in which I've been able to put the needed code. Regards Le ven. 29 juil. 2022 à 13:22, Yusuf Kandemir ***@***.***> a écrit :

…

@thierrydecker <https://github.com/thierrydecker>: Thanks for your Quick answer. Does it mean I have to use the quasar CLI to create the project ? I used Vue CLI Quasar plugin to create my crurent project and don’t have any quasar.config.js. Next time, please provide this type of info before it's asked. No, it doesn't mean that. Instead of boot files, you have main.js/main.ts or similar. You can use it to put the type registration there. You can use the same code that I shared above to do it, so you don't need to and can't use useQuasar, useRouter, etc. outside the scope of .vue files, so you can use import { Notify } from 'quasar' and do Notify.registerType('type-name', { ... }) — Reply to this email directly, view it on GitHub <#14082 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABZ74AQHLJFFAVFT3OP44UDVWO5FTANCNFSM5457DJTQ> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>