Libaro docs

Appearance

On this page

JS ​

Ons framework bij voorkeur is Vue.js. We zullen dit voor zowel grote als kleine componenten gebruiken en vermijden externe javascript files. We gebruiken geen andere frameworks tenzij het echt niet anders kan.

Algemene regels en structuur ​

  • Gebruik Composition API.
  • snake case voor variabelen
  • Er is een style tag aanwezig maar deze is enkel voor het importeren van het bijhorende scss bestand. Hier mag NOOIT styling in staan.
  • Gebruik altijd typescript
  • Bij het definiëren van props. Plaats deze niet tussen quotes.
  • Voor stores gebruiken we Pinia
  • Geen provide en inject gebruiken, maar gebruik props en emits. Zo is het duidelijk waar de data vandaan komt en waar het naartoe gaat.
  • Spreek in de template altijd je props variabelen aan met props.. Hierdoor is het duidelijk dat het een prop is en is het consistent met de rest van de code in de script tag.

Gebruik van interfaces en types ​

Gebruik altijd interfaces en types voor je variabelen. Dit zorgt ervoor dat je code leesbaarder is en dat je minder snel fouten maakt. Hierdoor krijg je ook betere autocompletion in je IDE. Gebruik bij voorkeur interface.

Opties bij types van props ​

Plaats bij props die dit nodig hebben de opties die gebruik kunnen worden. Zo krijgt de developer die je vue component gebruikt een beter beeld van wat er verwacht wordt.

vue
<script setup lang="ts">
  const props = defineProps<{
    position: {
      type: 'left' | 'right',
      default: 'right',
    },
  }>();
</script>

Gebruik van props ​

Gebruik altijd de props variabele om je props aan te spreken in de template. Dit zorgt ervoor dat het duidelijk is dat het een prop is en is het consistent met de rest van de code in de script tag.

De props definieer je in de defineProps functie als camelCase.

vue
<script setup>
  const props = defineProps<{
    propExample: string
  }>();
</script>

<template>
  <div>
    {{ props.propExample }}
  </div>
</template>

De props geef je door als kebab-case.

vue
<template>
  <example-component 
      prop-example="left" >
  </example-component>
</template>

Structuur ​

We houden deze structuur aan voor onze Vue componenten. Eerst de script tag, dan de template en als laatste de style tag.

vue
<script setup>
    ...
</script>

<template>
    ...
</template>
<style scoped lang="scss">
    ...
</style>