Vue: Getting Started

Prerequisites

• - Node.js 20+ and npm/pnpm/yarn.
• - A project scaffold for your framework (Vite, Next.js, Angular CLI, or Vue tooling).
• - Basic familiarity with custom-element event handling.

Step 1: Install Packages

Install the required package set for this framework integration.

npm install @diwacopilot/components @diwacopilot/components-vue

Step 2: Register and Initialize

Register components once at app startup so every page can render Diwa elements correctly.

<script setup lang="ts">
import { DButton } from '@diwacopilot/components-vue';
</script>

<template>
  <DButton variant="primary">Save</DButton>
</template>

Step 3: Render Your First Component

Start with a simple action component to verify styling, registration, and framework rendering.

<script setup lang="ts">
import { DInputText } from '@diwacopilot/components-vue';
</script>

<template>
  <DInputText label="Name" placeholder="Ada Lovelace" />
</template>

Step 4: Handle Events

Wire event handling early to validate data flow and interaction behavior in your app.

<script setup lang="ts">
import { DMultiSelect } from '@diwacopilot/components-vue';

function onUpdate(event: CustomEvent<{ values: string[] }>) {
  console.log(event.detail.values);
}
</script>

<template>
  <DMultiSelect label="Regions" @update="onUpdate" />
</template>

SSR and Testing Notes

• - Vue wrappers provide component-friendly bindings while still using Diwa custom elements internally.
• - For SSR frameworks, use client-only wrappers when hydration constraints require it.
• - In Vue tests, await nextTick and custom-element readiness before checking interactive states.

Troubleshooting

• - If wrapper imports fail, verify @diwacopilot/components-vue is installed and resolved by the bundler.
• - If events are missing, check event casing and emitted detail shape on the API page.
• - If style tokens are not applied, make sure global Diwa CSS variables are loaded once.

Next Actions