Vue3 toastify

Appearance

Icons ​

Built-in icons ​

icons

Notifications of different types (toast.info, toast.error, toast.success, toast.warning) display an icon associated with the selected type.

<script setup lang="ts">
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

const notify = () => {
toast.info('Hello!!'); // same as toast('Hello!!', { type: 'info' });
toast.error('Hello!!');
toast.success('Hello!!');
toast.success('Hello!!', {
theme: 'colored',
position: toast.POSITION.TOP_LEFT,
});
toast.warn('Hello!!', {
position: toast.POSITION.TOP_LEFT,
});
toast.warn('Hello!!', {
theme: 'dark',
position: toast.POSITION.TOP_LEFT,
});
};
</script>

<template>
<div>
<button @click="notify">Notify !</button>
</div>
</template>

Disable icons ​

  • Disable the icon individually
<script setup lang="ts">
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

const notify = () => {
toast.error('Without icon', {
icon: false,
});
};
</script>

<template>
<div>
<button @click="notify">Notify !</button>
</div>
</template>
  • Disable the icon gloabally
import App from './App.vue';
import { createApp } from 'vue';
import Vue3Toasity from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

createApp(App).use(
  Vue3Toasity,
  {
    icon: false,
  }, // global options type definition --> ToastContainerOptions
).mount('#app');

Custom icons ​

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Custom icons globally ​

import App from './App.vue';
import { createApp } from 'vue';
import { VNodeIcon } from './icons.tsx';
import Vue3Toasity from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

createApp(App).use(
  Vue3Toasity,
  {
    icon: VNodeIcon,
  },
).mount('#app');

TIP

Code in Jsx:

jsx
toast('HELLO', {
  icon: ({ theme, type }) => (
    <ComponentIcon
      theme={theme}
      type={type}
      class={theme}
      style={{ fontSize: '12px' }}
    />
  ),
});
toast('HELLO', {
  icon: ({ theme, type }) => (
    <ComponentIcon
      theme={theme}
      type={type}
      class={theme}
      style={{ fontSize: '12px' }}
    />
  ),
});

Released under the MIT License.

Copyright © 2022-present jerrywu001