How to keep the workflow neat and organized as the project gets bigger?

hi all, i am a junior front-ender, and i am a little confused about how can i integrate and work with all of these different things in the same project, i am in a situation where i need to use (vue, vuex, vuex ORM, nuxt, till this point, and may need vue-Apollo, with GraphQl in the coming sprints) but as the project gets bigger and bigger i got more confused and worried about if i am on the right path or not, can anyone help in this i am really wasting a lot of time of this ?

is there are any real-world projects can help me learning more about how can all of these work in a harmonious way along with communicating with back-end?!!

thanks in advance

In my organizations, as long as you always separate the files by concern, then it should be stable when the app keeps growing.

Usually I will split the files by:

  • template/layout components
  • page components
  • shared components
  • shared vuex stores
  • shared directives & mixins
  • shared network references
  • shared helper functions

For test files, rather than centralizing all test files under a test folder, I would suggest you create a test files on the same directory of the files you want to test. You can create a new folder __tests__ in the directory and put the test files there.

Lastly, if you haven’t use TS (typescript) before, you may want to consider using TS to standardize the interface of your application so it’s easier to keep the code consistent while it’s growing. Vue might not 100% support TS as of now, but we will see when vue 3 released and there will be new conventional way to write Vue component with TS support.

1 Like

@chenxeed first of all, thank u for your efforts and time :heart:

u know my dilemma is every time i start working on something i feel like my data flow and my project gets messy, and i start to lose my point and feel like all the bad coding habits are my guests :persevere:

Usually I split the project files by:

  1. layouts
  2. pages (router view)
  3. components (which i usually sub-divide according to the project need to keep the components of each part combined together e.g all the profile components are in a profile folder and so on)
  4. partials (shared components through the whole project)
  5. store ( inside i usually have models directory for VuexORM models, modules directory for Vuex modules and index.js to manage the store )
  6. mixins folder
  7. router folder (because i usually divide my routes into separate files to keep each file responsible for handling the routes for specific part e.g all the profile routes in a profile.js and then index.js to manage all the files and combine them together)
  8. services (usually i used it for helper functions and services i use through the project)

the project i am working on now is my first to use (Nuxt, GraphQl and VueApollo)

so, i am asking how u usually manage the data flow in your projects, like sending data to the back-end, receiving responses, handling requests.

i usually dispatch actions from the components and handling everything in the actions, but then i found that my actions are messy, then i use VuexORM to work with the data like updating, deleting …etc and then update the vuex state with the updated data, and then, i turned :exploding_head:

i will do so.

i will as soon as possible to turn to use TS

thank u again