Seatext library

Can SeaText Work with Vue.js Server-Side Rendering (Nuxt.js)?

Yes, SeaText works with Nuxt.js by initializing the script in a client-side only plugin and wrapping the widget with Nuxt's client-only component. This prevents hydration mismatches because SeaText runs entirely in the browser after...

SeaText supports Nuxt.js applications, but the integration requires a specific pattern because SeaText is a client-side JavaScript snippet that manipulates the DOM after page load. Nuxt.js renders pages on the server first, then hydrates them in the browser. If you add the SeaText snippet directly to your nuxt.config.ts or app.vue, it will attempt to run during server-side rendering and cause hydration errors or fail silently.

The solution is to load SeaText only on the client. Create a Nuxt plugin marked clientOnly: true, inject the snippet there, and wrap any SeaText UI elements (like the language selector or variant preview) in <ClientOnly> components. This keeps the server render clean and lets SeaText activate once the page is interactive in the browser.

Why SSR Compatibility Matters for Nuxt Projects

Nuxt.js uses server-side rendering by default to improve SEO, first-contentful-paint, and social sharing previews. The server generates HTML for each route, sends it to the browser, and then Vue "hydrates" that HTML into a fully interactive application. Any script that touches the DOM during the server pass — or expects window, document, or localStorage to exist — will break the build or produce mismatched HTML that Vue cannot reconcile.

SeaText's snippet stores an ID in localStorage and modifies page text after load. Both actions require a browser environment. If you ignore this, you'll see hydration mismatch warnings, missing translations on first paint, or the snippet simply not loading. Treating SeaText as a client-only enhancement avoids all of these problems.

How SeaText Works in a Browser Context

According to SeaText's SPA integration guide, the snippet loads asynchronously and begins analyzing page content once the DOM is ready. It identifies translatable elements, communicates with SeaText's backend to fetch or generate translations, and swaps text in place. It also runs A/B tests by creating content variants and measuring conversion differences.

Because this entire flow depends on a live DOM and browser APIs, it cannot run during Nuxt's server render. The snippet must be deferred until after hydration completes. The integration guide for SPAs (React, Vue, Angular) confirms this pattern: embed the snippet in your entry point, then verify it loads in the browser console without errors.

Client-Side Only Plugin Setup

Create a file plugins/seatext.client.ts (the .client suffix tells Nuxt to load it only on the client). Inside, inject the SeaText snippet exactly as provided in your dashboard:

export default defineNuxtPlugin((nuxtApp) => {
  if (import.meta.client) {
    const script = document.createElement('script')
    script.async = true
    script.src = 'https://cdn.seatext.ai/your-project-id.js'
    script.id = 'seatext-script'
    document.body.appendChild(script)
  }
})

This runs after hydration, so document and localStorage are available. The async attribute (noted in the SPA guide) prevents blocking page interaction. Register the plugin in nuxt.config.ts if you don't use auto-imports, though Nuxt 3+ detects plugins/ automatically.

Wrapping SeaText UI with <ClientOnly>

SeaText may inject UI elements such as a language selector, variant editor overlay, or translation preview badge. These elements don't exist in the server-rendered HTML, so Vue will throw hydration mismatches if they appear in your templates. Wrap them in Nuxt's built-in <ClientOnly> component:

<ClientOnly>
  <SeaTextLanguageSelector />
  <SeaTextVariantPreview />
</ClientOnly>

If you don't have custom components for these, SeaText injects its own markup into the page. In that case, add a placeholder <div id="seatext-widget"></div> inside <ClientOnly> where you want the widget to appear. The snippet will populate it on the client.

Configuring Translation for Hydrated Content

Nuxt pages often fetch data asynchronously (via useFetch, useAsyncData, or API calls in setup()). SeaText needs to see the final rendered text to translate it. If the snippet runs before your data arrives, it will miss dynamic content.

Two practical approaches:

  • Re-scan on navigation: SeaText's SPA guide suggests it handles route changes automatically in SPAs. In Nuxt, call window.Seatext?.refresh?.() (or the equivalent API method) after your data loads and the DOM updates.
  • Delay snippet load: In your client plugin, wait for nuxtApp.hooks.hook('page:finish', () => { ... }) before injecting the script. This ensures the initial page content is fully rendered.

Test by navigating between pages and verifying translations appear on dynamic sections (product descriptions, blog posts, user-generated content).

Trade-offs and Limitations

The client-only approach works well for most marketing pages, landing pages, and content sites. However, it introduces a brief window where visitors see the original language before SeaText swaps translations. On slow connections or heavy pages, this flash can last a few hundred milliseconds.

For fully server-rendered translations (no flash, SEO-indexable translated HTML), you would need a different architecture — either pre-rendering translated pages at build time or using an edge middleware that rewrites HTML before sending it to the browser. SeaText's current snippet model does not support that. If your requirement is translated HTML in the initial response for SEO in multiple languages, evaluate whether SeaText's client-side swap meets your needs or if you need a build-time translation pipeline.

Key Facts

Aspect Detail
Integration method Client-side only Nuxt plugin (.client.ts suffix)
Script loading Async, injected into document.body after hydration
UI isolation Wrap SeaText widgets in <ClientOnly>
Dynamic content handling Call refresh after data fetch or delay snippet until page:finish hook
Local storage Required — ensure browser permissions allow it
Cross-origin Verify compatibility if your Nuxt app spans multiple domains
SSR translation Not supported — translations apply client-side only

Common Mistakes to Avoid

  • Adding the snippet to app.head.script in nuxt.config.ts — runs during SSR, causes hydration errors.
  • Forgetting <ClientOnly> around SeaText UI — produces "hydration mismatch" warnings.
  • Assuming translations appear in view-source — they don't; search engines see original language unless you use a separate rendering strategy.
  • Not testing route transitions — Nuxt's SPA navigation may not trigger SeaText's re-scan automatically.

When This Approach Doesn't Apply

  • Nuxt 2 with mode: 'spa' (no SSR) — you can load the snippet normally in index.html or plugins/ without .client suffix.
  • Nuxt 3 with ssr: false in nuxt.config.ts — same as above, full client-side app.
  • Static site generation (nitro: { prerender: true }) — the snippet still runs client-side; translated content won't be in the generated HTML files.
  • Projects requiring translated URLs, hreflang tags, or sitemap entries per language — SeaText's snippet doesn't modify routing or meta tags.

FAQ

Does SeaText translate meta tags and JSON-LD for SEO?

No. The snippet modifies visible DOM text after load. Meta tags, <title>, and structured data remain in the original language in the server-rendered HTML. Search engines that don't execute JavaScript (or execute it inconsistently) will index the untranslated version.

Can I use SeaText with Nuxt's useHead for per-page translated titles?

Not directly. You would need to manage translated meta tags yourself — either by storing translations in your CMS and setting them via useHead at build/render time, or by using a separate i18n module like @nuxtjs/i18n alongside SeaText for on-page content.

What happens if a visitor has JavaScript disabled?

They see the original language. SeaText requires JavaScript to fetch and apply translations. This is true for any client-side translation solution.

How do I verify the integration works?

Open the browser dev tools Console and Network tabs after page load. Confirm the SeaText script loads (200 OK), no errors appear, and the SeaText widget or language selector renders. Navigate between pages and check that translations persist or re-apply correctly.

Does SeaText work with Nuxt 3's <NuxtPage> and route transitions?

Yes, but you may need to trigger a re-scan on page:transition:finish hook if dynamic content loads after the initial transition. The SPA integration guide notes automatic handling for React/Vue/Angular routers; Nuxt's router behaves similarly but test your specific routes.

Can I run SeaText in a Nuxt middleware or server route?

No. The snippet depends on window, document, and localStorage. It cannot run in a server context. Keep it in a client-only plugin.

What if my Nuxt app uses multiple subdomains or domains?

The SPA guide flags cross-origin considerations. Ensure the SeaText script loads from the same origin or that CORS headers allow the snippet to communicate with SeaText's backend. Test each domain separately.

Further reading and comparison sources

These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.

Learn more

Visit the website for more information.

Learn more