@jakguru/vueprint / @jakguru/vueprint/services/ui
Module: @jakguru/vueprint/services/ui
Remarks
The UI Service provides libraries which can be used in conjunction with Vuetify to provide a user feedback. It provides specific services for:
Accessing the UI Service
The UI Service is both injectable and accessible from the global Vue instance:
<script lang="ts">
import { defineComponent, inject } from 'vue'
import type { SwalService, ToastService, NotyfService, SoundsService } from '@jakguru/vueprint'
export default defineComponent({
setup() {
const swal = inject<SwalService>('swal')
const toast = inject<ToastService>('toast')
const notyf = inject<NotyfService>('notyf')
const sounds = inject<SoundsService>('sounds')
return {}
}
mounted() {
const swal: SwalService = this.config.globalProperties.$swal
const toast: ToastService = this.config.globalProperties.$toast
const notyf: NotyfService = this.config.globalProperties.$notyf
const sounds: SoundsService = this.config.globalProperties.$sounds
}
})
</script>Using the UI Service
SweetAlert2 Alerts
The built in SweetAlert2 Alerts are styled to match the theme of the application using Vuetify's styling classes.
For in-depth specifications, please see the SweetAlert2 Documentation
SweetAlert2 Toasts
The built in SweetAlert2 Toasts are configured to show a toast notification which is styled to match the theme of the application using Vuetify's styling classes.
For in-depth specifications, please see the SweetAlert2 Documentation
Notyf Toasts
The built in Notyf integration simply provides the integration as-is without any specific changes or modifications. The main advantage of using Notyf over SweetAlert2 Toasts is that you can have multiple toasts show at the same time.
For in-depth specifications, please see the Notyf Documentation
SoundsService
The SoundsService manages the sounds which are available by exposing the SoundsService.add method, and allows sounds to be played using the SoundsService.play method.
INFO
For more specifics, see the SoundsService documentation.