VueJS + ChartJS Demo

Description

This is a demo project showcasing the integration of Vue.js and Chart.js to create interactive and dynamic charts. The application allows users to visualize data through various chart types while leveraging Vue.js for state management and reactivity.

Features

• Interactive Charts using Chart.js
• Vue.js Framework for frontend development
• TypeScript Support for improved code maintainability
• Vuex State Management for handling application state
• Vue Router for navigation
• Unit Testing using Jest and Vue Test Utils
• Draggable & Resizable Charts with vue-draggable-resizable
• Express.js Backend for serving the application
• SCSS Support for styling

Technologies Used

• Frontend:

  • Vue.js (Vue 2)
  • Vue Router
  • Vuex
  • Chart.js
  • TypeScript
  • SCSS
  • Prettier & ESLint

• Backend:

  • Express.js
  • Body-parser
  • Compression
  • Connect
  • Cookie-session

• Development Tools:

  • Jest (for unit testing)
  • Vue CLI
  • Webpack
  • Babel
  • ts-node
  • Sass-loader

Project Setup

Install dependencies

yarn install

Run the development server

yarn serve

Build for production

yarn build

Run unit tests

yarn test:unit

Lint and fix files

yarn lint

Configuration

For additional configuration, see the Vue CLI Configuration Reference.