Algemeen ​

Compiling ​

We maken gebruik van Vite voor het compilen van al onze assets.

Benamingen ​

1. Filename in kebab-case. bv:example-component.vue

Inertia ​

Inertia zal standaard de keuze zijn voor onze projecten. In uitzonderlijke gevallen kan hiervan afgeweken worden. Dan zal er gebruik gemaakt worden van blade files + vue .

Vertalingen ​

In frontend gebruiken we de npm package laravel-vue-i18n voor vertalingen.

Deze gebruikt de vertalingen van Laravel. Als er text toegevoegd wordt in de frontend, moet deze ook altijd in de vertalingen van Laravel toegevoegd worden. Zo kunnen geen vertalingen vergeten worden.

Mappenstructuur ​

Voor zowel blade, CSS als JS zullen we dezelfde mappenstructuur aanhouden. Dit zal er voor zorgen dat we gemakkelijk de samenhorende bestanden kunnen terugvinden en onderhouden.

Niet alle folders zullen van toepassing zijn voor zowel blade, CSS als JS.

De bestanden m.b.t. frontend plaatsen we onder de resource map. Dit geeft ons volgende structuur:

• pages
  • Bevat een submap per pagina. Bijvoorbeeld: home, articles, blog, ...
  • Iedere submap heeft altijd een map sections om delen van de pagina op te delen. In de sections worden dan componenten geplaatst.
• components
  • Componenten die globaal gebruikt worden. Bijvoorbeeld: input, button, modal, ...
• layouts
  • De omhulsels die header, footer en content samen brengen.
• stores
  • Alles m.b.t. de pinia stores. Probeer gebruik van pinia stores te beperken tot het minimum.

> resources
    > js / views / scss
        > pages
            > home
                > sections
                    - homepage-specific-component.vue
                - Index.vue
            > articles
                > sections
                    - article-pages-specific-component.vue
                - index.vue
                - detail.vue
                - edit.vue
                - ...
        > components
            - button.vue
            - modal.vue
            - input.vue
        > layouts
            > sections
                - header.vue
                - footer.vue
            - example-layout.vue
        > stores
            - example-store.ts
        - app.ts