Seatext library

SeaText AI Script Integration for Vue 3 Single Page Apps

SeaText AI provides a single universal JavaScript snippet that works with Vue 3 SPAs when added to your application's entry point. The snippet loads asynchronously, uses local storage for visitor identification, and requires no...

How SeaText AI Integrates with Vue 3

SeaText AI does not publish multiple script versions for different frameworks. Instead, it supplies one universal snippet that you embed in your Vue 3 project's entry point. The snippet carries the async attribute so it loads without blocking page render, stores a visitor ID in localStorage, and communicates with SeaText's backend to rewrite copy, run A/B tests, translate content, and detect bot traffic.

Why SPA Versioning Questions Arise

Developers often ask which script version to use because modern frameworks like Vue 3 support ES modules, dynamic imports, and server-side rendering. SeaText distributes a single async script tag rather than an npm package or ES module build. This creates a mismatch: Vue projects expect importable modules, but SeaText delivers a global script that self-initializes. The question is not about picking a version — it is about bridging the delivery format to Vue's module system without losing the async, non-blocking guarantee.

Decision Criteria: Choosing Your Integration Method

CriterionOption A: index.htmlOption B: main.js dynamic inject
Setup effortLow — one paste in static HTMLMedium — few lines of JS in bootstrap
Version controlSnippet lives outside repo (unless you commit index.html)Snippet URL tracked in source control
Cache behaviorBrowser caches index.html; snippet updates require redeploySame, but you can swap URL via env variable
SSR / Nuxt 3 compatibilityWorks if snippet is in app.head or body hookPrefer Nuxt useHead or plugin instead
Content Security PolicyAdd script-src for SeaText domainSame requirement
Team workflowNon-devs can update via dashboardDev-only changes

Choose Option A if you want the fastest setup and marketing teammates may update the snippet. Choose Option B if you treat every external script as a dependency that belongs in code review.

Where to Place the Snippet in a Vue 3 Project

Vue 3 applications typically bootstrap in main.js (or main.ts) and mount onto an element in index.html. You have two practical options:

  • Option A — index.html: Paste the snippet inside the <body> tag of public/index.html before the closing </body>. This mirrors the generic SPA instructions and guarantees the script loads before Vue mounts.
  • Option B — main.js import: If you prefer module-style imports, copy the snippet's src URL and dynamically inject a <script async> tag in main.js after Vue creates the app but before app.mount(). This keeps the integration inside your build pipeline.

Both approaches work; choose based on whether you want the snippet outside your build (Option A) or version-controlled alongside your code (Option B).

How the Async Snippet Behaves with Vue's Lifecycle

The SeaText snippet includes async, so the browser fetches it in parallel with HTML parsing and executes it as soon as it arrives, without waiting for DOMContentLoaded or Vue's mounted hook. This timing matters: SeaText rewrites text nodes directly in the live DOM. If the script runs before Vue mounts, it sees the initial server-rendered or template HTML and rewrites those nodes. Vue's hydration then treats the rewritten nodes as the baseline and does not revert them. If the script runs after mount, SeaText's internal observer still scans the DOM and applies rewrites to any text nodes it finds. In both cases, Vue's reactivity system is unaffected because SeaText mutates text nodes, not component state.

For client-side navigation, SeaText's observer re-scans the DOM on each route change automatically. No router hooks or nextTick calls are required. The script also stores a visitor ID in localStorage on first load; ensure your auth flow does not clear localStorage on logout, or the visitor identity will reset.

Concrete Dynamic-Injection Code Example for main.js

Below is a minimal, production-ready pattern for Option B. Place it in src/main.js (or main.ts) after createApp and before app.mount().

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/main.css'

const app = createApp(App)
app.use(router)

// SeaText dynamic injection
const seatextUrl = import.meta.env.VITE_SEATEXT_SNIPPET_URL || 'https://cdn.seatext.com/your-account-id.js'
const script = document.createElement('script')
script.src = seatextUrl
script.async = true
script.setAttribute('data-seatext', 'true')
document.body.appendChild(script)

app.mount('#app')

Use an environment variable (VITE_SEATEXT_SNIPPET_URL) so you can swap the URL per environment without code changes. The data-seatext attribute helps debugging — you can query document.querySelector('[data-seatext]') in DevTools to confirm injection. If you use TypeScript, add a type declaration for import.meta.env in src/vite-env.d.ts.

Key Integration Steps

  1. Identify the entry point — usually public/index.html or src/main.js.
  2. Add the snippet — paste the provided SeaText code exactly as shown in your dashboard, or use the dynamic injection pattern above.
  3. Configure CSP — add script-src https://cdn.seatext.com (or your snippet's domain) to your Content Security Policy header or meta tag.
  4. Build and serve — run npm run build and npm run preview (or npm run serve for dev).
  5. Inspect the page — open DevTools (F12), check Console and Network tabs for the SeaText script loading without errors.
  6. Verify functionality — confirm SeaText features (rewrites, translations, variant tests) appear and behave as expected.

Detailed Verification Walkthrough

  1. Network tab: Filter by "JS". Confirm the SeaText script returns HTTP 200 and the response body is JavaScript (not an HTML error page). The file size should be under 15 KB.
  2. Console tab: Look for any CSP violations referencing the SeaText domain. If present, update your CSP header. Also verify no "SeaText is not defined" errors — the script exposes a global window.seatext object after execution.
  3. Application > Local Storage: After the first page view, a key like seatext_visitor_id should exist. Its value is a UUID that persists across reloads.
  4. Elements tab: Inspect a headline or button that SeaText should rewrite. The text node content should differ from your source template. You can also search the DOM for data-seatext-variant attributes that SeaText adds to tracked elements.
  5. SeaText dashboard: After 5–10 minutes, your site should show as "connected" in the Main AI Hub. If not, re-check the snippet URL and CSP.
  6. Route change test: Navigate to a different route via router.push() or a link. Verify rewrites still apply on the new view without a full page reload.

Vue 3 Specific Considerations

  • Reactivity: SeaText rewrites text nodes directly in the DOM. Vue's virtual DOM will not overwrite those changes because SeaText runs after mount and targets rendered text.
  • Router navigation: The snippet initializes once on full page load. For client-side route changes, SeaText's internal observer re-scans the DOM automatically — no extra router hooks required.
  • Local storage: Ensure your Vue app does not clear localStorage on login/logout; SeaText relies on its visitor ID persisting across sessions.
  • Cross-origin: If your Vue app serves from app.example.com but API calls go to api.example.com, confirm the SeaText snippet domain is allowed in both origins' CSP headers.
  • TypeScript: If you use the dynamic injection pattern, declare interface Window { seatext: any } in a global types file to avoid TS errors when accessing window.seatext.

Key Facts

FactDetails
Script deliverySingle universal snippet with async attribute
Supported SPA frameworksReact, Vue.js, Angular (per documentation)
Storage mechanismVisitor ID stored in localStorage
Load performanceAsync load; under 15 KB; executes before visual paint
Integration verificationDevTools Console + Network tabs; functionality check in UI
Multi-domain ruleSeparate SeaText account required per primary domain
Development domainslocalhost restricted; use valid domain for testing

Limitations and When This Advice Does Not Apply

  • If you use Nuxt 3 with server-side rendering, the snippet must be injected via useHead() or a Nuxt plugin so it renders in the initial HTML payload.
  • Projects that strip async attributes during build (rare) will lose the non-blocking guarantee.
  • Environments that block third-party scripts via strict CSP without adding SeaText's domain will prevent the script from loading.
  • The guidance above covers the client-side snippet only. Server-side API integrations (if any) are separate and not addressed here.

Frequently Asked Questions

Does SeaText offer an ES module build I can import directly?

No. The current distribution is a single async script tag. Dynamic injection in main.js (Option B) is the closest equivalent to an import.

Will SeaText break Vue's hydration in SSR mode?

Not if the snippet is present in the server-rendered HTML. SeaText runs after hydration and mutates text nodes; Vue treats those as external DOM changes and does not revert them.

Can I lazy-load the snippet after Vue mounts?

Yes, but you lose the pre-paint rewrite window. SeaText's sub-15 ms execution is designed to run before first paint; delaying it may cause a visible flash of original copy.

What if my Vue app uses multiple domains (e.g., subdomain per locale)?

Each primary domain needs its own SeaText account and snippet. The documentation explicitly states one account per primary URL.

How do I test locally if localhost is restricted?

Use a real domain pointed to 127.0.0.1 (e.g., local.example.com via /etc/hosts) or a tunneling service like ngrok that provides a valid HTTPS URL.

Does the snippet version ever change without notice?

The snippet URL is stable. SeaText updates the script at that URL; your page automatically receives the latest version on next load. No manual version bump required.

Troubleshooting Checklist

  • Script appears in Network tab with 200 status.
  • No CSP errors in Console referencing SeaText domain.
  • localStorage contains a SeaText visitor ID after first page view.
  • SeaText dashboard shows your site as "connected" after 5–10 minutes.
  • Variant/translation changes appear in the rendered DOM (inspect element).

Next Steps

Pick Option A or B, add the snippet, run the verification steps, then activate the AI agents you need (CRO, translation, bot protection, etc.) from the SeaText dashboard. The integration itself takes under a minute; the value comes from enabling the agents that match your growth goals.

Further reading and comparison sources

These official SeaText documentation sources provide additional context for evaluating the topic.

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