Coframe
Developer documentation
coframe.com (opens in a new tab) Open app (opens in a new tab)
DocumentationSDK Integrations

Nuxt

Install the Coframe SDK in a Nuxt app (SSR or SPA)

Guide~4 min read

Copy this guide and your current settings as a prompt for your AI agent.

Preview agent promptSee the guide, code and settings included when you copy.
Only this guide is included. Linked guides and videos are references.

This guide covers adding Coframe to a Nuxt application. Because Nuxt renders on the server before hydrating on the client, Coframe uses a waitForHydration flag so variant changes are applied only after Vue has fully mounted. Choose the section below that matches your rendering mode.

Watch: 65s — the useHead block in app.vue for SSR and SPA, and verifying in DevTools
On this page
  1. 01With SSR
  2. 02Without SSR
  3. 03Verify it is working
  4. 04Optional configuration
Configure your installation

Set your project ID and options in the editor. Then follow the steps below using the updated code.

Installation editor

Configure once. Every code snippet in the guide updates with your settings.

Use your public project ID, or replace the placeholder before publishing.
SSR · app.vue

Use this in SSR · app.vue. Follow the placement instructions in this guide. Keep the hydration callback connected.

VUE · generated from your settings
<script setup lang="ts">
import { onMounted, watch, ref } from 'vue'

useHead({
  script: [
    {
      id: 'coframe-setup',
      type: 'text/javascript',
      innerHTML: `
          (function () {
            // Early exit for performance testing
            if (/cf_disable/.test(location.search)) return console.warn('[Coframe] Disabled via URL parameter');
          
            // Coframe config
            const config = {
              projectId: 'YOUR_PROJECT_ID',
              startTime: Date.now(),
              timeoutMs: 1000,
              currentUrl: window.location.href,
              waitForHydration: true, // Wait for the framework readiness signal
            };
          
            // Prevent duplicate installation
            const script_id = 'coframe-sdk-js';
            if (document.getElementById(script_id)) return console.warn('[Coframe] SDK already installed');
          
            // Coframe queue setup
            (window.CFQ = window.CFQ || []).push({ config });
          
            // Coframe antiflicker CSS
            const style = document.createElement('style');
            style.id = 'coframe-antiflicker';
            style.textContent =
              ':root { --cf-show: 0;}' +
              'body { opacity: var(--cf-show) !important; transition: opacity 0.2s ease; }'
            function hide() { document.head.appendChild(style); }
            function show() {
              document.documentElement.style.setProperty('--cf-show', '1');
              style.parentNode && style.parentNode.removeChild(style);
            }
            hide(); setTimeout(show, config.timeoutMs);
          
            // Coframe SDK JS
            var edgeUrl = new URL('https://edge.cofra.me/cf.js');
            edgeUrl.searchParams.set('config', encodeURIComponent(JSON.stringify(config)));
          
            const script = document.createElement('script');
            script.id = script_id;
            script.async = true;
            script.src = edgeUrl.toString();
            script.onerror = () => { show(); console.error('[Coframe] SDK failed to load'); };
            document.head.appendChild(script);
          })();
          `,
      tagPosition: 'head'
    }
  ],
  // Nuxt 2 note: if using <script> innerHTML, uncomment the line below:
  // __dangerouslyDisableSanitizers: ['script']
});

// Send page hydrated event
onMounted(() => {
  window.CFQ = window.CFQ || [];
  window.CFQ.push({ pageHydrated: true });
});
</script>
2 scripts · 0 companions
Configuration2 on
Antiflicker mode

01With SSR

Add the following code to your app.vue file. The useHead composable injects the Coframe installation script into the server-rendered <head>, and onMounted fires the pageHydrated event after Vue hydrates on the client.

Replace YOUR_PROJECT_ID with the project ID from your Coframe dashboard.

VUE
<script setup lang="ts">
import { onMounted, watch, ref } from 'vue'

useHead({
  script: [
    {
      id: 'coframe-setup',
      type: 'text/javascript',
      innerHTML: `
          (function () {
            // Early exit for performance testing
            if (/cf_disable/.test(location.search)) return console.warn('[Coframe] Disabled via URL parameter');
          
            // Coframe config
            const config = {
              projectId: 'YOUR_PROJECT_ID',
              startTime: Date.now(),
              timeoutMs: 1000,
              currentUrl: window.location.href,
              waitForHydration: true, // Wait for the framework readiness signal
            };
          
            // Prevent duplicate installation
            const script_id = 'coframe-sdk-js';
            if (document.getElementById(script_id)) return console.warn('[Coframe] SDK already installed');
          
            // Coframe queue setup
            (window.CFQ = window.CFQ || []).push({ config });
          
            // Coframe antiflicker CSS
            const style = document.createElement('style');
            style.id = 'coframe-antiflicker';
            style.textContent =
              ':root { --cf-show: 0;}' +
              'body { opacity: var(--cf-show) !important; transition: opacity 0.2s ease; }'
            function hide() { document.head.appendChild(style); }
            function show() {
              document.documentElement.style.setProperty('--cf-show', '1');
              style.parentNode && style.parentNode.removeChild(style);
            }
            hide(); setTimeout(show, config.timeoutMs);
          
            // Coframe SDK JS
            var edgeUrl = new URL('https://edge.cofra.me/cf.js');
            edgeUrl.searchParams.set('config', encodeURIComponent(JSON.stringify(config)));
          
            const script = document.createElement('script');
            script.id = script_id;
            script.async = true;
            script.src = edgeUrl.toString();
            script.onerror = () => { show(); console.error('[Coframe] SDK failed to load'); };
            document.head.appendChild(script);
          })();
          `,
      tagPosition: 'head'
    }
  ],
  // Nuxt 2 note: if using <script> innerHTML, uncomment the line below:
  // __dangerouslyDisableSanitizers: ['script']
});

// Send page hydrated event
onMounted(() => {
  window.CFQ = window.CFQ || [];
  window.CFQ.push({ pageHydrated: true });
});
</script>

02Without SSR

In non-SSR (SPA) Nuxt applications, the <head> is not generated on the server, so the anti-flicker protection cannot run. Page content may briefly appear before Coframe applies changes. The rest of the integration works the same way.

Add the following code to your app.vue file.

VUE
<script setup lang="ts">
import { onMounted, watch, ref } from 'vue'

useHead({
  script: [
    {
      key: "coframe-setup",
      type: "text/javascript",
      innerHTML: `
          (function () {
            // Early exit for performance testing
            if (/cf_disable/.test(location.search)) return console.warn('[Coframe] Disabled via URL parameter');
          
            // Coframe config
            const config = {
              projectId: 'YOUR_PROJECT_ID',
              startTime: Date.now(),
              timeoutMs: 1000,
              currentUrl: window.location.href,
              waitForHydration: true, // Wait for the framework readiness signal
            };
          
            // Prevent duplicate installation
            const script_id = 'coframe-sdk-js';
            if (document.getElementById(script_id)) return console.warn('[Coframe] SDK already installed');
          
            // Coframe queue setup
            (window.CFQ = window.CFQ || []).push({ config });
          
            // Coframe antiflicker CSS
            const style = document.createElement('style');
            style.id = 'coframe-antiflicker';
            style.textContent =
              ':root { --cf-show: 0;}' +
              'body { opacity: var(--cf-show) !important; transition: opacity 0.2s ease; }'
            function hide() { document.head.appendChild(style); }
            function show() {
              document.documentElement.style.setProperty('--cf-show', '1');
              style.parentNode && style.parentNode.removeChild(style);
            }
            hide(); setTimeout(show, config.timeoutMs);
          
            // Coframe SDK JS
            var edgeUrl = new URL('https://edge.cofra.me/cf.js');
            edgeUrl.searchParams.set('config', encodeURIComponent(JSON.stringify(config)));
          
            const script = document.createElement('script');
            script.id = script_id;
            script.async = true;
            script.src = edgeUrl.toString();
            script.onerror = () => { show(); console.error('[Coframe] SDK failed to load'); };
            document.head.appendChild(script);
          })();
          `,
      // Nuxt 2 note: if using <script> innerHTML, uncomment the line below:
      // __dangerouslyDisableSanitizers: ['script']
    }
  ],
});

// Send page hydrated event
onMounted(() => {
  window.CFQ = window.CFQ || [];
  window.CFQ.push({ pageHydrated: true });
});
</script>

03Verify it is working

After running your app and loading a page in a browser:

  • Open the browser console and confirm there are no [Coframe] error messages.
  • In the Network tab, look for a request to edge.cofra.me/cf.js. A successful 200 response means the SDK loaded correctly.
  • Check that a coframe-sdk-js script element appears in the DOM (you can inspect the <head> in the Elements panel).

For a full walkthrough of how to validate the integration and confirm that Coframe is operating as expected, see Testing and Validation.

04Optional configuration

The default script is designed to work without additional configuration. Once the SDK is installed, you can tune behavior using the following guides:

  • SDK options — timeout, disable conditions, and other core settings
  • Identity settings — associate SDK activity with a known user identity
  • Tracking settings — control which events and page interactions Coframe records
  • Anti-flicker — understand how the anti-flicker mechanism works and how to adjust it for your performance requirements

Related reading

Testing and ValidationVerify the Coframe SDK is installed and measure its impactSDK OptionsThe complete Coframe configuration reference — antiflicker, analytics callback, feature flag control, cookie consent, cookieless, conversion events, tracking-only mode, and CSP nonceIdentity SettingsCookieless mode — provide your own visitor identity with setUserToken

Content and video lessons from Coframe documentation. Code examples are not executed on this page.

BACK TOSDK Integrations

Documentation

Open Coframe App

Search documentation

Search all guides and references↑ ↓ Navigate · Esc Close