Single Page Application (SPA) Integration

A11yCore is built to handle dynamic content updates typical in SPAs. Follow these guides for React, Vue, and Angular.

How it Works

A11yCore automatically detects Single Page Application (SPA) navigation. It uses a combination ofMutationObserversandHistory APImonitoring (pushState/popstate) to identify content updates and route changes instantly.

Zero Configuration Required

Unlike other widgets, you donotneed to manually trigger scans or route hooks. A11yCore handles React, Vue, Angular, and Svelte routers out of the box.

React Integration

Simply install the widget code in your rootindex.htmlor layout file. No `useEffect` hooks needed.

Vue.js Integration

Place the snippet in yourindex.html. The widget will automatically trackvue-routerchanges.

Next.js (App Router)

For Next.js App Router, use the Script component for optimal loading.

tsx

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script 
          src="https://cdn.a11ycore.org/widget.js" 
          strategy="afterInteractive"
          data-license="YOUR_KEY"
        />
      </body>
    </html>
  );
}