Language

We use TypeScript as much as we can. We only resort to vanilla JavaScript when there are dependencies that do not work well with Typescript enabled.

Naming guidelines see Google TypeScript Style Guide

Vue

We use the Vue.js 3 composition API together with TypeScript. See the Vue.JS docs for details. In a nutshell our components will look like this.

<template>
  <div class="font-bold">
    {{ testString }}
  </div>
  <div class="font-bold">
    {{ getHelloWorldText() }}
  </div>
  <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>
</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 }) {
    const testString = ref<String>('Hello');
    
    function getHelloWorldText(): string{
      return `${testString.value} World`;
    }
    
    return { testString, getHelloWorldText },
    },
})
</script>

<style scoped>

</style>

We also use the Vue.js style guide that can be found here

ESLint & Prettier

After the patented schnick schnack schnuck procedure, we were able to choose between the style guides from Google Microsoft and Airbnb. It was Airbnb!