{"id":15260,"library":"viser-vue","title":"viser-vue: Vue.js Data Visualization Components","description":"viser-vue is a Vue.js component library designed for declarative data visualization, acting as a Vue-native wrapper for charts powered by the AntV G2 charting engine. It provides a set of components such as `<v-chart>`, `<v-tooltip>`, and various specific chart types (e.g., `<v-smooth-line>`) that allow developers to build interactive data visualizations directly within Vue templates. The package also integrates with `@antv/data-set` for robust data transformation capabilities. The current stable version is 2.4.8, last published approximately six years ago, indicating it is primarily designed for Vue 2 applications and is likely in a maintenance-only mode. Its key differentiator is providing a familiar Vue component API over the powerful G2 visualization grammar, abstracting away lower-level charting details for Vue developers. Due to its age, direct compatibility with Vue 3 is not expected.","status":"maintenance","version":"2.4.8","language":"javascript","source_language":"en","source_url":"https://github.com/viserjs/viser-vue","tags":["javascript","g2","chart","vue","datavis","typescript"],"install":[{"cmd":"npm install viser-vue","lang":"bash","label":"npm"},{"cmd":"yarn add viser-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add viser-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for Vue component rendering. Primarily supports Vue 2.","package":"vue","optional":false},{"reason":"Required for data transformation, especially for complex chart data preparation.","package":"@antv/data-set","optional":false}],"imports":[{"note":"While individual components can be used in templates, for global registration and ease of use, register ViserVue as a Vue plugin. Direct named imports of components for local registration might require specific build configurations not covered by default.","wrong":"import { VChart, VTooltip } from 'viser-vue';","symbol":"ViserVue components","correct":"import Vue from 'vue';\nimport ViserVue from 'viser-vue';\n\nVue.use(ViserVue);"},{"note":"The original README used CommonJS `require`, but modern Vue/TypeScript setups should use ES Modules `import`. Both are typically supported if your build tooling handles CJS interoperability.","wrong":"const DataSet = require('@antv/data-set');","symbol":"DataSet","correct":"import DataSet from '@antv/data-set';"},{"note":"viser-vue components like <v-chart>, <v-tooltip>, <v-axis>, and <v-smooth-line> are typically made globally available by installing the ViserVue plugin (Vue.use(ViserVue)). They are not usually imported individually for local component registration in Vue 2 setups without additional configuration.","symbol":"Specific Chart Components","correct":"// Used directly in template after global plugin registration.\n// <v-chart :data=\"data\">...</v-chart>"}],"quickstart":{"code":"<!-- MyChart.vue -->\n<template>\n  <div>\n    <v-chart :force-fit=\"true\" :height=\"height\" :data=\"data\" :scale=\"scale\">\n      <v-tooltip />\n      <v-axis />\n      <v-smooth-line position=\"month*temperature\" color=\"city\" :size=\"2\" />\n    </v-chart>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport ViserVue from 'viser-vue';\nimport DataSet from '@antv/data-set';\n\nVue.use(ViserVue); // Globally register ViserVue components\n\nconst sourceData = [\n  { month: 'Jan', Tokyo: 7.0, London: 3.9 },\n  { month: 'Feb', Tokyo: 6.9, London: 4.2 },\n  { month: 'Mar', Tokyo: 9.5, London: 5.7 },\n  { month: 'Apr', Tokyo: 14.5, London: 8.5 },\n  { month: 'May', Tokyo: 18.4, London: 11.9 },\n  { month: 'Jun', Tokyo: 21.5, London: 15.2 },\n  { month: 'Jul', Tokyo: 25.2, London: 17.0 },\n  { month: 'Aug', Tokyo: 26.5, London: 16.6 },\n  { month: 'Sep', Tokyo: 23.3, London: 14.2 },\n  { month: 'Oct', Tokyo: 18.3, London: 10.3 },\n  { month: 'Nov', Tokyo: 13.9, London: 6.6 },\n  { month: 'Dec', Tokyo: 9.6, London: 4.8 }\n];\n\nconst dv = new DataSet.View().source(sourceData);\ndv.transform({\n  type: 'fold',\n  fields: ['Tokyo', 'London'],\n  key: 'city',\n  value: 'temperature'\n});\nconst data = dv.rows;\n\nconst scale = [{\n  dataKey: 'percent',\n  min: 0,\n  formatter: '.2%'\n}];\n\nexport default Vue.extend({\n  data() {\n    return {\n      data,\n      scale,\n      height: 400\n    };\n  }\n});\n</script>\n\n<style scoped>\n/* Your styles here */\n</style>","lang":"typescript","description":"This quickstart demonstrates how to create a multi-line smooth chart using `viser-vue` components. It imports `viser-vue` as a Vue plugin, uses `@antv/data-set` to transform raw data into a suitable format, and then binds this processed data to a `<v-chart>` component, defining axes, tooltips, and a smooth line series with different colors per city. This example is designed for Vue 2 applications."},"warnings":[{"fix":"For Vue 3 projects, consider using a Vue 3-native charting library or a migration build (@vue/compat) as an intermediary step, though full compatibility for older libraries like viser-vue is not guaranteed. The recommended path is to find a Vue 3 alternative or rewrite using modern AntV G2 directly.","message":"viser-vue (v2.x) is designed for Vue 2 and is not compatible with Vue 3 due to breaking changes in Vue's reactivity system and component API. Attempting to use it directly in a Vue 3 project will result in runtime errors related to component registration, props, and lifecycle hooks.","severity":"breaking","affected_versions":">=3.0.0 of Vue"},{"fix":"Assess the risk for new projects. For existing projects, consider migrating to more actively maintained Vue 2 or Vue 3 compatible charting libraries for long-term support and security.","message":"The package has not seen an update in approximately six years. While it may still function with older Vue 2 projects, it is considered unmaintained and unlikely to receive bug fixes, security updates, or new features.","severity":"deprecated","affected_versions":">=2.4.8"},{"fix":"Prefer `import DataSet from '@antv/data-set';` over `const DataSet = require('@antv/data-set');` in TypeScript or ES Module contexts. Ensure your `tsconfig.json` and build configuration (e.g., Webpack, Vite) are set up for proper module resolution.","message":"The documentation and examples may primarily use CommonJS `require` syntax for dependencies like `@antv/data-set`. In modern projects using ES Modules (`import`), ensure your build tooling correctly handles CJS interoperability or update import statements.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure you are running a Vue 2 project (`vue@^2.x.x`). If you must use it in a Vue 3 project, investigate `@vue/compat` for a migration path, but be aware that full compatibility is not guaranteed. Make sure `Vue.use(ViserVue);` is called before your root Vue instance is created.","cause":"This error typically occurs in Vue 3 applications when trying to use a Vue 2 component library like `viser-vue` without the `@vue/compat` migration build, or if the component registration fails due to Vue version incompatibility.","error":"Error: Failed to mount component: template or render function not defined."},{"fix":"Install the dependency: `npm install --save @antv/data-set` or `yarn add @antv/data-set`.","cause":"The `@antv/data-set` package, used for data transformation, is a direct dependency that needs to be installed separately, and this error indicates it's missing.","error":"Cannot find module '@antv/data-set' or its corresponding type declarations."}],"ecosystem":"npm"}