Web Designer & Developer at Self-employed·

This will be weird. I have pretty aggravating ADHD that makes project organization and planning tricky. I was finding myself torn on how to sort my React components and the resources they require in a manner that made sense to me, but it resulted in a lot of projects being re-initialized repeatedly because "it's not quite right".

Vue destroyed that anxiety with its single-file component (SFC) model and composition API. When a single .vue file can pack its relevant requirements into a script, template, and style tag, I no longer need to consider how dependencies need to be organized. I just write exactly what the component needs into the file, and save it wherever I require it.

As for static assets, Vite helped with this by defaulting root paths to the /public folder, keeping my imports short and my assets away from my code.

My current portfolio project uses /src, /src/components, and /src/modules for the Vue parts, and /public contains my logos, images, stylesheets, etc. The level of specificity has helped me compartmentalize my tasks and make the development process feel manageable and digestible, no matter how large it gets.

READ LESS
15 upvotes·3 comments·30.7K views
Jack Heaton
Jack Heaton
·
May 13th 2022 at 4:20PM

I was looking into using Vue, and also have experienced similar feelings about project organization in React (and Next.js for that matter).

Thanks for sharing this, it's a helpful take!

·
Reply
Ben Diamond
Ben Diamond
·
June 2nd 2022 at 4:24PM

I'm glad my concerns resonated with people! The only change I made since this post is putting static resources in [/src/assets] and using [/public] for direct HTML imports, as I switched to trying Tailwind and it made more sense to have my stylesheets as a [/src] directory.

·
Reply
Jack Heaton
Jack Heaton
·
June 3rd 2022 at 12:50PM

Hmm that's good to know! Thanks again for sharing Ben, cheers!

·
Reply
Avatar of Ben Diamond

Ben Diamond

Web Designer & Developer at Self-employed