With Vue

@tuvix.js/vue provides Vue 3 bindings for Tuvix.js.

Installation

npm install @tuvix.js/vue vue

createMicroApp

// src/main.ts
import { createMicroApp } from '@tuvix.js/vue';
import App from './App.vue';

export const app = createMicroApp(App);

createMicroApp creates a Vue app instance, passes shell props as component props, and destroys the instance on unmount.

Props

<!-- App.vue -->
<script setup lang="ts">
defineProps<{
  userId: string;
  theme: 'light' | 'dark';
}>();
</script>

<template>
  <div :class="`theme-${theme}`">User: {{ userId }}</div>
</template>

useMicroApp Composable

<script setup lang="ts">
import { useMicroApp } from '@tuvix.js/vue';

const { props, name } = useMicroApp();
</script>

useTuvixEvent Composable

Subscribe to event bus events with automatic cleanup on component unmount:

<script setup lang="ts">
import { ref } from 'vue';
import { useTuvixEvent } from '@tuvix.js/vue';

const count = ref(0);

useTuvixEvent('cart:updated', ({ itemCount }) => {
  count.value = itemCount;
});
</script>

<template>
  <span class="badge">{{ count }}</span>
</template>

Full Example

<!-- src/App.vue -->
<script setup lang="ts">
import { ref } from 'vue';
import { useTuvixEvent } from '@tuvix.js/vue';

const props = defineProps<{ apiUrl: string }>();
const theme = ref<'light' | 'dark'>('dark');

useTuvixEvent('theme:changed', ({ theme: t }) => {
  theme.value = t;
});
</script>

<template>
  <div :class="`app theme-${theme}`">
    <h1>My Micro App</h1>
    <p>API: {{ props.apiUrl }}</p>
  </div>
</template>

// src/main.ts
import { createMicroApp } from '@tuvix.js/vue';
import App from './App.vue';
export const app = createMicroApp(App);