React, Next.js, Vue

Translate a React, Next.js or Vue app

Single-page apps swap content in rather than loading a new page. The widget watches the page for exactly that and translates each new screen as it renders.

Start your 7-day trial See it running

What you need

Somewhere in your app's HTML shell to put a script tag.
Nothing to install. There is no Verbafy package to add to your dependencies.

Where the snippet goes

Copy your snippet

Open your site in the Verbafy dashboard and copy the embed snippet.

Your page, before </body>

<script
  src="https://cdn.verbafy.app/widget.js"
  data-site-id="site_abc123"
  data-api-key="pk_live_your_key"
></script>

Put it in your app shell

Vite or Create React App: before </body> in index.html or public/index.html. Vue: the same index.html. Next.js App Router: in the <body> of app/layout.tsx, using next/script with strategy="afterInteractive" and the two data attributes.
Reload once

There is no build step and no provider to wrap your tree in.

Check it is working

Load the app. The switcher is in the bottom right corner.
Switch language, then navigate to another route without reloading. The new screen arrives translated.

Worth knowing on JavaScript apps

Route changes need no extra wiring

The widget watches the document for changes and translates what arrives, so a client-side route change is handled the same as any other content update. There is no router integration to write.

Your own switcher, if you want one

Add data-display="none" and the widget renders no UI at all. Your markup drives it through window.Verbafy and four events. The contract is documented and frozen.

Server-rendered HTML is translated in the browser

Next.js can render your pages on the server, but the translation still happens in the visitor's browser, after the HTML arrives. What a crawler reads is your source language.