Gilles

Repositories

8

Projects Packages

7

Public activity Starred repositories

@gilles/bigb-vue (0.2.0-dev.80)

Published 2026-10-24 18:00:45 +00:00 by Gilles in Gilles/bigb-vue

Installation

Setup this registry in your project .npmrc file:

@gilles:registry=

Or setup the registry from the command line:

npm config set @gilles:registry=

To install the package using npm, run the following command:

npm install @gilles/bigb-vue@0.2.0-dev.80

or add it to the package.json file:

"@gilles/bigb-vue": "0.2.0-dev.80"

For more information on the npm registry, see the documentation.

About this package

bigb-vue

Vue 3 components for bigb-django: interactive grid dashboards (drag/resize), query rendering (table, number, Chart.js), or injecting the SVG rendered server-side.

Screenshots

Dashboard (table, number, line, bar, pie, backend SVG)	Standalone query result

Installation

npm install bigb-vue

import { createBigbClient, BigbDashboard, BigbQueryResult } from "bigb-vue";

const client = createBigbClient({ baseURL: "/bigb" });

<!-- a full dashboard, read-only -->
<BigbDashboard :client="client" slug="sales" />

<!-- the same dashboard, with layout editing (drag/resize) enabled -->
<BigbDashboard :client="client" slug="sales" editable />

<!-- a single query, outside of any dashboard -->
<BigbQueryResult :client="client" slug="paid-orders" render-type="bar" />

Components

• BigbDashboard: interactive grid (grid-layout-plus), loads the dashboard and its tiles, PATCHes positions in editable mode.
• BigbTile: a single tile, dispatches to the right renderer based on render_type/render_target.
• BigbQueryResult: a single query (named via slug, or ad hoc via spec), outside of any dashboard.
• Renderers (also exported individually if needed directly): TableRenderer, NumberRenderer, ChartRenderer (line/bar/pie via Chart.js), SvgRenderer (injects the SVG rendered server-side).

Composables

• useQuery(fetcher, { immediate }): generic reactive wrapper (data/loading/error/refresh) around any call returning a QueryResult.
• useDashboard(client, slug): loads a dashboard and exposes updateTileLayout().

Development

Requires Node.js (verified with Node 22).

npm install
npm run dev     # local demo (index.html + dev/App.vue), VITE_BIGB_BASE_URL for the API
npm run build   # vite build && vue-tsc -b (library mode + .d.ts declarations)
npm run lint    # eslint

npm audit reports 4 moderate/dev-only vulnerabilities (esbuild's dev server, postcss-selector-parser via eslint-plugin-vue) -- none affect the published code in dist/. npm audit fix --force would fix them but bumps vite to v8 and eslint-plugin-vue to v10 (breaking changes); left to Renovate rather than a forced bump here.

Dependencies

Dependencies

ID	Version
axios	^1.7.7
chart.js	^4.4.4
grid-layout-plus	^1.0.5

Development dependencies

ID	Version
@typescript-eslint/parser	^8.71.1
@vitejs/plugin-vue	^6.0.0
@vue/tsconfig	^0.9.0
eslint	^10.0.0
eslint-plugin-vue	^10.0.0
typescript	^6.0.0
vite	^8.0.0
vue	^3.5.0
vue-eslint-parser	^10.4.1
vue-tsc	^3.0.0

Peer dependencies

ID	Version
vue	^3.5.0

Details

npm

Gilles/bigb-vue

2026-10-24 18:00:45 +00:00

3

2026-10-27 02:23:52 +00:00

Project website

LGPL-3.0-or-later

167 KiB

Assets (1)

bigb-vue-0.2.0-dev.80.tgz 167 KiB

Versions (16) View all

0.2.0-dev.106 2026-11-04

0.2.0-dev.104 2026-11-02

0.2.0-dev.102 2026-11-01

0.2.0-dev.99 2026-10-31

0.2.0-dev.97 2026-10-30

Issues