Math Diagram Component Library For Vue – vueclid

The vueclid library provides a set of 10+ diagram components to generate math diagrams in an easy way.

Components Included:

  • Graph
  • Vector
  • Line
  • Polyline
  • Arc
  • Angle
  • Point
  • Label
  • Circle
  • Ellipse
  • Sector
  • Polygon
  • Plot

How to use it:

1. Basic usage.

<template>
  <Graph
    :domain-x="[-1.5, 1.5]"
    :domain-y="[-1.5, 1.5]"
    :grid-size="0.5"
    :units="false"
  >
    <Circle :radius="1" color="#aaa" />
    <Line
      :to="[1, Math.tan(0.8)]"
      :line-width="1.5"
      color="lightseagreen"
      dashed
    />
    <Line
      :from="[1, 0]"
      :to="[1, Math.tan(0.8)]"
      :line-width="1.5"
      color="lightseagreen"
      dashed
    />
    <Point
      :position="[1, Math.tan(0.8)]"
      color="lightseagreen"
      label="(1,tan(x))"
      label-position="top"
    />
    <Angle
      :a="[1, 0]"
      :b="[0, 0]"
      :c="[1, Math.tan(0.8)]"
      :radius="0.4"
      dashed
    />
    <Vector :to="[Math.cos(0.8), Math.sin(0.8)]" />
    <Line
      :from="[Math.cos(0.8), 0]"
      :to="[Math.cos(0.8), Math.sin(0.8)]"
      :line-width="1.5"
      color="hotpink"
      dashed
    />
    <Line
      :from="[0, Math.sin(0.8)]"
      :to="[Math.cos(0.8), Math.sin(0.8)]"
      :line-width="1.5"
      color="#33aabb"
      dashed
    />
    <Point :position="[Math.cos(0.8), 0]" color="hotpink" label="cos(x)" />
    <Point
      :position="[0, Math.sin(0.8)]"
      color="#33aabb"
      label="sin(x)"
      label-position="top"
    />
  </Graph>
</template>

2. Config the diagram.

import { configureGraphs } from "@ksassnowski/vueclid";
configureGraphs({ 
  darkMode?: boolean;
  colors?: {
    light?: Partial<ColorScheme>;
    dark?: Partial<ColorScheme>;
  };
});

Preview:

Math Diagram Component Library vueclid

Changelog:

v1.2.0 (02/28/2024)

  • add option to draw labels for angles and arcs
  • add option to draw labels without border
  • allow labels to be rotated

v1.1.1 (02/22/2024)

  • bugfixes

v1.1.0 (01/30/2024)

  • add rotation parameter to ellipse

Download Details:

Author: ksassnowski

Live Demo: https://ksassnowski.github.io/vueclid-docs/components/graph.html

Download Link: https://codeload.github.com/ksassnowski/vueclid/zip/refs/heads/main

Official Website: https://github.com/ksassnowski/vueclid

Install & Download:

# Yarn
$ yarn add @ksassnowski/vueclid

# NPM
$ npm install @ksassnowski/vueclid

# PNPM
$ pnpm add @ksassnowski/vueclid

Add Comment