Notification UI · Nuxt Skew Protection · Nuxt SEO

[NuxtSEO Pro](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[Sign In](https://nuxtseo.com/auth/github)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

[User Guides](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)

[API](https://nuxtseo.com/docs/skew-protection/api/use-skew-protection)

[Releases](https://nuxtseo.com/docs/skew-protection/releases/v1)

Skew Protection

- [Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

Search…```k`` /`

v1.1.1

- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

- [Introduction](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [Installation](https://nuxtseo.com/docs/skew-protection/getting-started/installation)

### Core Concepts

- [Check for Update Strategy](https://nuxtseo.com/docs/skew-protection/guides/update-strategies)
- [Update Notifications](https://nuxtseo.com/docs/skew-protection/guides/immediate-updates)
- [Performance](https://nuxtseo.com/docs/skew-protection/guides/performance)
- [Persistent Storage](https://nuxtseo.com/docs/skew-protection/guides/storage-configuration)
- [Notification UI](https://nuxtseo.com/docs/skew-protection/guides/ui-examples)
- [Cookie Consent](https://nuxtseo.com/docs/skew-protection/guides/cookie-consent)
- [View Active Connections](https://nuxtseo.com/docs/skew-protection/guides/live-connections)
- [Tracking User Pages](https://nuxtseo.com/docs/skew-protection/guides/route-tracking)

### Providers

- [External Providers](https://nuxtseo.com/docs/skew-protection/providers/external)
- [Cloudflare](https://nuxtseo.com/docs/skew-protection/providers/cloudflare)

Core Concepts

# Notification UI

[Copy for LLMs](https://nuxtseo.com/docs/skew-protection/guides/ui-examples.md)

These examples use the [`<SkewNotification>`](https://nuxtseo.com/docs/skew-protection/api/skew-notification) component. See the [API reference](https://nuxtseo.com/docs/skew-protection/api/skew-notification) for all available slot props.

## [Minimal Pill](#minimal-pill)

Compact notification using Nuxt UI.

Live Example

Code

✨

Update available

Refresh

app.vue

```
<template>
<SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss, reload }" force-open>
    <Transition
      enter-active-class="transition duration-300 ease-out"
      enter-from-class="opacity-0 translate-y-2"
      enter-to-class="opacity-100 translate-y-0"
      leave-active-class="transition duration-200 ease-in"
      leave-from-class="opacity-100 translate-y-0"
      leave-to-class="opacity-0 translate-y-2"
    >
      <div v-if="isCurrentChunksOutdated" class="fixed bottom-4 right-4 z-50">
        <div class="flex items-center gap-3 bg-default rounded-full shadow-lg ring-1 ring-[var(--ui-border)] px-4 py-3">
          <span class="text-lg">✨</span>
          <div class="text-sm font-medium">
            Update available
          </div>
          <UButton color="primary" size="xs" label="Refresh" @click="reload" />
          <UButton color="gray" variant="ghost" size="xs" icon="i-carbon-close" @click="dismiss" />
        </div>
      </div>
    </Transition>
  </SkewNotification>
</template>
```

## [Native CSS](#native-css)

Live Example

Code

✨

New update available!

Dismiss

Refresh

app.vue

```
<template>
  <SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss, reload, timeAgo }">
    <Transition name="slide-up">
      <div v-if="isCurrentChunksOutdated" class="skew-notification">
        <div class="skew-notification-content">
          <div class="skew-notification-message">
            <span class="skew-notification-icon">✨</span>
            <div>
              <div class="skew-notification-title">
                New update available!
              </div>
              <div v-if="timeAgo" class="skew-notification-subtitle">
                Released {{ timeAgo }}
              </div>
            </div>
          </div>
          <div class="skew-notification-actions">
            <button class="skew-button skew-button-secondary" @click="dismiss">
              Dismiss
            </button>
            <button class="skew-button skew-button-primary" @click="reload">
              Refresh
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </SkewNotification>
</template>

<style>
.skew-notification {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  max-width: 400px;
}
.skew-notification-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  padding: 1rem 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.skew-notification-message {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.skew-notification-title {
  font-weight: 600;
  font-size: 0.9375rem;
}
.skew-notification-subtitle {
  font-size: 0.8125rem;
  color: #666;
}
.skew-notification-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.skew-button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
.skew-button-primary {
  background: #18181b;
  color: white;
}
.skew-button-secondary {
  background: #f4f4f5;
  color: #52525b;
}
.slide-up-enter-active, .slide-up-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-up-enter-from {
  opacity: 0;
  transform: translateY(1rem);
}
</style>
```

Custom styled notification without UI library:

[Edit this page](https://github.com/nuxt-seo-pro/nuxt-skew-protection/edit/main/docs/content/2.guides/4.ui-examples.md)

[Markdown For LLMs](https://nuxtseo.com/docs/skew-protection/guides/ui-examples.md)

Did this page help you?

[Persistent Storage Configure persistent storage for build assets across deployments.](https://nuxtseo.com/docs/skew-protection/guides/storage-configuration) [Cookie Consent Information about cookie consent requirements for using Nuxt Skew Protection.](https://nuxtseo.com/docs/skew-protection/guides/cookie-consent)

On this page

- [Minimal Pill](#minimal-pill)
- [Native CSS](#native-css)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Home")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Idea Generator](https://nuxtseo.com/tools/keyword-generator)
- [Keyword Research](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)