Van Toast

Vant Toast Component

Black semi-transparent pop-up hint in the middle of the page, used for message notification, loading hint, operation result hint and other scenarios.

When to Invoke

Invoke this skill when:

• User needs to show a message notification
• User wants to display a loading indicator
• User needs to show success or failure feedback
• User wants to create custom toast messages
• User asks about toast positioning or duration

Features

• Multiple Types: Text, loading, success, fail, and custom HTML
• Position Options: Top, middle, bottom
• Custom Icons: Support for custom icons and images
• Loading Types: Circular and spinner loading animations
• Singleton Mode: Only one toast at a time by default
• Multiple Mode: Support for multiple toasts simultaneously
• Global Configuration: Set default options for all toasts

API Reference

Methods

ToastOptions

Props (Component Usage)

Events (Component Usage)

Slots

Types

import type {
  ToastType,
  ToastProps,
  ToastOptions,
  ToastPosition,
  ToastWordBreak,
  ToastWrapperInstance,
} from 'vant';

Usage Examples

Text Toast

<template>
  <van-button @click="showTextToast">Show Text Toast</van-button>
</template>

<script setup>
import { showToast } from 'vant';

const showTextToast = () => {
  showToast('Some messages');
};
</script>

Loading Toast

<template>
  <van-button @click="showLoading">Show Loading</van-button>
</template>

<script setup>
import { showLoadingToast, closeToast } from 'vant';

const showLoading = () => {
  showLoadingToast({
    message: 'Loading...',
    forbidClick: true,
  });
  
  setTimeout(() => {
    closeToast();
  }, 2000);
};
</script>

Success/Fail Toast

<template>
  <van-button @click="showSuccess">Success</van-button>
  <van-button @click="showFail">Fail</van-button>
</template>

<script setup>
import { showSuccessToast, showFailToast } from 'vant';

const showSuccess = () => {
  showSuccessToast('Success');
};

const showFail = () => {
  showFailToast('Fail');
};
</script>

Custom Icon

<template>
  <van-button @click="showCustomIcon">Custom Icon</van-button>
  <van-button @click="showCustomImage">Custom Image</van-button>
</template>

<script setup>
import { showToast, showLoadingToast } from 'vant';

const showCustomIcon = () => {
  showToast({
    message: 'Custom Icon',
    icon: 'like-o',
  });
};

const showCustomImage = () => {
  showToast({
    message: 'Custom Image',
    icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
  });
};
</script>

Loading Type

<template>
  <van-button @click="showSpinner">Spinner Loading</van-button>
</template>

<script setup>
import { showLoadingToast } from 'vant';

const showSpinner = () => {
  showLoadingToast({
    message: 'Loading...',
    forbidClick: true,
    loadingType: 'spinner',
  });
};
</script>

Custom Position

<template>
  <van-button @click="showTop">Top</van-button>
  <van-button @click="showBottom">Bottom</van-button>
</template>

<script setup>
import { showToast } from 'vant';

const showTop = () => {
  showToast({
    message: 'Top',
    position: 'top',
  });
};

const showBottom = () => {
  showToast({
    message: 'Bottom',
    position: 'bottom',
  });
};
</script>

Update Message

<template>
  <van-button @click="startCountdown">Start Countdown</van-button>
</template>

<script setup>
import { showLoadingToast, closeToast } from 'vant';

const startCountdown = () => {
  const toast = showLoadingToast({
    duration: 0,
    forbidClick: true,
    loadingType: 'spinner',
    message: '3 seconds',
  });

  let second = 3;
  const timer = setInterval(() => {
    second--;
    if (second) {
      toast.message = `${second} seconds`;
    } else {
      clearInterval(timer);
      closeToast();
    }
  }, 1000);
};
</script>

Multiple Toasts

<template>
  <van-button @click="showMultiple">Show Multiple</van-button>
</template>

<script setup>
import { showToast, showSuccessToast, allowMultipleToast } from 'vant';

const showMultiple = () => {
  allowMultipleToast();

  const toast1 = showToast('First Toast');
  const toast2 = showSuccessToast('Second Toast');

  setTimeout(() => {
    toast1.close();
    toast2.close();
  }, 2000);
};
</script>

Set Default Options

<template>
  <van-button @click="setDefaults">Set Defaults</van-button>
  <van-button @click="resetDefaults">Reset Defaults</van-button>
</template>

<script setup>
import { setToastDefaultOptions, resetToastDefaultOptions } from 'vant';

const setDefaults = () => {
  setToastDefaultOptions({ duration: 2000 });
  setToastDefaultOptions('loading', { forbidClick: true });
};

const resetDefaults = () => {
  resetToastDefaultOptions();
  resetToastDefaultOptions('loading');
};
</script>

Component Usage

<template>
  <van-button @click="show = true">Show Toast Component</van-button>
  <van-toast v-model:show="show" style="padding: 0">
    <template #message>
      <van-image :src="image" width="200" height="140" style="display: block" />
    </template>
  </van-toast>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);
const image = 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png';
</script>

Async Operation

<template>
  <van-button @click="submitForm" :loading="submitting">Submit</van-button>
</template>

<script setup>
import { ref } from 'vue';
import { showLoadingToast, showSuccessToast, closeToast } from 'vant';

const submitting = ref(false);

const submitForm = async () => {
  submitting.value = true;
  showLoadingToast({
    message: 'Submitting...',
    forbidClick: true,
    duration: 0,
  });

  try {
    await new Promise(resolve => setTimeout(resolve, 2000));
    closeToast();
    showSuccessToast('Submit success');
  } catch (error) {
    closeToast();
    showSuccessToast('Submit failed');
  } finally {
    submitting.value = false;
  }
};
</script>

Form Validation

<template>
  <van-form @submit="onSubmit">
    <van-field v-model="username" name="username" label="Username" />
    <van-field v-model="password" type="password" name="password" label="Password" />
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        Submit
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { ref } from 'vue';
import { showToast, showLoadingToast, showSuccessToast, closeToast } from 'vant';

const username = ref('');
const password = ref('');

const () => {
  if (!username.value || !password.value) {
    showToast('Please fill in all fields');
    return;
  }

  showLoadingToast({
    message: 'Logging in...',
    forbidClick: true,
    duration: 0,
  });

  await new Promise(resolve => setTimeout(resolve, 1500));
  closeToast();
  showSuccessToast('Login success');
};
</script>

Best Practices

1. Use appropriate type: Use success/fail for results, loading for async operations
2. Set forbidClick: Enable forbidClick for loading states to prevent double submission
3. Proper duration: Use 0 for persistent toasts and close manually
4. Position: Use top or bottom for important messages that shouldn't be missed
5. Close properly: Always close loading toasts after async operations complete
6. Avoid explicit import: When using auto-import, don't explicitly import toast functions