👋 Hi Vuers!

If you are really into the Vitesse (Vite + Vue3 + Typescript + Pinia + auto import + layouts + pages + icons + pnpm + file based routing + pwa + windicss(tailwindcss) + icons + i18n + markdown + ssg + critical css, and many more) starter template created by Anthony Fu (Vue core team member) but want to use the modular architectural pattern instead of monolithic architecture, then you can clone the following repo and use your own project. I have changed some of the setups in the Vitesse repo and created my own architecture (modular approach). I am loving it so far and have used some of my projects.

• Github repository link
• live demo

Quick Overview

First thing you will notice there are no components/, pages/, stores/, styles/ folders under the src/ folder. You will see,

• common/
• orders/
• users/

and that’s it. Everything has been moved into the common/ folder (global settings). The orders/ and users/ folders are more like modules (modular architecture). In this project, I have made a demo order process using these two modules but in your case, you will delete everything other than the common/ folder. You will add a new module whenever you need it without breaking any changes. The main advantage you can see is that you don’t have to jump around different folders to implement a feature that is completely separate from other features (separation of concern). You can add the following folders in each module without any manual imports,

• components/
• modules/
• pages/
• stores/

You can also change the meta information of any page as your requirements. For example, you can follow the App.vue file to add on your own.

<script setup lang="ts">
import { useHead } from '@vueuse/head'

// https://github.com/vueuse/head
// you can use this to manipulate 
// the document head in any components,
// they will be rendered correctly in the 
// html results with vite-ssg
useHead({
  title: 'Medium Like Blog (Vue + Vite)',
  meta: [
    { 
      name: 'description', 
      content: 'A Medium like blog using Vue 3 + Vite + Ts' 
    },
  ],
})
</script>

I will highly recommend you to try Vitesse using monolithic architecture first. Then you can move to my repo https://github.com/shamscorner/vitesse-stackter-clean-architect when you feel comfortable.

Have fun! 🙂