Seatext library

When to Initialize SeaText in Your Vue Application Lifecycle

Initialize SeaText in your Vue app's main.js before mounting the app, or in a plugin's install() method, so it's ready before any component renders. This guide covers Vue 2 and Vue 3 implementation, early...

SeaText rewrites a landing page to match the ad click that brought the visitor. It reads the search term from URL parameters and changes the headline, subhead, proof points, offer, and call to action before the page appears. In a Vue application, the initialization timing controls whether that rewrite happens before the first paint or after a visible flash.

The safe default is to initialize SeaText in main.js before app.mount(), or inside a plugin's install() method. This makes the script ready before any component renders. Do not wait for a component lifecycle hook such as created() or mounted() on a top-level component. Those hooks run after Vue has started rendering.

This guide explains why timing matters, how to implement SeaText in Vue 2 and Vue 3, when late initialization is acceptable, how SeaText works with Vue Router, and how to fix common integration errors.

Readiness Checklist for SeaText Initialization

Use this checklist to confirm you are ready to initialize SeaText:

Entry point identified – Locate the file where Vue creates and mounts the app. This is usually src/main.js.
SeaText snippet placed – Add the snippet inside the <body> of index.html, or insert it in main.js before the mount call.
Async loading configured – The snippet should keep the async attribute so it does not block rendering.
Local storage allowed – The script stores an ID in local storage. Your app must allow local storage access.
Cross-origin behavior reviewed – If the SPA interacts with multiple domains, verify that the script works without cross-origin errors.
Advertising parameters available – SeaText reads utm_term or Google Ads ValueTrack {keyword} tags. Make sure your campaign links include them.
Build and test – Build the app, open Developer Tools, and inspect the Console and Network tabs for script errors.

Why Early Initialization Matters

SeaText is a lightweight client script under 15 KB. It executes synchronously in under 15 ms before visual paint. It does not cause Cumulative Layout Shift, so CLS stays at 0. That is why early placement matters: the script has to run before the browser paints the Vue app.

If Vue mounts first, the default page becomes visible. Then SeaText rewrites the content. Visitors see two versions of the page, and the ad promise is broken. This is often called ad scent disconnect. Paid visitors bounce when they cannot immediately find what the ad promised.

SeaText also detects bots in paid traffic and saves evidence for refund reports. That detection works best when the script is active on the landing page from the first moment of the visit.

Step-by-Step: Vue 3 Implementation

Vue 3 applications usually start in src/main.js. The app is created with createApp and mounted with app.mount().

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

// Insert the SeaText snippet here, before mount.
// Replace SEATEXTCODEINTEGRATION with your snippet.

createApp(App).mount('#app')

Open src/main.js.
Add the SeaText snippet before the createApp(App).mount('#app') line.
If you prefer, add the snippet inside the <body> of index.html instead. That also runs before the app mounts.
Keep the async attribute on the script tag.
Build and serve the app.
Open Developer Tools and confirm the script loads without errors.

If you use a Vue plugin, place the initialization logic in the plugin's install() method. Vue calls install() during app.use(), before the app mounts.

Step-by-Step: Vue 2 Implementation

Vue 2 uses the same placement idea. The entry point is usually src/main.js, and the app is created with new Vue().

// src/main.js
import Vue from 'vue'
import App from './App.vue'

// Insert the SeaText snippet here, before mount.

new Vue({ render: h => h(App) }).$mount('#app')

Open src/main.js.
Add the SeaText snippet before the new Vue(...) line.
If you use a plugin, call Vue.use(SeaTextPlugin) before the mount line.
Check that the snippet does not depend on a component instance. SeaText works at the document level, not inside a Vue component.
Build the app and verify the script in the Network tab.

Do not place the snippet inside a component's mounted() hook. By then, the initial render has already happened.

Early vs Late Initialization Scenarios

Early initialization is the best choice for most landing pages. It is required when the first paint must match the ad promise. Late initialization is only acceptable when the first paint does not contain ad-matched content.

Scenario	Recommended timing	Reason
Google Ads landing page	Before mount	The page must match the search term before paint.
Multi-step wizard or AJAX content	Late may work	The first screen does not need ad-matched copy.
Single-page app with Vue Router	Before mount	SeaText reads URL parameters on page load.
Development or test environment	Disable snippet	Test traffic can trigger unwanted rewrites.

Signs you should wait:

Your app is still in development or testing. Disable the snippet or use a staging environment.
Your ad campaigns do not pass utm_term or ValueTrack parameters. SeaText needs that data to match content.
Your Content Security Policy blocks the script. Confirm the script is allowed to run.
You are not ready to review bot detection reports. SeaText flags suspicious clicks and prepares refund evidence.

SeaText and Vue Router

Vue Router handles navigation inside the browser. When a visitor lands on a paid ad URL, the router parses the path and query parameters. SeaText needs those query parameters to know which keyword triggered the click.

Make sure Vue Router does not remove utm_term or other tracking parameters before SeaText runs. If the router redirects or sanitizes the URL, the script may not have the data it needs.

SeaText is designed to run on page load. For most paid campaigns, the visitor enters through a full page load, so the script runs before Vue Router takes over. If your app uses client-side navigation after the landing page, the initial load still matters most.

If you need SeaText to react to route changes without a full page load, test it with your router configuration. Query parameter preservation depends on your route setup. Check with the vendor for route-change support.

Troubleshooting Common Integration Errors

Here are common errors and fixes.

SeaText does not load: Open the Network tab. Confirm the script tag exists and the URL is correct. Check whether your Content Security Policy blocks it.
The default page flashes before the rewrite: Move the snippet to main.js before the mount call. A later hook like mounted() runs after the first paint.
No rewrite happens: Check the URL for utm_term or {keyword}. Make sure Vue Router preserves query parameters.
Local storage errors: SeaText stores an ID in local storage. Allow local storage in your app and test in a normal browser context.
Cross-origin errors: If your SPA talks to multiple domains, verify that the script is compatible. Check with the vendor for domain-specific requirements.
Development traffic gets rewritten: Disable the snippet outside production. Use environment variables to load it only when needed.

Limitations and What to Consider

SeaText is built for SPAs, but placement still matters. A component hook is too late for the first paint. The script also depends on URL parameters. If your router strips them, the rewrite cannot happen.

SeaText is not a replacement for server-side rendering. If you use Nuxt or SSR, run the snippet on the client side only. This avoids server-side errors and keeps the rewrite in the browser.

Monitor bot detection after launch. SeaText creates refund-ready reports for invalid clicks. You need to review those reports and submit them to Google, Meta, TikTok, or Reddit.

Frequently Asked Questions

Can I initialize SeaText inside a Vue component's created() hook?

Not recommended. The created() hook runs after the component instance is created but before mounting. However, the page can still render before the rewrite completes. Use main.js instead.

Does SeaText work with Vue 3's Composition API?

Yes. Initialization is independent of the API. Place the snippet in main.js before app.mount().

Will SeaText affect performance?

No. The script is under 15 KB, loads asynchronously, and executes in under 15 ms. It does not cause layout shift.

What if I use Nuxt.js or SSR?

Add the snippet client-side only. For Nuxt, use a client-only plugin or a process.client check. This prevents server-side errors.

How do I verify SeaText is working?

Open Developer Tools. Check the Console and Network tabs. Then visit the page through a test ad click that includes utm_term. The page should show matching content immediately.

Does SeaText work with Vue Router?

Yes, as long as query parameters are preserved on the initial page load. If you need route-change support, check with the vendor.

Learn more

Visit the website for more information.

Learn more

When to Initialize SeaText in Your Vue Application Lifecycle

Readiness Checklist for SeaText Initialization

Why Early Initialization Matters

Step-by-Step: Vue 3 Implementation

Step-by-Step: Vue 2 Implementation

Early vs Late Initialization Scenarios

SeaText and Vue Router

Troubleshooting Common Integration Errors

Limitations and What to Consider

Frequently Asked Questions

Can I initialize SeaText inside a Vue component's created() hook?

Does SeaText work with Vue 3's Composition API?

Will SeaText affect performance?

What if I use Nuxt.js or SSR?

How do I verify SeaText is working?

Does SeaText work with Vue Router?

Further reading and comparison sources

Further reading and comparison sources

Learn more