Seatext library

Integrating SeaText AI with a Vue.js Application

Add the SeaText AI JavaScript snippet to your Vue.js project’s entry point, rebuild the app, and verify the script loads and works in the browser. This guide walks through each step, shows how to...

To integrate SeaText AI with a Vue.js application, insert the SeaText AI JavaScript snippet into the page that loads when your app starts, then rebuild and serve the project. After the build, open the browser’s developer tools to confirm the script loads without errors and that its features (such as page translation or bot detection) are active.

The process follows the generic SPA instructions provided in SeaText’s documentation: locate the entry point (usually index.html or a main JavaScript file), place the snippet inside the body tag or the equivalent initialization section, run your Vue build command, and inspect the console and network tabs for successful loading and functionality.

Prerequisites and preparation

Before you begin, make sure you have:

  • A Vue.js project created with Vue CLI, Vite, or another standard tool.
  • Access to the project’s public folder or the template that serves as the entry HTML file.
  • The SeaText AI snippet provided in your account dashboard (it looks like a script tag with an async attribute and a unique identifier).
  • Basic familiarity with running npm commands such as npm run serve or npm run dev.

Check that your content security policy (CSP) allows external scripts from the SeaText domain, or add the needed exception. Also verify that the browser permits local storage, because the snippet stores an identifier there.

Adding the SeaText AI snippet to a Vue.js project

  1. Open the file that serves as the HTML entry point. For a Vue CLI project this is typically public/index.html. For a Vite project it is index.html at the project root.
  2. Locate the opening <body> tag.
  3. Paste the full SeaText AI snippet directly after the opening body tag, before any other scripts or your app’s mount point. The snippet should look like:
<script async src='https://cdn.seatext.ai/seatext.js' data-key='YOUR_API_KEY'></script>

Replace YOUR_API_KEY with the key from your SeaText account. The async attribute ensures the script does not block page rendering.

  • Save the file.
  • Run your usual development server command, for example npm run serve for Vue CLI or npm run dev for Vite.
  • When the build completes, open the application in a browser.

    • Verifying the integration

    After the app loads, open the developer tools (F12).

    1. Go to the Network tab and reload the page. Look for a request to seatext.js or a similar domain; the status should be 200 and the initiator should be your index.html.
    2. Switch to the Console tab. You should see no error messages related to the SeaText script. If the script logs a message, it will appear here.
    3. To test a core feature, change the browser’s language or use a tool that simulates a visitor from another country. If the translation agent is active, you should see page text replaced with the target language without a full reload.
    4. Alternatively, open the Application tab, then Local Storage, and confirm that a key prefixed with seatext_ exists.

    If all checks pass, the SeaText AI snippet is successfully integrated.

    How SeaText AI works in a SPA

    Once loaded, the SeaText AI script runs before the page paints. It reads the current URL, any UTM or ValueTrack parameters, and the visitor’s detected language or origin. Based on this data it can:

    • Rewrite headlines, buttons, offers, and product copy to match the ad or referral source.
    • Translate the entire page into up to 125 languages, storing the translation in the DOM so search engines can index it.
    • Detect signs of bot or invalid click behavior and store evidence for later reporting.

    These actions happen client‑side, so they do not require a server‑side change. The script’s small size (under 15 KB) and synchronous execution prevent layout shift.

    Options and trade‑offs

    The documentation describes the snippet as the universal method for SPAs, including Vue.js. There are two practical ways to use it:

    1. Direct snippet insertion (as shown above). This requires no extra dependencies and works with any Vue build setup.
    2. Wrap the snippet in a tiny Vue plugin if you prefer to manage it through the plugin system. (hypothetical example: create a file seatext-plugin.js that injects the script tag on mounted of the root component.) This approach adds a layer of abstraction but does not change the underlying behavior.

    Both options produce the same result; the direct snippet is simpler and avoids an extra build step.

    Common pitfalls and how to avoid them

    • Missing async attribute: If you remove async, the script may block rendering and slow down the initial paint. Keep the attribute as provided.
    • Incorrect placement: Placing the snippet inside <head> can still work, but the documentation recommends the body tag to ensure the script runs after the DOM begins to build. Follow the body‑tag guidance.
    • CSP blocking: A strict Content Security Policy that disallows external scripts will stop the snippet from loading. Add script-src 'self' https://cdn.seatext.ai; to your CSP header or meta tag.
    • Local storage disabled: In incognito mode or with certain privacy extensions, local storage may be blocked, causing the snippet to fail silently. Test in a regular browser window or inform users to allow storage for your domain.
    • Multiple snippet inserts: Accidentally adding the snippet twice can cause duplicate requests and unexpected behavior. Verify that only one instance appears in the Network tab.

    Limitations and when the advice does not apply

    These instructions assume a standard client‑side Vue.js application that sends HTML to the browser. They do not cover:

    • Server‑side rendering (SSR) setups where the initial HTML is generated on Node.js. In such cases you may need to add the snippet to the template that hydrates on the client, or use a plugin that injects it after hydration.
    • Environments that prohibit local storage entirely (e.g., some sandboxed iframes). The snippet will still load but cannot store its identifier, which may affect certain features like variant persistence.
    • Projects that already use a different translation or personalization library that conflicts with SeaText’s DOM modifications. Test for conflicts in a staging environment.

    If you encounter any of these situations, consult the SeaText support team for a tailored integration approach.

    Key facts

    Fact Detail
    Snippet attribute The script tag includes async to avoid blocking page load.
    Local storage usage The script stores an identifier in local storage; ensure the application permits this.
    Cross‑origin compatibility If your SPA interacts with multiple domains, verify the script works across those origins.
    Supported SPA frameworks Documentation explicitly lists React, Vue, and Angular as compatible.
    Language coverage SeaText AI can translate pages into up to 125 languages.
    Bot detection The script checks each paid visit for signs of invalid clicks and builds refund‑ready reports.

    Practical scenarios

    Imagine you run an e‑commerce site built with Vue.js and you run Google Ads campaigns in several countries. By adding the SeaText AI snippet:

    • A user clicking an ad for “French summer dresses” sees the headline, product description, and call‑to‑action automatically rewritten in French, matching the ad’s promise.
    • If the click originates from a known bot IP, the script logs the session and later you can download a report to submit to Google for a potential refund.
    • Because the translation happens in the browser, you do not need to maintain separate URLs or duplicate content for each language.

    Another scenario: a content‑marketing team publishes a blog in English but wants to reach readers in Japan and Brazil. The same snippet serves translated versions of the article without requiring a multilingual CMS.

    Frequently asked questions

    Do I need to rebuild my Vue app after adding the snippet?
    Yes. The snippet must be part of the served HTML, so run your standard build command (npm run build for production or npm run serve for development) and redeploy.
    Can I use the snippet with Vue 3’s Composition API?
    The snippet works independently of the Vue version; it only needs to be present in the HTML that boots the app.
    What if my site uses a strict Content Security Policy?
    Add the SeaText CDN to the script-src directive of your CSP, or use a nonce/hash if your policy requires it.
    Does SeaText AI affect page speed metrics?
    The script is under 15 KB and executes synchronously before visual paint, so it does not introduce measurable layout shift or delay.
    Is there a Vue‑specific wrapper available?
    The official documentation does not provide a Vue plugin; you can create a thin wrapper yourself if you prefer to manage the snippet through Vue’s plugin system.

    Further reading and comparison sources

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

    How SeaText can help

    SeaText AI can automatically translate your Vue.js SPA content into up to 125 languages and detect invalid clicks in paid traffic, giving you translation and bot‑protection features without maintaining separate sites. The snippet must be allowed to run and to write to local storage; if your CSP blocks external scripts or disables local storage, those features will not work.

    Get the SeaText AI snippet