Page Comparison

Vue 3

We use the Vue.js 3 composition API together with TypeScript.

https://vuejs.org/

TypeScript

We use TypeScript as our development language.

https://www.typescriptlang.org/

Linting

Coding Guidelines

Build

Vite builds the frontend into a static page that can then be delivered in a Docker container. It can also provide a live preview for development. (npm run dev)

https://vitejs.dev/

Router

For site navigation and access control we use Vue Router

https://router.vuejs.org/

HTTP Client

Notification

For the user notification we use a self-built component, which can be found in our own framework Vue Components Library .

HTML components

For our html components we use our own framework Vue Components Library which uses https://githubtailwindui.com/axios/axios

Websockets

and builds on it.

Store

To exchange component information (which goes beyond the normal parent/child construct) we use Pinia as a global store.

https://wwwpinia.npmjsvuejs.com/package/webstomp-client

...

org/

https://github.com/emmanuelsw/notiwind

Store

apiida.atlassian.net/wiki/pages/createpage.action?spaceKey=AACP&title=Usage%20of%20the%20store%20as%20a%20cache&linkCreation=true&fromPageId=7886700545

HTTP Client

The https://pinia.vuejs.org/Usage of the store as a cache github.com/axios/axios client is used in the developer portal project, as well as in our API Helper framework.

Linting

Coding Guidelines

Sytle

https://tailwindui.com/

...

https://vue-hero-icons.netlify.app/

https://postcss.org/

Websockets

https://www.npmjs.com/package/webstomp-client

Unit Tests

https://jestjs.io/

Hash

https://www.npmjs.com/package/blueimp-md5

Charts

https://www.chartjs.org/

https://www.npmjs.com/package/vue-chart-3

Time and date stuff

https://day.js.org/

Markdown

https://www.npmjs.com/package/marked

https://www.npmjs.com/package/github-markdown-css