The latest articles on Forem by Ayoub Fedil (@ayoub_fedil). https://forem.com/ayoub_fedil https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1976421%2F47d7ec82-a6bc-4e5f-99a9-3182610eed9b.png https://forem.com/ayoub_fedil en Ayoub Fedil Fri, 19 Dec 2025 20:52:27 +0000 https://forem.com/ayoub_fedil/skip-the-boilerplate-build-vue-3-saas-apps-with-ready-made-clerk-authentication-3ll6 https://forem.com/ayoub_fedil/skip-the-boilerplate-build-vue-3-saas-apps-with-ready-made-clerk-authentication-3ll6 <p><strong>#vue #webdev #vite #clerk #shadcn</strong></p> <h2> From Next.js to Vue: The Journey Continues </h2> <p>After the launch of <a href="https://github.com/fedilayoub/next-shadcn-clerk-starter" rel="noopener noreferrer">next-shadcn-clerk-starter</a>, I received numerous requests for a similar solution in the Vue ecosystem.<br> So here it is! 🎉</p> <p>Introducing <a href="https://github.com/fedilayoub/vue-clerk-saas-starter" rel="noopener noreferrer">vue-clerk-saas-starter</a> bringing the same comprehensive SaaS starter experience to the Vue.js ecosystem.</p> <h2> Custom Auth + Ready-Made Dashboard </h2> <p>Just like its Next.js counterpart, this isn't just another authentication template. It's a complete starting point with:</p> <ul> <li> <strong>Custom-styled Clerk authentication</strong> that blends seamlessly with your Vue app</li> <li> <strong>Fully implemented dashboard layout</strong> with navigation and user profile</li> <li> <strong>Multiple demo pages</strong> ready to customize for your specific needs</li> <li> <strong>Responsive sidebar navigation</strong> with expandable sub-items</li> </ul> <h2> The Perfect Tech Stack for Modern Vue Apps </h2> <p>This carefully curated combination brings together:</p> <ul> <li> <strong>Vue 3</strong> with Composition API for optimal performance and developer experience</li> <li> <strong>Vite</strong> for lightning-fast development and optimized builds</li> <li> <strong>Shadcn-Vue</strong> components for consistent, accessible design</li> <li> <strong>Clerk</strong> for authentication with custom-styled components</li> <li> <strong>TypeScript</strong> for complete type safety</li> </ul> <h2> Why This Starter Stands Out </h2> <p>Most Vue starters only handle authentication or basic layouts – this one gives you both:</p> <ul> <li>Elegant sign-in and registration flows using custom Shadcn-Vue components</li> <li>Protected routes with proper authentication state handling powered by Vue Router</li> <li>A complete dashboard structure ready for your application logic</li> <li>Dark mode support throughout the entire application</li> <li>Built with Vue 3's Composition API for better code organization and reusability</li> </ul> <h2> Built for Vue Developers </h2> <p>If you're a Vue developer who wants the power of Clerk authentication without the hassle of building everything from scratch, this is for you. The template leverages Vue's reactive ecosystem and provides:</p> <ul> <li>Composables for authentication state management</li> <li>Reusable Vue components styled with Tailwind CSS</li> <li>Type-safe routing with Vue Router</li> <li>Clean project structure following Vue best practices</li> </ul> <h2> Ready to Build? </h2> <p>The template is intentionally minimal but includes everything you need. Clone the repo, customize to your needs, and focus on building what matters, your product.</p> <p>Whether you're a Vue enthusiast or choosing between frameworks, you now have powerful starters for both ecosystems. Check out the Vue version at <a href="https://github.com/fedilayoub/vue-clerk-saas-starter" rel="noopener noreferrer">vue-clerk-saas-starter</a> or the Next.js version at <a href="https://github.com/fedilayoub/next-shadcn-clerk-starter" rel="noopener noreferrer">next-shadcn-clerk-starter</a>.</p> vue opensource clerk frontend Ayoub Fedil Tue, 20 May 2025 09:03:24 +0000 https://forem.com/ayoub_fedil/nextjs-15-shadcn-ui-custom-clerk-auth-the-dev-friendly-starter-youve-been-waiting-for-4f3o https://forem.com/ayoub_fedil/nextjs-15-shadcn-ui-custom-clerk-auth-the-dev-friendly-starter-youve-been-waiting-for-4f3o <p>Introducing <a href="https://github.com/fedilayoub/next-shadcn-clerk-starter" rel="noopener noreferrer">next-shadcn-clerk-starter</a> the comprehensive solution that goes beyond basic authentication to provide you with a full SaaS project structure.</p> <h2> 🔐 Custom Auth + Ready-Made Dashboard </h2> <p>This isn't just another authentication template. It's a complete starting point with:</p> <ul> <li> <strong>Custom-styled Clerk authentication</strong> that blends seamlessly with your app</li> <li> <strong>Fully implemented dashboard layout</strong> with navigation and user profile</li> <li> <strong>Multiple demo pages</strong> ready to customize for your specific needs</li> <li> <strong>Responsive sidebar navigation</strong> with expandable sub-items</li> </ul> <h2> 🧩 The Perfect Tech Stack for Modern Apps </h2> <p>This carefully curated combination brings together:</p> <ul> <li> <strong>Next.js 16</strong> with App Router for optimal performance</li> <li> <strong>Shadcn UI</strong> components for consistent, accessible design</li> <li> <strong>Clerk</strong> for authentication with custom-styled components</li> <li> <strong>TypeScript</strong> for complete type safety</li> </ul> <h2> ⚡ Why This Starter Stands Out </h2> <p>Most starters only handle authentication or basic layouts – this one gives you both:</p> <ul> <li>Elegant sign-in and registration flows using custom Shadcn components</li> <li>Protected routes with proper authentication state handling</li> <li>A complete dashboard structure ready for your application logic</li> <li>Dark mode support throughout the entire application</li> </ul> <h2> 🚀 Ready to Build? </h2> <p>The template is intentionally minimal but includes everything you need. Clone the repo, customize to your needs, and focus on building what matters.</p> <p>Check out the <a href="https://github.com/fedilayoub/next-shadcn-clerk-starter" rel="noopener noreferrer">GitHub repository</a> to get started today!</p> nextjs webdev react