Vue

The Vue entry mounts the same framework-free grid/widget renderer the core ships (mountDashboard()), wrapped as a single-file component. It renders every widget type, chip/image/color table cells, row-click drill-down, and click-to-filter on chart series — the data and interaction layer is identical to React's.

The Vue entry doesn't yet have React's toolbar, widget wizard, or settings panel — those are React-only UI chrome today. Build your own controls against the exposed DashboardStore methods (addWidget, setFilterValue, addCalculatedField, …) if you need them.

Install

bash

npm install @datastripes/dashboard vue

Basic usage

vue

<script setup lang="ts">
import { ref } from 'vue';
import { DatastripesDashboard } from '@datastripes/dashboard/vue';
import type { DashboardConfig } from '@datastripes/dashboard';

const config = ref<DashboardConfig>();
</script>

<template>
  <DatastripesDashboard
    :data="myRows"
    :config="config"
    mode="edit"
    api-key="..."
    @change="c => (config = c)"
    @save="saved => persistToBackend(saved)"
  />
</template>

Props & events

Name	Kind	Notes
data	prop	Row array, same shape as React
config	prop	Optional DashboardConfig
mode	prop	'view' \| 'edit', default 'view'
api-key	prop	Checked on mount via checkLicense()
change	event	Emitted with the updated DashboardConfig on every mutation
save	event	Emitted via the component's exposed `save()` method

Reaching the underlying store

Everything the React wizard does — addWidget, setFilterValue, toggleFilterValue, addCalculatedField, setColumnLabel — is a plain method on DashboardStore. The Vue component builds one internally; if you need direct access (e.g. to drive your own toolbar), construct the store yourself and pass it to mountDashboard() instead of using the SFC:

import { DashboardStore, JsQueryEngine, mountDashboard, checkLicense } from '@datastripes/dashboard';

const store = new DashboardStore({ config, data: rows, engine: new JsQueryEngine() });
checkLicense({ apiKey }).then(license => store.setLicense(license));

const renderer = mountDashboard(containerEl, { store, data: rows, mode: 'edit' });

// later, from your own UI:
store.addWidget(newWidget);
store.setFilterValue('filter_region', ['EMEA']);