Five Key Insights from My First Major Web Development Project and Essential Vue.js Tips

Embarking on my inaugural comprehensive web application journey, I recently developed a Notion extension that streamlines data management and reporting. This project enables users to extract information from Notion databases and distribute it as email reports seamlessly.

If you’re curious, you can explore the live application here: https://ocean-digest.com.

For this project, I leveraged a modern tech stack, including Nuxt.js, Supabase, Stripe, Notion API, Google Cloud (primarily for serverless functions), and Cloudflare. Through this experience, I’ve gathered valuable lessons aimed at helping fellow developers optimize their workflows and avoid common pitfalls.

Below are five critical takeaways from my journey, complemented by practical Vue.js tips to improve project architecture and productivity.

1. Prioritize Validation Rules Over TypeScript Classes

Initially, I dedicated significant time to writing comprehensive TypeScript classes and interfaces for backend logic. Only later did I recognize the importance of integrating robust validation libraries like Zod to ensure data integrity.

Switching gears early to incorporate schema validation saved me time during refinement and reduces debugging effort. Additionally, Zod schemas can be converted into TypeScript interfaces, allowing for a single source of truth and eliminating redundant code maintenance.

Tip: Implement schema validation at the earliest stage of data processing. This approach ensures data consistency and simplifies debugging.

2. Keep Pinia Stores Lean and Focused

In the beginning, I stored various UI states—such as modal visibility and notification arrays—in Pinia stores. Over time, I realized that mixing transient UI logic with persistent data complicates state management.

The optimal approach I adopted involves isolating UI-related logic within composables, utilizing Nuxt’s useState, while Pinia stores retain only essential, persistent data. This separation enhances clarity, reduces complexity, and makes state easier to manage and test.

Tip: Strive for minimal Pinia stores that hold critical data only. Use composables for ephemeral UI states to maintain a clean architecture.

3. Leverage Vue.js’s Provide/Inject for Clean Data Passing

Passing data between components often leads to prop drilling or excessive reliance on shared stores. While props are the standard method, they can become cumbersome in deeply nested component hierarchies.

Vue’s provide and inject functions offer a neat solution for passing data down the component tree