Positions

Nuxt Notify supports 6 positions for displaying toast notifications.

Available positions

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

Set a global position

Use notify.position in nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  notify: {
    position: "top-right",
  },
});

Override position per toast

You can override the global position for an individual toast using toast.add().

Top right

Example.vue

<script setup>
const toast = useToast();

toast.add({
  type: "success",
  title: "Top Right",
  description: "This toast appears in the top right corner",
  position: "top-right",
});
</script>

Top left

Example.vue

<script setup>
const toast = useToast();

toast.add({
  type: "info",
  title: "Top Left",
  description: "This toast appears in the top left corner",
  position: "top-left",
});
</script>

Top center

Example.vue

<script setup>
const toast = useToast();

toast.add({
  type: "warning",
  title: "Top Center",
  description: "This toast appears at the top center",
  position: "top-center",
});
</script>

Bottom right

Example.vue

<script setup>
const toast = useToast();

toast.add({
  type: "success",
  title: "Bottom Right",
  description: "This toast appears in the bottom right corner",
  position: "bottom-right",
});
</script>

Bottom left

Example.vue

<script setup>
const toast = useToast();

toast.add({
  type: "error",
  title: "Bottom Left",
  description: "This toast appears in the bottom left corner",
  position: "bottom-left",
});
</script>

Bottom center

Example.vue

<script setup>
const toast = useToast();

toast.add({
  type: "info",
  title: "Bottom Center",
  description: "This toast appears at the bottom center",
  position: "bottom-center",
});
</script>

When to use each position

Top positions

top-right: default choice, doesn’t interfere with most UIs
top-left: good for left-aligned layouts
top-center: great for important announcements

Bottom positions

bottom-right: nice for background tasks and status updates
bottom-left: works well for chat-like UIs
bottom-center: good for “banner” style messages

Stick to one position across your app for consistency, unless you have a specific reason to vary it.

Multiple positions at once

You can show different toasts in different positions:

Example.vue

<script setup>
const toast = useToast();

function showMultiplePositions() {
  toast.success("Top notification", "At the top", { position: "top-right" });
  toast.info("Bottom notification", "At the bottom", {
    position: "bottom-right",
  });
}
</script>

<template>
  <button @click="showMultiplePositions">Show toasts</button>
</template>