Currently we are using Vue.js for our frontend. The folder structure is basically: we have a folder for each of our pages (e.g., "tickets", "ticket-details", "orders", "order-details", "checkouts", "checkout-details", etc.). Within each of these folders we have subfolders for each significant part of the screen (e.g., we have a subfolder "ticket-details/email" where we put all the components related to sending emails and display the incoming ones). Besides, we have a "shared" folder for reusable components across all our pages (e.g., "Spinner.vue" and the like). Finally, we also have folders for "reusable modules" (these are just plain JavaScript files that we import here and there).

At the beginning this folder structure made sense, but currently we have over 210 Vue components (and growing). I haven't found any "better" architecture/folder structure on the web. Do you know any better?

I was thinking about simulating our backend folder structure in the frontend but I'm not quite sure about it (our backend is basically Symfony with folders for each "business" aspect of our system, subdivided in "use cases" (e.g., "return an order unit") that call "services", and "modules" that can be reused across the whole system. Somehow our backend seems to "scale" better than our frontend...