Error
On this page you will find different ways in which you can styles your Error page.
Background patterns
Here is one source for background patterns. https://bg.ibelick.com/
You can copy them and modify them as you see fit.
Adding a custom error page
To add a custom error page, you can create a new file in the root of your nuxt app call error.vue. You can learn more about this in the Nuxt documentation.
Simple
Grid pattern background with left-aligned content and staggered entrance animations.
Centered
Radial dot pattern background with centered text layout and animated content reveal.
Image
Two-column split layout featuring decorative image with slide-in animation and responsive stacking.
Links
Grid background with helpful navigation links featuring staggered animations and hover effects.
Animated
Gradient background with floating blobs and GSAP timeline animations for smooth sequential reveals.
Requires: npm install gsap
Suggestions carousel
Interactive carousel showcasing helpful resource cards with auto-play functionality.
Requires: Nuxt Swiper module.
Minimal
Clean, minimal design with custom SVG illustration and spring-based entrance animations.
Dark / Stats
Dark-themed error page with status cards, error details in terminal style, and retry actions.
Interactive Search
Feature-rich error page with inline search input and popular pages grid for easy navigation.
Call To Action (CTA)
Compelling call-to-action sections with animated entrances, testimonials, and conversion-focused designs. Features newsletter signups, app downloads, feature showcases, and testimonial carousels to drive user engagement.
FAQs
Comprehensive FAQ section components with multiple layouts including grids, accordions, cards, and search functionality for help centers and support pages.