{"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,"search_vec":"'2':93 '2.4.8':79 '3':138 'abstract':120 'act':21 'age':133 'ago':85 'allow':52 'also':65 'antv':33 'antv/data-set':68 'api':113 'applic':94 'approxim':82 'away':121 'build':55 'capabl':73 'chart':29,35,48,125,144 'compat':135 'compon':7,14,42,112 'current':75 'data':5,19,57,71 'datavi':146 'declar':18 'design':16,90 'detail':126 'develop':53,129 'differenti':106 'direct':59,134 'due':130 'e.g':50 'engin':36 'expect':141 'familiar':110 'g2':34,117,143 'grammar':119 'indic':86 'integr':66 'interact':56 'javascript':142 'key':105 'last':80 'level':124 'librari':15 'like':97 'lower':123 'lower-level':122 'mainten':101 'maintenance-on':100 'mode':103 'nativ':26 'packag':64 'power':30,116 'primarili':89 'provid':38,108 'publish':81 'robust':70 'set':40 'six':83 'specif':47 'stabl':76 'templat':62 'transform':72 'type':49 'typescript':147 'various':46 'version':77 'viser':2,9 'viser-vu':1,8 'visual':6,20,58,118 'vue':3,10,25,61,92,111,128,137,145 'vue-nat':24 'vue.js':4,13 'within':60 'wrapper':27 'year':84","created_at":"2026-04-21T04:49:59.411316+00:00","updated_at":"2026-04-21T04:49:59.411316+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/viserjs/viser-vue","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/viser-vue","openapi_spec":null,"status_page":null,"smithery":null,"categories":["data","web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-20","install_tag":null}}