+
+
+
+
+
diff --git a/renderers/vue2/src/lib/catalog/index.ts b/renderers/vue2/src/lib/catalog/index.ts
new file mode 100644
index 00000000..8950a48d
--- /dev/null
+++ b/renderers/vue2/src/lib/catalog/index.ts
@@ -0,0 +1,18 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export { DEFAULT_CATALOG } from './default';
+export { default as Surface } from './surface.vue';
diff --git a/renderers/vue2/src/lib/catalog/list.vue b/renderers/vue2/src/lib/catalog/list.vue
new file mode 100644
index 00000000..96b8bd1f
--- /dev/null
+++ b/renderers/vue2/src/lib/catalog/list.vue
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
+
+
diff --git a/renderers/vue2/src/lib/config.ts b/renderers/vue2/src/lib/config.ts
new file mode 100644
index 00000000..5e0687dd
--- /dev/null
+++ b/renderers/vue2/src/lib/config.ts
@@ -0,0 +1,155 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import type { VueConstructor } from 'vue';
+import type { Catalog } from './rendering/catalog';
+import type { Theme } from './rendering/theming';
+import { CATALOG_KEY } from './rendering/catalog';
+import { THEME_KEY } from './rendering/theming';
+import { PROCESSOR_KEY, MessageProcessor } from './data/processor';
+
+/**
+ * Configuration options for the A2UI Vue plugin.
+ */
+export interface A2UIPluginOptions {
+ /**
+ * The component catalog mapping A2UI types to Vue components.
+ * Use DEFAULT_CATALOG for standard components or provide a custom catalog.
+ */
+ catalog: Catalog;
+
+ /**
+ * Theme configuration for styling components.
+ */
+ theme: Theme;
+
+ /**
+ * Optional MessageProcessor instance.
+ * If not provided, a new instance will be created.
+ */
+ processor?: MessageProcessor;
+}
+
+/**
+ * Vue 2 plugin for providing A2UI configuration globally.
+ *
+ * Usage:
+ * ```ts
+ * import Vue from 'vue';
+ * import { A2UIPlugin, DEFAULT_CATALOG } from '@a2ui/vue2';
+ * import { myTheme } from './theme';
+ *
+ * Vue.use(A2UIPlugin, {
+ * catalog: DEFAULT_CATALOG,
+ * theme: myTheme,
+ * });
+ * ```
+ *
+ * After installation, all A2UI components will have access to:
+ * - The catalog via inject
+ * - The theme via inject
+ * - The processor via inject
+ */
+export const A2UIPlugin = {
+ install(Vue: VueConstructor, options: A2UIPluginOptions): void {
+ if (!options) {
+ throw new Error('A2UIPlugin requires options with catalog and theme');
+ }
+
+ if (!options.catalog) {
+ throw new Error('A2UIPlugin requires a catalog');
+ }
+
+ if (!options.theme) {
+ throw new Error('A2UIPlugin requires a theme');
+ }
+
+ const processor = options.processor ?? new MessageProcessor();
+
+ // Provide values globally using Vue.mixin with provide
+ Vue.mixin({
+ provide(this: { $parent?: unknown }) {
+ // Only provide from root component
+ if (this.$parent) {
+ return {};
+ }
+ return {
+ [CATALOG_KEY]: options.catalog,
+ [THEME_KEY]: options.theme,
+ [PROCESSOR_KEY]: processor,
+ };
+ },
+ });
+
+ // Also add to prototype for easy access
+ Vue.prototype[CATALOG_KEY] = options.catalog;
+ Vue.prototype[THEME_KEY] = options.theme;
+ Vue.prototype[PROCESSOR_KEY] = processor;
+ },
+};
+
+/**
+ * Creates A2UI providers for use with Vue's provide/inject.
+ * Use this when you need to provide A2UI at a specific component level
+ * rather than globally via the plugin.
+ *
+ * Usage:
+ * ```ts
+ * export default {
+ * provide() {
+ * return createA2UIProviders({
+ * catalog: DEFAULT_CATALOG,
+ * theme: myTheme,
+ * });
+ * },
+ * };
+ * ```
+ *
+ * @param options - A2UI configuration options
+ * @returns Provider object for use with Vue's provide
+ */
+export function createA2UIProviders(options: A2UIPluginOptions): Record {
+ const processor = options.processor ?? new MessageProcessor();
+
+ return {
+ [CATALOG_KEY]: options.catalog,
+ [THEME_KEY]: options.theme,
+ [PROCESSOR_KEY]: processor,
+ };
+}
+
+/**
+ * Returns the processor from the providers.
+ * Useful when you need access to the processor instance after creating providers.
+ *
+ * @param options - A2UI configuration options
+ * @returns Object containing providers and the processor instance
+ */
+export function createA2UIProvidersWithProcessor(options: A2UIPluginOptions): {
+ providers: Record;
+ processor: MessageProcessor;
+} {
+ const processor = options.processor ?? new MessageProcessor();
+
+ return {
+ providers: {
+ [CATALOG_KEY]: options.catalog,
+ [THEME_KEY]: options.theme,
+ [PROCESSOR_KEY]: processor,
+ },
+ processor,
+ };
+}
diff --git a/renderers/vue2/src/lib/data/index.ts b/renderers/vue2/src/lib/data/index.ts
new file mode 100644
index 00000000..4152e354
--- /dev/null
+++ b/renderers/vue2/src/lib/data/index.ts
@@ -0,0 +1,19 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export { PROCESSOR_KEY, MessageProcessor, type DispatchedEvent } from './processor';
+export { MarkdownRenderer, markdownRenderer } from './markdown';
+export type { A2TextPayload, A2DataPayload, A2AServerPayload } from './types';
diff --git a/renderers/vue2/src/lib/data/markdown.ts b/renderers/vue2/src/lib/data/markdown.ts
new file mode 100644
index 00000000..34275624
--- /dev/null
+++ b/renderers/vue2/src/lib/data/markdown.ts
@@ -0,0 +1,180 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import MarkdownIt from 'markdown-it';
+
+/**
+ * MarkdownRenderer handles rendering markdown text with customizable
+ * tag class mappings for consistent styling.
+ *
+ * Features:
+ * - Standard markdown rendering via markdown-it
+ * - Custom class injection for HTML elements
+ * - HTML code block rendering in sandboxed iframes
+ * - Basic sanitization for security
+ */
+export class MarkdownRenderer {
+ private originalClassMap = new Map();
+ private markdownIt: MarkdownIt;
+
+ constructor() {
+ this.markdownIt = new MarkdownIt({
+ html: false,
+ linkify: true,
+ typographer: true,
+ highlight: (str: string, lang: string) => {
+ if (lang === 'html') {
+ // Render HTML in a sandboxed iframe for safety
+ return ``;
+ }
+ return `
${this.escapeHtml(str)}
`;
+ },
+ });
+ }
+
+ /**
+ * Renders markdown to HTML with optional tag class mapping.
+ *
+ * @param value - The markdown string to render
+ * @param tagClassMap - Optional mapping of HTML tags to CSS classes
+ * @returns Sanitized HTML string
+ */
+ render(value: string, tagClassMap?: Record): string {
+ if (tagClassMap) {
+ this.applyTagClassMap(tagClassMap);
+ }
+ const htmlString = this.markdownIt.render(value);
+ this.unapplyTagClassMap();
+ return this.sanitize(htmlString);
+ }
+
+ /**
+ * Escapes HTML special characters.
+ */
+ private escapeHtml(str: string): string {
+ return str
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+ }
+
+ /**
+ * Basic HTML sanitization.
+ * Removes script tags and event handlers.
+ */
+ private sanitize(html: string): string {
+ if (typeof document === 'undefined') {
+ // Server-side: basic regex-based sanitization
+ return html
+ .replace(/)<[^<]*)*<\/script>/gi, '')
+ .replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, '');
+ }
+
+ // Client-side: use DOM for safer sanitization
+ const div = document.createElement('div');
+ div.innerHTML = html;
+
+ // Remove script tags
+ const scripts = div.querySelectorAll('script');
+ scripts.forEach((s) => s.remove());
+
+ // Remove event handlers
+ div.querySelectorAll('*').forEach((el) => {
+ const attrs = Array.from(el.attributes);
+ attrs.forEach((attr) => {
+ if (attr.name.startsWith('on')) {
+ el.removeAttribute(attr.name);
+ }
+ });
+ });
+
+ return div.innerHTML;
+ }
+
+ /**
+ * Applies custom CSS classes to rendered HTML elements.
+ */
+ private applyTagClassMap(tagClassMap: Record): void {
+ Object.entries(tagClassMap).forEach(([tag, classes]) => {
+ let tokenName: string | undefined;
+ switch (tag) {
+ case 'p':
+ tokenName = 'paragraph';
+ break;
+ case 'h1':
+ case 'h2':
+ case 'h3':
+ case 'h4':
+ case 'h5':
+ case 'h6':
+ tokenName = 'heading';
+ break;
+ case 'ul':
+ tokenName = 'bullet_list';
+ break;
+ case 'ol':
+ tokenName = 'ordered_list';
+ break;
+ case 'li':
+ tokenName = 'list_item';
+ break;
+ case 'a':
+ tokenName = 'link';
+ break;
+ case 'strong':
+ tokenName = 'strong';
+ break;
+ case 'em':
+ tokenName = 'em';
+ break;
+ }
+
+ if (!tokenName) return;
+
+ const key = `${tokenName}_open`;
+ const original = this.markdownIt.renderer.rules[key];
+ this.originalClassMap.set(key, original);
+
+ this.markdownIt.renderer.rules[key] = (tokens, idx, options, env, self) => {
+ const token = tokens[idx];
+ for (const clazz of classes) {
+ token.attrJoin('class', clazz);
+ }
+ return original
+ ? original.call(this, tokens, idx, options, env, self)
+ : self.renderToken(tokens, idx, options);
+ };
+ });
+ }
+
+ /**
+ * Restores original markdown-it rendering rules.
+ */
+ private unapplyTagClassMap(): void {
+ for (const [key, original] of this.originalClassMap) {
+ this.markdownIt.renderer.rules[key] = original;
+ }
+ this.originalClassMap.clear();
+ }
+}
+
+/**
+ * Singleton markdown renderer instance.
+ * Use this for consistent rendering across the application.
+ */
+export const markdownRenderer = new MarkdownRenderer();
diff --git a/renderers/vue2/src/lib/data/processor.ts b/renderers/vue2/src/lib/data/processor.ts
new file mode 100644
index 00000000..20630ce8
--- /dev/null
+++ b/renderers/vue2/src/lib/data/processor.ts
@@ -0,0 +1,139 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { Data, Types } from '@a2ui/lit/0.8';
+
+/**
+ * Injection key for the message processor.
+ * Used with Vue's provide/inject pattern.
+ */
+export const PROCESSOR_KEY = '$a2uiProcessor';
+
+/**
+ * Represents a dispatched event waiting for the host application to handle.
+ */
+export interface DispatchedEvent {
+ message: Types.A2UIClientEventMessage;
+ resolve: (value: Types.ServerToClientMessage[]) => void;
+ reject: (error: Error) => void;
+}
+
+/**
+ * MessageProcessor extends the base A2uiMessageProcessor from @a2ui/lit
+ * and adds Vue-specific event dispatching.
+ *
+ * The processor manages:
+ * - Surface state and component trees
+ * - Data model updates
+ * - User action dispatching
+ *
+ * Host applications should:
+ * 1. Call processMessages() with incoming server messages
+ * 2. Watch pendingEvents and handle user actions
+ * 3. Call resolveEvent() when actions are processed
+ */
+export class MessageProcessor extends Data.A2uiMessageProcessor {
+ private _pendingEvents: DispatchedEvent[] = [];
+ private _eventListeners: Array<(event: DispatchedEvent) => void> = [];
+
+ /**
+ * Returns the list of pending events waiting to be handled.
+ */
+ get pendingEvents(): readonly DispatchedEvent[] {
+ return this._pendingEvents;
+ }
+
+ /**
+ * Override setData to convert null to undefined for proper fallback handling.
+ */
+ override setData(
+ node: Types.AnyComponentNode,
+ relativePath: string,
+ value: Types.DataValue,
+ surfaceId?: Types.SurfaceID | null
+ ): void {
+ return super.setData(node, relativePath, value, surfaceId ?? undefined);
+ }
+
+ /**
+ * Dispatches a client event message and returns a promise that resolves
+ * when the host application handles the event.
+ *
+ * @param message - The client event message to dispatch
+ * @returns Promise resolving to server response messages
+ */
+ dispatch(message: Types.A2UIClientEventMessage): Promise {
+ return new Promise((resolve, reject) => {
+ const event: DispatchedEvent = { message, resolve, reject };
+ this._pendingEvents.push(event);
+ this._notifyListeners(event);
+ });
+ }
+
+ /**
+ * Called by the host application to resolve a pending event.
+ *
+ * @param event - The event to resolve
+ * @param response - The server response messages
+ */
+ resolveEvent(event: DispatchedEvent, response: Types.ServerToClientMessage[]): void {
+ const index = this._pendingEvents.indexOf(event);
+ if (index > -1) {
+ this._pendingEvents.splice(index, 1);
+ event.resolve(response);
+ }
+ }
+
+ /**
+ * Called by the host application to reject a pending event.
+ *
+ * @param event - The event to reject
+ * @param error - The error that occurred
+ */
+ rejectEvent(event: DispatchedEvent, error: Error): void {
+ const index = this._pendingEvents.indexOf(event);
+ if (index > -1) {
+ this._pendingEvents.splice(index, 1);
+ event.reject(error);
+ }
+ }
+
+ /**
+ * Registers a listener to be notified when new events are dispatched.
+ *
+ * @param listener - The listener function
+ * @returns Unsubscribe function
+ */
+ onEvent(listener: (event: DispatchedEvent) => void): () => void {
+ this._eventListeners.push(listener);
+ return () => {
+ const index = this._eventListeners.indexOf(listener);
+ if (index > -1) {
+ this._eventListeners.splice(index, 1);
+ }
+ };
+ }
+
+ private _notifyListeners(event: DispatchedEvent): void {
+ for (const listener of this._eventListeners) {
+ try {
+ listener(event);
+ } catch (e) {
+ console.error('Error in event listener:', e);
+ }
+ }
+ }
+}
diff --git a/renderers/vue2/src/lib/data/types.ts b/renderers/vue2/src/lib/data/types.ts
new file mode 100644
index 00000000..2f1fe324
--- /dev/null
+++ b/renderers/vue2/src/lib/data/types.ts
@@ -0,0 +1,38 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import type { Types } from '@a2ui/lit/0.8';
+
+/**
+ * Payload containing text content from an A2A message.
+ */
+export interface A2TextPayload {
+ kind: 'text';
+ text: string;
+}
+
+/**
+ * Payload containing A2UI data from an A2A message.
+ */
+export interface A2DataPayload {
+ kind: 'data';
+ data: Types.ServerToClientMessage;
+}
+
+/**
+ * Combined server payload type from A2A protocol.
+ */
+export type A2AServerPayload = Array | { error: string };
diff --git a/renderers/vue2/src/lib/rendering/catalog.ts b/renderers/vue2/src/lib/rendering/catalog.ts
new file mode 100644
index 00000000..413c8709
--- /dev/null
+++ b/renderers/vue2/src/lib/rendering/catalog.ts
@@ -0,0 +1,56 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import type { Types } from '@a2ui/lit/0.8';
+import type { Component, AsyncComponent } from 'vue';
+
+/**
+ * Injection key for catalog configuration.
+ * Used with Vue's provide/inject pattern.
+ */
+export const CATALOG_KEY = '$a2uiCatalog';
+
+/**
+ * A catalog loader can return a Vue component synchronously or asynchronously.
+ * Supports both regular components and async components for code splitting.
+ */
+export type CatalogLoader = () =>
+ | Promise
+ | Component
+ | AsyncComponent;
+
+/**
+ * A catalog entry can be:
+ * 1. A simple loader function that returns a component
+ * 2. An object with a type loader and a props mapping function
+ *
+ * The props function is used to extract additional props from the component node
+ * that should be passed to the Vue component.
+ */
+export type CatalogEntry =
+ | CatalogLoader
+ | {
+ type: CatalogLoader;
+ props: (node: T) => Record;
+ };
+
+/**
+ * The catalog maps component type names to their implementations.
+ * Keys are the A2UI component type names (e.g., "Text", "Button", "Row").
+ */
+export interface Catalog {
+ [key: string]: CatalogEntry;
+}
diff --git a/renderers/vue2/src/lib/rendering/index.ts b/renderers/vue2/src/lib/rendering/index.ts
new file mode 100644
index 00000000..ad9669ae
--- /dev/null
+++ b/renderers/vue2/src/lib/rendering/index.ts
@@ -0,0 +1,20 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export { THEME_KEY, type Theme } from './theming';
+export { CATALOG_KEY, type Catalog, type CatalogEntry, type CatalogLoader } from './catalog';
+export { default as DynamicComponentMixin } from './mixins/dynamic-component';
+export { default as A2UIRenderer } from './renderer.vue';
diff --git a/renderers/vue2/src/lib/rendering/mixins/dynamic-component.ts b/renderers/vue2/src/lib/rendering/mixins/dynamic-component.ts
new file mode 100644
index 00000000..a8f531a6
--- /dev/null
+++ b/renderers/vue2/src/lib/rendering/mixins/dynamic-component.ts
@@ -0,0 +1,218 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import Vue, { VueConstructor } from 'vue';
+import type { Types, Primitives } from '@a2ui/lit/0.8';
+import type { Theme } from '../theming';
+import type { MessageProcessor } from '../../data/processor';
+import { THEME_KEY } from '../theming';
+import { PROCESSOR_KEY } from '../../data/processor';
+
+let idCounter = 0;
+
+/**
+ * Interface describing the properties provided by the DynamicComponentMixin.
+ * Components using the mixin should extend this interface for proper typing.
+ */
+export interface DynamicComponentInstance extends Vue {
+ // Injected properties
+ processor: MessageProcessor;
+ theme: Theme;
+ // Props
+ surfaceId: Types.SurfaceID | null;
+ component: Types.AnyComponentNode;
+ weight: string | number;
+ // Computed
+ weightStyle: Record;
+ // Methods
+ resolvePrimitive(value: Primitives.StringValue | Primitives.BooleanValue | Primitives.NumberValue | null): string | number | boolean | null;
+ sendAction(action: Types.Action): Promise;
+ getUniqueId(prefix: string): string;
+ setData(path: string, value: Types.DataValue): void;
+}
+
+/**
+ * Typed Vue constructor for components using DynamicComponentMixin.
+ * Use this instead of Vue.extend() to get proper typing for mixin methods.
+ *
+ * Usage:
+ * ```typescript
+ * import { DynamicComponentVue } from '../rendering/mixins/dynamic-component';
+ *
+ * export default DynamicComponentVue.extend({
+ * // ... component definition
+ * // this.resolvePrimitive, this.sendAction, etc. are properly typed
+ * });
+ * ```
+ */
+export const DynamicComponentVue = Vue as VueConstructor;
+
+/**
+ * Vue mixin that provides common functionality for all A2UI dynamic components.
+ * This is the Vue 2 equivalent of Angular's DynamicComponent abstract class.
+ *
+ * Components using this mixin receive:
+ * - Access to the processor and theme via injection
+ * - Common props: surfaceId, component, weight
+ * - Helper methods: resolvePrimitive, sendAction, getUniqueId
+ * - Computed weightStyle for CSS variable
+ *
+ * Usage:
+ * ```typescript
+ * import Vue from 'vue';
+ * import DynamicComponentMixin from '../rendering/mixins/dynamic-component';
+ *
+ * export default (Vue as VueConstructor).extend({
+ * mixins: [DynamicComponentMixin],
+ * // ...
+ * });
+ * ```
+ */
+const DynamicComponentMixin = DynamicComponentVue.extend({
+ inject: {
+ processor: { from: PROCESSOR_KEY },
+ theme: { from: THEME_KEY },
+ },
+
+ props: {
+ surfaceId: {
+ type: String,
+ required: true,
+ default: null,
+ },
+ component: {
+ type: Object,
+ required: true,
+ },
+ weight: {
+ type: [String, Number],
+ required: true,
+ },
+ },
+
+ computed: {
+ /**
+ * CSS style object with the --weight CSS variable.
+ * Used for flex-based layout weighting.
+ */
+ weightStyle(): Record {
+ return { '--weight': this.weight };
+ },
+ },
+
+ methods: {
+ /**
+ * Resolves a primitive value (string, number, boolean) from either
+ * a literal value or a data binding path.
+ *
+ * @param value - The value object containing either a literal or a path
+ * @returns The resolved value or null if not found
+ */
+ resolvePrimitive(
+ value: Primitives.StringValue | Primitives.BooleanValue | Primitives.NumberValue | null
+ ): string | number | boolean | null {
+ if (!value || typeof value !== 'object') {
+ return null;
+ } else if ((value as any).literal != null) {
+ return (value as any).literal;
+ } else if (value.path) {
+ return this.processor.getData(
+ this.component,
+ value.path,
+ this.surfaceId ?? undefined
+ ) as string | number | boolean | null;
+ } else if ('literalString' in value) {
+ return value.literalString ?? null;
+ } else if ('literalNumber' in value) {
+ return value.literalNumber ?? null;
+ } else if ('literalBoolean' in value) {
+ return value.literalBoolean ?? null;
+ }
+
+ return null;
+ },
+
+ /**
+ * Sends a user action to the processor, resolving any context data bindings.
+ *
+ * @param action - The action to send
+ * @returns Promise resolving to server response messages
+ */
+ async sendAction(
+ action: Types.Action
+ ): Promise {
+ const component = this.component as Types.AnyComponentNode;
+ const surfaceId = this.surfaceId ?? undefined;
+ const context: Record = {};
+ const processor = this.processor;
+
+ if (action.context) {
+ for (const item of action.context) {
+ if (item.value.literalBoolean !== undefined) {
+ context[item.key] = item.value.literalBoolean;
+ } else if (item.value.literalNumber !== undefined) {
+ context[item.key] = item.value.literalNumber;
+ } else if (item.value.literalString !== undefined) {
+ context[item.key] = item.value.literalString;
+ } else if (item.value.path) {
+ const path = processor.resolvePath(item.value.path, component.dataContextPath);
+ const value = processor.getData(component, path, surfaceId);
+ context[item.key] = value;
+ }
+ }
+ }
+
+ const message: Types.A2UIClientEventMessage = {
+ userAction: {
+ name: action.name,
+ sourceComponentId: component.id,
+ surfaceId: surfaceId!,
+ timestamp: new Date().toISOString(),
+ context,
+ },
+ };
+
+ return processor.dispatch(message);
+ },
+
+ /**
+ * Generates a unique ID for form elements.
+ * Useful for associating labels with inputs.
+ *
+ * @param prefix - Prefix for the generated ID
+ * @returns Unique ID string
+ */
+ getUniqueId(prefix: string): string {
+ return `${prefix}-${idCounter++}`;
+ },
+
+ /**
+ * Sets data in the data model via the processor.
+ * Used by input components for two-way binding.
+ *
+ * @param path - The data path to update
+ * @param value - The new value
+ */
+ setData(
+ path: string,
+ value: Types.DataValue
+ ): void {
+ this.processor.setData(this.component as Types.AnyComponentNode, path, value, this.surfaceId ?? undefined);
+ },
+ },
+});
+
+export default DynamicComponentMixin;
diff --git a/renderers/vue2/src/lib/rendering/renderer.vue b/renderers/vue2/src/lib/rendering/renderer.vue
new file mode 100644
index 00000000..1f360cb9
--- /dev/null
+++ b/renderers/vue2/src/lib/rendering/renderer.vue
@@ -0,0 +1,135 @@
+
+
+
+
+
+
+
diff --git a/renderers/vue2/src/lib/rendering/theming.ts b/renderers/vue2/src/lib/rendering/theming.ts
new file mode 100644
index 00000000..46ccfaba
--- /dev/null
+++ b/renderers/vue2/src/lib/rendering/theming.ts
@@ -0,0 +1,28 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import type { Types } from '@a2ui/lit/0.8';
+
+/**
+ * Injection key for theme configuration.
+ * Used with Vue's provide/inject pattern.
+ */
+export const THEME_KEY = '$a2uiTheme';
+
+/**
+ * Re-export Theme type from @a2ui/lit for convenience.
+ */
+export type Theme = Types.Theme;
diff --git a/renderers/vue2/src/shims-vue.d.ts b/renderers/vue2/src/shims-vue.d.ts
new file mode 100644
index 00000000..8f6f4102
--- /dev/null
+++ b/renderers/vue2/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+ import Vue from 'vue';
+ export default Vue;
+}
diff --git a/renderers/vue2/tsconfig.json b/renderers/vue2/tsconfig.json
new file mode 100644
index 00000000..76dec249
--- /dev/null
+++ b/renderers/vue2/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "strict": true,
+ "jsx": "preserve",
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+ "declaration": true,
+ "declarationDir": "./dist",
+ "outDir": "./dist",
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"]
+ },
+ "types": ["vite/client"]
+ },
+ "include": ["src/**/*.ts", "src/**/*.vue"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/renderers/vue2/vite.config.ts b/renderers/vue2/vite.config.ts
new file mode 100644
index 00000000..ee6a1d5f
--- /dev/null
+++ b/renderers/vue2/vite.config.ts
@@ -0,0 +1,39 @@
+import { defineConfig } from 'vite';
+import vue2 from '@vitejs/plugin-vue2';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+ plugins: [
+ vue2(),
+ dts({
+ include: ['src/**/*.ts'],
+ exclude: ['src/**/*.vue'],
+ outDir: 'dist',
+ rollupTypes: true,
+ strictOutput: false,
+ }),
+ ],
+ build: {
+ lib: {
+ entry: resolve(__dirname, 'src/index.ts'),
+ name: 'A2UIVue2',
+ formats: ['es', 'cjs'],
+ fileName: (format) => `index.${format === 'es' ? 'js' : 'cjs'}`,
+ },
+ rollupOptions: {
+ external: ['vue', '@a2ui/lit', '@a2ui/lit/0.8'],
+ output: {
+ globals: {
+ vue: 'Vue',
+ },
+ },
+ },
+ sourcemap: true,
+ },
+ resolve: {
+ alias: {
+ '@': resolve(__dirname, 'src'),
+ },
+ },
+});