{"id":11609,"library":"q2-tecton-framework-wrappers","title":"Q2 Tecton Framework Wrappers","description":"q2-tecton-framework-wrappers is a core package within the Q2 Tecton micro-frontend ecosystem, designed to facilitate the integration of Stencil-generated web components into various JavaScript frameworks like React, Vue, and Angular. It acts as a set of framework-specific helpers, abstracting away the complexities of direct web component usage. The Tecton system, upon which this package relies, emphasizes isolated execution contexts via iframes and provides a consistent UI/UX for embedded applications within the Q2 UUX banking platform. This package is currently at version 1.66.0 and is part of a frequently updated suite of libraries, with releases often tied to broader Tecton system updates. Its key differentiator is its role in enabling seamless adoption of Tecton's custom elements across diverse frontend frameworks, offering features like `v-model` support for Vue wrappers.","status":"active","version":"1.66.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install q2-tecton-framework-wrappers","lang":"bash","label":"npm"},{"cmd":"yarn add q2-tecton-framework-wrappers","lang":"bash","label":"yarn"},{"cmd":"pnpm add q2-tecton-framework-wrappers","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the core Stencil web components that these wrappers integrate.","package":"q2-tecton-elements","optional":false},{"reason":"Provides common types and utilities used across Tecton packages.","package":"q2-tecton-common","optional":false}],"imports":[{"note":"This is crucial for registering the underlying custom elements before any framework wrappers can utilize them. It comes from the `q2-tecton-elements` package loader, not the wrappers directly.","wrong":"import { defineCustomElements } from 'q2-tecton-framework-wrappers';","symbol":"defineCustomElements","correct":"import { defineCustomElements } from 'q2-tecton-elements/loader';"},{"note":"In older environments or for specific browser support, `applyPolyfills` might be necessary before `defineCustomElements` to ensure web components function correctly.","symbol":"applyPolyfills","correct":"import { applyPolyfills, defineCustomElements } from 'q2-tecton-elements/loader';"},{"note":"Framework-specific wrappers are imported from sub-paths (e.g., `/vue`, `/react`). Directly importing from `q2-tecton-elements` would be using the raw web component without framework-specific bindings.","wrong":"import { TctButton } from 'q2-tecton-elements';","symbol":"TctButton","correct":"import { TctButton } from 'q2-tecton-framework-wrappers/vue';\n// or\nimport { TctButton } from 'q2-tecton-framework-wrappers/react';"}],"quickstart":{"code":"import { defineCustomElements } from 'q2-tecton-elements/loader';\nimport { createApp } from 'vue';\nimport { TctButton } from 'q2-tecton-framework-wrappers/vue';\n\ndefineCustomElements();\n\nconst app = createApp({\n template: `\n
\n
Q2 Tecton Integration
\n
This example demonstrates integrating a Tecton button using Vue wrappers.
\n \n {{ buttonText }}\n \n
Button is currently {{ isDisabled ? 'disabled' : 'enabled' }}.
\n \n
\n `,\n components: {\n TctButton\n },\n data() {\n return {\n buttonText: 'Click Me!',\n isDisabled: false\n };\n },\n methods: {\n handleClick(event) {\n console.log('TctButton clicked!', event);\n alert('Tecton Button was clicked!');\n },\n toggleDisable() {\n this.isDisabled = !this.isDisabled;\n if (this.isDisabled) {\n this.buttonText = 'Disabled';\n } else {\n this.buttonText = 'Click Me!';\n }\n }\n },\n mounted() {\n console.log('TctButton instance:', this.$refs.myButton);\n }\n});\n\napp.mount('#app');","lang":"typescript","description":"This quickstart demonstrates how to set up a basic Vue application using `q2-tecton-framework-wrappers` to integrate a Tecton button component, including registering custom elements and handling events."},"warnings":[{"fix":"Ensure target browser compatibility does not include Internet Explorer. Update your `browserslist` configuration to exclude IE.","message":"The Tecton system dropped support for Internet Explorer with version 1.0. Applications targeting IE11 or older browsers will no longer function as expected without significant polyfills or alternative strategies.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Update all event listeners for Tecton components to use the `tct` prefix (e.g., `tctClick` instead of `click`).","message":"All events emitted by Tecton components were prefixed with `tct` starting from Tecton v1.65.0. This is a breaking change for existing event listeners.","severity":"breaking","affected_versions":">=1.65.0"},{"fix":"Ensure `defineCustomElements()` from `q2-tecton-elements/loader` is called once, early in your application's lifecycle, typically before mounting your main framework application.","message":"Custom elements must be defined globally before framework wrappers can instantiate them. Forgetting to call `defineCustomElements()` or calling it too late will result in errors.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `defineCustomElements()` is called only once in your application. Check for duplicate imports of Tecton element bundles or loaders.","cause":"Attempting to call `defineCustomElements()` multiple times, or importing the Tecton elements bundle more than once in a single execution context.","error":"Error: Uncaught (in promise): Error: A custom element with name 'tct-button' has already been defined."},{"fix":"Call `defineCustomElements()` from `q2-tecton-elements/loader` at the application's entry point. For Vue, ensure `app.config.isCustomElement = (tag) => tag.startsWith('tct-')` is configured if you're not using the wrappers and interacting with raw web components.","cause":"The underlying custom element `tct-button` was not registered before the Vue wrapper attempted to use it, or Vue is not configured to recognize custom elements.","error":"[Vue warn]: Unknown custom element: - did you register the component correctly?"}],"ecosystem":"npm"}