Toast

The Toast plugin allows to dispatch toast notifications to alert the user and supports themes, locations and timers

• Setup
  • 1. Component Instance
  • 2. Plugin Registration
• Sending a notification
  • a) Inside of a Vue component
  • b) Outside of a Vue component
• Custom notification title
• Uncloseable notification
• Timed notification

Setup

For the dispatched notifications to appear, a Toast component and ToastPlugin must be registered in your project.

1. Component Instance

To create the Toast component instance you need to import the Toast component from @carlosdevpereira/mr-components and instantiate it using the following syntax in a global file (usually App.vue):

<template>
	<Toast />
</template>

Position

The location where the notifications will appear depends on the position prop. The accepted values are:

• top-left
• top-center
• top-right (default)
• bottom-left
• bottom-center
• bottom-right

2. Plugin Registration

Registering the Toast plugin is the next and last step before being able to dispatch notifications. The registration of the plugin can be automatic if the full @carlosdevpereira/mr-components package was registered globally, or manually otherwise.

a) Automatic registration

If you registered the @carlosdevpereira/mr-components using the following syntax, you're all set and don't need to do anything else.

import App from './App.vue'
import { createApp } from 'vue'

import '@carlosdevpereira/mr-components/dist/style.css'
import UseMrComponents from '@carlosdevpereira/mr-components'
// other imports

let app = createApp(App)
UseMrComponents(app)

b) Manual registration

import App from './App.vue'
import { createApp } from 'vue'

import '@carlosdevpereira/mr-components/dist/style.css'
import { ToastPlugin } from '@carlosdevpereira/mr-components'
// other imports

let app = createApp(App)
app.config.globalProperties.$toast = ToastPlugin

// ...

c) Manual (local component) registration

<script>
import { ToastPlugin } from '@carlosdevpereira/mr-components'

export default {
	created() {
		this.$toast = ToastPlugin
	},
}
</script>

Sending a notification

a) Inside of a Vue component

Success

<script>
export default {
	methods: {
		createToast() {
			this.$toast.success({
				message: 'Your notification message goes here.',
			})
		},
	},
}
</script>

Error

<script>
export default {
	methods: {
		createToast() {
			this.$toast.alert({
				message: 'Your notification message goes here.',
			})
		},
	},
}
</script>

Warning

<script>
export default {
	methods: {
		createToast() {
			this.$toast.warn({
				message: 'Your notification message goes here.',
			})
		},
	},
}
</script>

Info

<script>
export default {
	methods: {
		createToast() {
			this.$toast.info({
				message: 'Your notification message goes here.',
			})
		},
	},
}
</script>

b) Outside of a Vue component

A notification can be triggered in any plain javascript or typescript file, by using the following syntax:

import { ToastPlugin } from '@carlosdevpereira/mr-components'
// other imports

ToastPlugin.success({ message: 'Your message' })
ToastPlugin.alert({ message: 'Your message' })
ToastPlugin.warn({ message: 'Your message' })
ToastPlugin.info({ message: 'Your message' })

Custom notification title

<script>
export default {
	methods: {
		createToast() {
			this.$toast.alert({
				title: 'SOS',
				message: 'Your notification message goes here.',
			})
		},
	},
}
</script>

Uncloseable notification

<script>
export default {
	methods: {
		createToast() {
			this.$toast.success({
				message: 'Your notification message goes here.',
				closeable: false,
			})
		},
	},
}
</script>

Timed notification

This notification will leave automatically 2 seconds after appearing.

<script>
export default {
	methods: {
		createToast() {
			this.$toast.success({
				message: 'Your notification message goes here.',
				timer: 2000,
			})
		},
	},
}
</script>