Key Libraries

Future

The main libraries basically support Vue3. In the selection of future libraries, we tend to choose a stable version that supports Vue3.

TypeScript

TypeScript is used in this application, and helps avoid certain categories of errors.

Vue historically has not had the best support for TypeScript. This has improved significantly as of Vue 3, but still has some limitations.

You can read more about TypeScript here.

Vue Router

Vue Router is the standard routing library for managing routes in projects.

You can read more about Vue Router here.

Vuex

Vuex is the state management library used in this application.

You can read more about Vuex here.

Note

Currently TypeScript support in Vuex is limited. This is expected to improve in future versions.

This issue is of particular interest in this context.

Tailwind CSS

We use tailwindcss for styling. Tailwind provides a collection of utilities exposed via classes that facilitates the rapid development of designs.

You can read more about tailwindcss here.

Note

Updated at 2022 Q4

As of the time of writing, we are now using on v3.x of Tailwind CSS. If any issue with Tailwind, please check Tailwind Blog .

Element Plus

This library provides a set of UI components for Vue.js applications.

You can read more about Element Plus here.

Tiptap

Tiptap is a headless, framework-agnostic rich text editor that gives you total control over your text editing experience. Built on top of ProseMirror, it provides a modern, extensible editor with a powerful API for creating custom extensions. Tiptap offers excellent performance, full TypeScript support, and a modular architecture that allows you to include only the features you need.

Key features:

• Headless Architecture: Complete control over the UI and styling
• Extensible: Create custom extensions or use the extensive library of official extensions
• TypeScript Support: Fully typed API for better developer experience
• Collaborative Editing: Built-in support for real-time collaboration
• Framework Agnostic: Works with Vue, React, or vanilla JavaScript

You can read more about Tiptap here.

Lodash

This library provides functions for performing common tasks such as iterating arrays, manipulating and testing values, and creating composite functions. It's known for its high performance, modularity, and ease of use. It's often used to simplify complex JavaScript code and improve the maintainability of large projects.

You can read more about Lodash here.

Font Awesome

This is a font and icon library that includes scalable vector icons that can be customized (size, color, drop shadow, etc.) with CSS.

You can read more about Font Awesome here.

Notyf

This library provides adding non-blocking notifications to your web application.

You can read more about Notyf here.

vuedraggable

This is a Vue.js library that provides the ability to implement drag-and-drop functionality in web applications.

You can read more about vuedraggable here.

Luxon

This is the library being used to handle date related operations.

You can read more about Luxon here.

Note

Luxon does not support TypeScript typings as a first class citizen and relies on community contributions to keep these up to date. It is also not built to be modular and therefore it does not support tree shaking.

We may migrate to something else such as date-fns in the future which support these out of the box.

VeeValidate

This is used for front-end form validation.

You can read more about VeeValidate here.

Popper

This is used for front-end pop-up tooltip.

You can read more about Popper.js here.

Chart.js

This is used for front-end charts creation and display.

You can read more about Chart.js here.