How to structure your Vue 3 project?

Hi guys,

Let’s talk about organizing stuff today.

As we all know, if we organize our projects carefully with love from the beginning, at a later stage, it will give us a lot of benefits:

• Highly maintainable
• Highly extendable
• Easy to learn (the learning curve is not so big)
• Every interaction with the codebase is truly delighted
• (and more)

I mean for this, people would have their own taste, it’s understandable.

Today, DummyTechDev will share with you guys the structure of a Vue 3 project that we’ve followed for a while.

Get let’s the “How to structure your Vue 3 project?” started 😎

The Structure

So everything begins in the src folder :

• src
  • assets
    • images
      • logo.png
    • icons
  • constants
    • env.ts
  • components
    • ui
      • Select
      • Input
    • customized
      • CurrencySelect
      • UserSelect
  • composables
    • useLoading.ts
  • datasources
    • api
      • users
        • getUsers.api.ts
    • websocket
  • pages
    • Auth
      • SignInPage
    • Dashboard
      • DashboardIndexPage
  • styles
    • app.css
  • types
    • user.schema.ts
  • utils
    • stringHelper.ts

It looks amazing, doesn’t it? 😎

The explanation – structure your Vue 3 project

assets

It contains images, custom icons, or anything related to static files (images, videos, etc)

constants

It contains the hardcoded configuration or the ENV variables. We can distribute these constants everywhere in the codebase.

components

It contains the reusable components that we can use on every page or every component.

There are 2 types of components:

• ui: normal UI components (mustn’t contain any business logic or API interaction). E.g.: input, select, header, etc.
• customized: components that have business logic or API interaction.

datasources

Nowadays, Web Apps can have one or more data sources: REST APIs, GraphQL, WebSocket, etc.

So in datasources, we can introduce every source that our Web App uses.

Another great point – for example – is an API call, create a function and we can reuse it everywhere in our codebase.

Additionally, we can keep the types (schemas) of the requests & responses here. To make sure our applications are type-safe.

pages

Contains the pages of our applications.

styles

Contains the CSS Styling of our applications.

types (Optional if you don’t use TS)

Contains the reusable TS Types of our application.

utils

Contains reusable helper functions that can be used everywhere in the codebase.

Example:

• Format Date
• Get Full Name
• Transform String
• Etc

Conclusion of How to structure your Vue 3 project?

So that’s the structure from DummyTechDev. We have utilized this structure for years and are so happy with everything til now.

We hope that you will also like this, take some ideas on this and go beyond 😎

Happy weekend folks!