vue-data-ui

Interactive documentation

A user-empowering data visualization Vue components library.

Available components:

Charts

• VueUiXy
• VueUiDonut
• VueUiWaffle
• VueUiRadar
• VueUiQuadrant
• VueUiGauge
• VueUiChestnut
• VueUiOnion
• VueUiVerticalBar
• VueUiHeatmap
• VueUiScatter
• VueUiCandlestick
• VueUiAgePyramid
• VueUiRelationCircle
• VueUiThermometer
• VueUiRings
• VueUiWheel
• VueUiTiremarks
• VueUiDonutEvolution
• VueUiMoodRadar
• VueUiMolecule

Mini charts

• VueUiSparkline
• VueUiSparkbar
• VueUiSparkstackbar
• VueUiSparkHistogram

3d

• VueUi3dBar

Tables

• VueUiTableSparkline
• VueUiTable

Rating

• VueUiRating
• VueUiSmiley

Utilities

• VueUiScreenshot
• VueUiSkeleton
• VueUiDashboard
• VueUiAnnotator
• VueUiIcon
• VueUiDigits

Installation

npm i vue-data-ui

You can declare components globally in your main.js:

import { createApp } from 'vue'
import App from "./App.vue";
// Include the css;
import "vue-data-ui/style.css";

// You can declare Vue Data UI components globally
import { VueUiRadar } from "vue-data-ui";

const app = createApp(App);

app.component("VueUiRadar", VueUiRadar);
app.mount('#app');

Or you can import just what you need in your files:

<script setup>
  import { VueUiRadar, VueUiXy } from "vue-data-ui";
</script>

Typescript

Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.

Nuxt

This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt

Slots

Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).