Browser Support

Vuetify0 targets modern evergreen browsers. Some features require newer browser versions or degrade gracefully when unavailable.

Baseline Support

Vuetify0 requires Vue 3.5+, which targets browsers with native ES2016 support↗:

Feature Compatibility

Some v0 features use modern browser APIs that have varying levels of support. The library includes feature detection and graceful degradation where possible.

Cutting-Edge Features

These features require the latest browser versions and may not work in all browsers:

Well-Supported Features

These features have broad browser support with proper feature detection:

SSR & Hydration Safety

All composables use the IN_BROWSER constant and useHydration composable to ensure safe server-side rendering:

import { IN_BROWSER } from '#v0/constants/globals'
import { useHydration } from '#v0/composables'

const { isHydrated } = useHydration()

// Browser APIs are only accessed after hydration
if (isHydrated.value && IN_BROWSER) {
  // Safe to use browser APIs
}

Feature Detection Constants

v0 exposes feature detection constants for conditional logic:

import {
  IN_BROWSER,
  SUPPORTS_TOUCH,
  SUPPORTS_MATCH_MEDIA,
  SUPPORTS_OBSERVER,
  SUPPORTS_INTERSECTION_OBSERVER,
  SUPPORTS_MUTATION_OBSERVER,
} from '#v0/constants/globals'

Documentation Site

The documentation site you’re viewing uses additional modern features for the best experience. For optimal documentation browsing:

Docs-Specific Features

The documentation site uses these modern CSS and browser features:

• color-mix() — Theme color blending and glass effects

• light-dark() — Native CSS theme switching

• inert attribute — Modal focus management

• CSS Nesting — Organized stylesheets

• Backdrop Filter — Glass morphism effects

• Service Workers — Offline support (PWA)

Known Limitations

CSS Anchor Positioning

The Popover component uses CSS Anchor Positioning for automatic placement relative to trigger elements. This is a new CSS feature with limited support:

• Chrome 125+: Full support
• Edge 125+: Full support
• Firefox 147+: Beta support only
• Safari: Not yet supported

When anchor positioning is unavailable, the CSS properties are simply ignored. Consider using a JavaScript positioning library like Floating UI↗ for broader browser support.

Popover API

The native Popover API provides built-in light dismiss behavior and top-layer rendering. Support is growing but not universal:

• Chrome 114+: Full support
• Edge 114+: Full support
• Firefox 125+: Full support
• Safari 17+: Full support
• Opera 100+: Full support

The v0 Popover component uses optional chaining (element.showPopover?.()) to gracefully handle missing API support.

Native Dialog

The <dialog> element with showModal() is well-supported in modern browsers but older Safari versions lack support:

• Safari 15.4+: Full support
• Safari < 15.4: No support, no fallback

Consider a dialog polyfill if you need to support older Safari versions.

Polyfills

Vuetify0 does not include polyfills to keep bundle sizes small. If you need to support older browsers, consider adding polyfills for:

• ResizeObserver: resize-observer-polyfill↗ · caniuse↗

• IntersectionObserver: intersection-observer↗ · caniuse↗

• Dialog: dialog-polyfill↗ · caniuse↗

Testing Your Browser

You can check your browser’s feature support using these resources:

• Can I Use↗ — Browser compatibility tables

• MDN Web Docs↗ — Feature documentation and support info

• Baseline↗ — Web platform feature availability