---
title: "Vue einrichten"
slug: "setup-vue"
category: "Einführung"
hosts: "vue"
order: 3
---

# Vue einrichten

Arc Rider Widgets bieten einen Vue 3 Support als direktes npm-Paket. Die deklarative Widget-Konfiguration (`data`-Objekt) wird als Prop an die Komponente übergeben, während Events sauber als Emits zurückkommen.

## Paket

```bash
npm install @arcrider/arcwidgets-vue
```

Das öffentliche Vue-Paket exportiert dieselben Widgets und folgt der standardisierten Arc Rider API. 

## Erstes Widget

```vue
<script setup>
import { ArcWidgetTable } from '@arcrider/arcwidgets-vue';
import '@arcrider/arcwidgets-vue/styles.css';

const tableData = {
  uniqueListId: 'orders',
  rows: [
    { id: 'order-42', columns: [{ value: 'Order 42' }] },
    { id: 'order-43', columns: [{ value: 'Order 43' }] },
  ],
};

function onAction(action) {
  // handle updates, persist data, navigate
}
</script>

<template>
  <ArcWidgetTable id="orders" :data="tableData" @action="onAction" />
</template>
```

Stabile IDs (`id` auf der Komponente und `uniqueListId` / Zeilen-`id` im Objekt) sind Pflicht — sonst triggert die Engine einen vollen Re-Render.

## Weiter

- [Custom Table](/docs/vue/widgets/custom-table) — Parameter-Referenz und Beispiele
- [Custom Layout](/docs/vue/widgets/custom-layout)
- [Button](/docs/vue/mini-widgets/buttons)