Arc Rider Docs · Markdown

Introduction

Vue einrichten

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

npm install @arcrider/arcwidgets-vue

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

Erstes Widget

<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 } &lt;/script&gt;


&lt;template&gt;   &lt;ArcWidgetTable id=&quot;orders&quot; :data=&quot;tableData&quot; @action=&quot;onAction&quot; /&gt; &lt;/template&gt;</code></pre>


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


Weiter


  • <a href="/docs/vue/widgets/custom-table">Custom Table</a> — Parameter-Referenz und Beispiele
  • <a href="/docs/vue/widgets/custom-layout">Custom Layout</a>
  • <a href="/docs/vue/mini-widgets/buttons">Button</a>