Use with Nuxt3?

[kennerstross]

This looks fantastic, but I haven't been able to get it to work with Nuxt3. And I suspect they are simply incompatible; hopefully I'm wrong. If anyone has any insights or ideas about how and whether toastification can work with Nuxt3, I'd greatly appreciate hearing.

Thanks

[kennerstross]

Yes, you can! I just found my answer...

Here

[Chippd]

@kennerstross that link is dead FYI

[lusacramento]

for works it, after install, we need to register toastification on Nuxt. Create 'toastfication.client.ts' file (as below) in to plugins directory

./Plugins/toastification.client.ts

import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'

export default defineNuxtPlugin((app) => {
	app.vueapp.use(Toast)
})

script

<script lang="ts" setup>
	import { useToast } from 'vue-toastification'

	const toast = useToast()

	const lanchToast = () =>
		toast('Hi from LogRocket', {
			// position: 'top-right',
			timeout: 5000,
			closeOnClick: true,
			pauseOnFocusLoss: true,
			pauseOnHover: true,
		})
</script>

auto start

<script lang="ts" setup>
// ...
	onMounted(() => {
		lanchToast()
})
</script>

manual start

// template
<button @click="lanchToast">
	Click here to start toast!
</button>

[julioglobal100]

typo: app.vueapp.use(Toast) -> app.vueApp.use(Toast)