@enquio/vue-popup

@enquio/vue-popup

See the installation prerequisites, support matrix and troubleshooting. Registry commands assume a matching published release; local verification uses tarballs and does not establish npm/CDN availability.

Vue 3 wrapper for the Enquio popup Web Component.

npm install @enquio/vue-popup

This Options API example works from Vue 3.0 onward:

<script lang="ts">
import { defineComponent } from 'vue';
import { EnquioPopup } from '@enquio/vue-popup';

export default defineComponent({ components: { EnquioPopup } });
</script>

<template>
	<EnquioPopup project-id="YOUR_PROJECT_ID" />
</template>

projectId is a required string. Changes update the custom element's project-id attribute. The named component export and default plugin (app.use(EnquioPlugin)) remain available. The plugin registers EnquioPopup globally; locally importing the component provides template type checking without manual ambient declarations.

For consent, mount the component only after the host grants permission and unmount it on revocation. Place it outside transformed/clipped ancestors. Use one installation method per document; see the compatibility contract.

Distribution

• ESM import: import EnquioPlugin, { EnquioPopup } from '@enquio/vue-popup'.
• CommonJS: const { EnquioPopup, default: EnquioPlugin } = require('@enquio/vue-popup').
• UMD: load Vue's browser global first, then dist/index.umd.js; the exports are available on window.EnquioVue.
• Public declarations are generated from the component using vue-tsc, including required props and the plugin's App parameter.

The ESM entry is now dist/index.es.mjs. Consumers should import the package name and let the manifest select the format. The UMD filename remains unchanged. Vue stays external; the shared core loader is bundled as before and coordinates initialization through window state.

Mounting invokes the shared loader. Remounts reuse initialization. Loader failures produce a centralized diagnostic without error UI; remount after a transport failure can retry. Imports are safe without browser globals. This is not a Nuxt SSR/hydration guarantee.

Supported versions and verification

Peer range: Vue ^3.0.0 (Vue 3.0.0 and newer stable Vue 3 releases, below Vue 4). Vue 3.0 was released on 18 September 2020.

Locally verified on 2026-09-25 with Node 24.21.0 and Chromium, Firefox and WebKit through Playwright 1.62.1:

The older Vue declarations are not compatible with TypeScript 5.9.3; the legacy rows deliberately use compatible TypeScript versions. All template checks use skipLibCheck: false. The matrix covers representative releases and the minimum boundary, not every patch or toolchain combination.

From the workspace root:

npm ci
npx playwright install chromium firefox webkit
npm run test:vue-package

The runner builds and packs core and Vue, installs the tarballs outside the workspace and verifies:

• All declared distribution entries and native ESM/CommonJS imports without DOM globals.
• A real Vue template accepts the component with a string projectId and rejects missing or numeric values.
• Production consumer builds and direct browser UMD exports/plugin registration.
• ESM production bundles and UMD: mount, prop updates, unmount/remount before and after readiness, delayed initialization, and transport failure/retry without duplicate initialization or unhandled errors.

Registry access is required. Temporary consumers are removed on success and retained on failure. Browser tests simulate the remote runtime and do not verify a published package or live CDN. Vue 2 and Nuxt hydration are outside GC-004. See the Nuxt example and Docker tests.

MIT Copyright Enquio Team

SSR framework example

In Nuxt SSR, place the existing component inside <ClientOnly> in a persistent layout outside changing page content. See the runnable examples and support matrix for exact scope.