API Reference · Vue 3

Public exports of @meterry/component-vue. The component APIs match the React versions; the differences are only Vue idioms: className → class, classNames → :class-names, and function slots are passed via the :slots prop.

provideMeterClient

Call it in an ancestor component’s setup (same-component injection cannot see its provide); all descendant Meter components reuse the same SubjectClient:

provideMeterClient({
  tokenEndpoint: '/api/meter/subject-token',
  options: { credentials: 'include' },
})

Parameter	Description
client	Reuse an existing SubjectClient
getJwt	Token callback used to create the shared client (precedence: client, then getJwt, then tokenEndpoint)
tokenEndpoint	Application-owned token GET route
options	MeterClientOptions

useMeterClient(): SubjectClient | undefined — returns the shared client inside a setup.

Automatic usage components

Configure tokenEndpoint on the shared provider to authenticate the automatic usage components. See Getting Started.

• MeterUsageTable: client / source / query / rangeDays / optional columns / pageSize / pageSizeOptions / batchSize / maxCachedRows / refreshable, plus table presentation, slots, messages and styles. No data, load or controller required. Guide and full props.
• MeterUsageChart: client / type / mode / query / rangeDays / measure / limit / cacheTimeMs / allowPartial / refreshable / formatValue, plus chart presentation, slots, messages, seriesRegistry and styles. No data, x or series required. Guide and full props.

Queries use snake_case API names (start_time, group_by), not MeterUsage’s UsageWidgetQuery camelCase. Default charts hide potentially truncated results; aggregate tables warn at the limit. Events automatically continue using cursors and use custom raw_event_id columns with the current Meter API. The original components below remain supported.

Both automatic Vue component refs expose refresh(). Kebab-case bindings include :batch-size, :cache-time-ms, :allow-partial, :format-value and :range-days.

Components

<template>
  <!-- queries the meter service itself -->
  <MeterUsage :client="client" title="Usage" :range-days="7" />
  <!-- rows fetched through the client, via load or as local data -->
  <MeterTable title="Usage events" :columns="columns" :load="loadRows" :page-size="8" />
  <MeterChart type="line" :data="rows" x="bucket" :series="series" />
</template>

See Getting Started for automatic query/render composition; the template above illustrates the advanced data-owned components.

• MeterUsage: client / getJwt / tokenScope / tokenStorageKey / baseUrl / query / rangeDays / title / measure / loading / empty / error / slots / messages / seriesRegistry + style props
• MeterChart: type / data / x / series / title / height / showLegend / showGrid / theme / caption / slots / messages / seriesRegistry + style props
• MeterTable: columns / data / load / controller / pageSize / pageSizeOptions / title / caption / empty / loading / error / slots / messages + style props

Style props: class (root node), :class-names (per-slot), :unstyled.

Previously loaded rows remain visible during a reload. If loading fails, the table shows an error alongside those rows. Use controller.refresh() to offer a Retry action. See loading, failures, and retry.

MeterFilterBar

See Shared Filters for a complete dashboard example.

Prop / event	Description
definitions	MeterFilterDefinition[]; defaults to the controller’s definitions or []
controller	MeterFilterController; takes precedence over values
values	MeterFilterValues; page-owned values without a controller
@change	Receives the next full record in controlled/standalone modes; controller mode uses subscriptions instead
debounce-ms	Text/number delay in milliseconds, default 300; set 0 to apply changes immediately; select changes apply immediately
messages	Partial<MeterMessages> including filter labels, placeholders, and filterBarLabel

Style props: class / :class-names / :unstyled. Relevant slots: filterBar, filter, and button. Controlled binding is :values + @change, not v-model:values. With neither controller nor values, the bar maintains internal state. Definition defaults require a controller or explicitly initialized page values.

Text and number filters apply after you pause typing; selects apply immediately without submitting unfinished input in other fields. Clear removes all shared filters. See applying and clearing filters.

useMeterFilterValues

useMeterFilterValues(controller: MeterFilterController): Ref<MeterFilterValues> — reads the current values and subscribes inside an active effect scope. Call it in setup / <script setup>; scope disposal unsubscribes automatically. Outside a scope it only returns the initial values, without a live subscription. Keep the controller stable; use .value in script and the unwrapped ref in templates. Write through controller methods rather than mutating the returned ref.

Import createMeterFilterController, mergeMeterFilters, and normalizeMeterFilters from @meterry/component, not the Vue package.

The slots prop

In the Vue version, slots are function props (returning a VNode):

<template>
  <MeterUsage
    :client="client"
    :slots="{
      header: ({ caption, title }) => h('h2', title),
      value: ({ total, formattedTotal, measure }) =>
        h('strong', `${formattedTotal} ${measure}`),
      chart: ({ model, option }) => h(MyChart, { option }),
    }"
  />
</template>

registerEChartsSeries

Same as the React package — the third argument supports modules to load extra echarts modules:

import { ScatterChart } from 'echarts/charts'
import { registerEChartsSeries } from '@meterry/component-vue'

registerEChartsSeries('scatter', builder, { modules: [ScatterChart] })

Chart rendering

Charts are rendered by vue-echarts with autoresize built in; control the container size via :class-names="{ chart: '...' }".

Type re-exports

Same as the React package: MeterClassNames, MeterMessages, ChartOptions, TableColumn, TableOptions, TableSort, EChartsModuleInstaller, MeterFilterController, MeterFilterDefinition, MeterFilterValues, and the slot context types. MeterFilterType is exported by the core package.

MeterList / MeterUsageList

See the Load-more List guide. MeterList accepts data, load, controller, required columns: TableColumn<T>[], pageSize, rowKey, title, caption, empty, loading, error, refreshable, slots, messages and style props. Its footer appends with Load more, disables pending work, retries failures and stops at the end; rows from earlier pages remain visible.

MeterUsageList replaces application data/loading props with client, source (default events), query, rangeDays=7, pageSize=20, batchSize=500 and refreshable=true. It uses the shared Meter client/provider and automatic table transport, including cursor continuation and aggregate limit warnings. Default event columns use raw_event_id; optional columns replaces the defaults.

MeterListSlots<T> supports header, cell({ value, row, index, column }) and footer({ state, controller }). List renders an actual table with one shared column header, including loading/empty/error states. It reuses Table accessors, formatters, widths, alignment and table styles. The header slot is the title region, not the column header. Sort/filter controls are not provided. React exports MeterListProps<T> and MeterUsageListProps; Vue also supports native scoped slots and exposes loadMore() / refresh() through refs. The list controller does not dispose a caller-owned controller on unmount.