We use in combination the framework Vue and the language Typescript. The team is completed with Tailwind. Here is an example:
<template> <button type="button" class="rounded bg-indigo-500 py-1 px-2 text-xs font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Button text</button> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ props: { // Type-Safe properties! myComplexProperty: { type: Object as PropType<MyInterface>, required: true, } }, emits: [], setup(props, { emit }) { }, }) </script> <style scoped> </style>
For storage we use Pinia.
import { defineStore } from 'pinia'; import Plan from '../types/configuration/Plan'; const planStore = defineStore({ id: 'plan', state: () => ({ plans: [] as Plan[], }), }); export default planStore;