• vite, vitest, vue-tsc, commitizen
• typescript, less, tailwind
• Feature-Sliced Design, Application Areas

• https://feature-sliced.design/
• The module should not depend directly on other modules of the same layer or overlying layers
• Each module must have a declaration of its public API at the top level
• Orientation to business and user needs

• It's a part of FSD layer app: @app/areas/*
• Implemented over vue-router interface
• Top (external) areas: auth, unauth, maintainance
• Internal areas: user, dashboard, account, cart, etc, ..., anything
• Internal area imports into the one of top-external area
• Each top-external area will be applied to vue router during app's creation
• Auth area for authorized access to internal areas
• Unauth area for unauthorized access to internal areas
• Maintainance area for technical pages like service-unavailable, page-not-found, etc

Every area has base area-frame component looks like:

<template>
  <router-view />
</template>

But you can to change that for a specific area:

<template>
  <Shared.UI.Layout.Section
    class-name="max-w-md"
    height-full
  >
    <div class="my-auto min-h-75">
      <router-view />
    </div>
  </Shared.UI.Layout.Section>
</template>

• use ./src/viewport.vue to setup global feature(s) in <script></script> section
• use ./scr/app/areas/area-frame (area-frame for all areas) to setup global feature(s) in <style></style> section
• don't use ./src/viewport.vue or ./scr/app/areas/area-frame to setup global feature(s) in <template></template> section, use another area-frame(s) for that