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/

Build

...

Vite builds our 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)

Linting

Coding Guidelines

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

...

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.comorg/package/webstomp-client

Notification

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/

...