CLI tool to create Vue.js projects with Tailwind CSS following Clean Code and SOLID principles. A modern project generator similar to 'npm create vue@latest'
npm install create-startkit-vue> CLI tool to generate Vue.js projects with Tailwind CSS following Clean Code and SOLID principles




A modern project generator that creates Vue.js applications with professional architecture, similar to npm create vue@latest but with enhanced structure and best practices.
When you use this CLI, you get a complete Vue.js project with:
- ๐จ Modern UI: Tailwind CSS 4.x with beautiful gradients and responsive design
- ๐๏ธ Clean Architecture: Organized following SOLID and Clean Code principles
- โก Fast Development: Vite 7.x for instant hot-reload and optimal builds
- ๐งฉ Reusable Components: Pre-built components including modals, forms, and navigation
- ๐ฑ Mobile-First: Fully responsive design optimized for all devices
- ๐ง Development Tools: Vue DevTools integration and professional structure
- ๐ฆ Scalable: Modular architecture organized by features and sections
- ๐ SEO Ready: Automatic robots.txt and sitemap.xml generation for better search engine visibility
- ๐ค AI Development: Includes context_cursor.txt for enhanced AI coding assistance in Visual Studio Code
``bashUsing npm
npm create startkit-vue@latest my-vue-app
That's it! Your Vue.js project will be running at http://localhost:5173
๐๏ธ Project Structure
`bash
create-startkit-vue/
โโโ bin/ # CLI tool
โ โโโ create-startkit.js # Project generator script
โ
โโโ template/ # Project template
โโโ public/ # Static public assets
โ โโโ favicon.ico # Site favicon
โ โโโ robots.txt # SEO robots file
โ
โโโ src/
โ โโโ assets/ # Project assets
โ โ โโโ images/ # Image files
โ โ โ โโโ logo.svg # Site logo
โ โ โโโ styles/ # Global styles
โ โ โโโ main.css # Main stylesheet with Tailwind
โ โ
โ โโโ core/ # Core application code
โ โ โโโ constants/ # Global constants
โ โ โ โโโ index.js # Centralized constants
โ โ โโโ router/ # Vue Router setup
โ โ โ โโโ index.js # Route definitions
โ โ โโโ services/ # API and service layer
โ โ โ โโโ api/ # Base API configuration
โ โ โ โโโ contact/ # Contact-related services
โ โ โ โโโ services/ # Business services
โ โ โโโ types/ # Type definitions
โ โ โโโ api.types.js # API-related types
โ โ
โ โโโ features/ # Feature-based components
โ โ โโโ home/ # Home page feature
โ โ โโโ HomeView.vue # Main view
โ โ โโโ sections/ # Page sections
โ โ โโโ AboutSection.vue
โ โ โโโ ContactSection.vue
โ โ โโโ HeroSection.vue
โ โ โโโ ServicesSection.vue
โ โ โโโ StackSection.vue
โ โ
โ โโโ layout/ # Application layout
โ โ โโโ App.vue # Root component
โ โ
โ โโโ shared/ # Shared/common code
โ โ โโโ components/ # Reusable components
โ โ โ โโโ BaseButton.vue # Button component
โ โ โ โโโ BaseModal.vue # Modal component
โ โ โ โโโ ContactForm.vue # Contact form
โ โ โ โโโ CountUpNumber.vue# Number animation
โ โ โ โโโ Footer.vue # Site footer
โ โ โ โโโ Navbar.vue # Navigation
โ โ โโโ utils/ # Utility functions
โ โ
โ โโโ main.js # Application entry
โ
โโโ .env.example # Environment variables
โโโ index.html # HTML entry point
โโโ jsconfig.json # JavaScript config
โโโ package.json # Dependencies
โโโ README.md # Project docs
โโโ vite.config.js # Vite config
``- Framework: Vue.js 3.5.17
- Styling: Tailwind CSS 4.1.11
- Build Tool: Vite 7.0.0
- Icons: Tabler Icons Vue
- Router: Vue Router 4
- Development: Vue DevTools integration
- SEO Tools:
- Automatic sitemap.xml generation
- Configured robots.txt
- SEO-friendly routes
- AI Development:
- Preconfigured context_cursor.txt for AI pair programming
- Enhanced code completion with AI assistance
- ๐ฏ Single Responsibility: Each component and service has one clear purpose
- ๐ Open/Closed: Easy to extend without modifying existing code
- ๐ Liskov Substitution: Components are interchangeable and consistent
- ๐งฉ Interface Segregation: Clean, focused interfaces for better maintainability
- ๐ Dependency Inversion: Dependencies point to abstractions, not concretions
- ๐ Organized Structure: Feature-based folder organization with section-based components
- ๐ง Reusable Components: Base components for common UI elements
- ๐ Clear Naming: Self-documenting code with meaningful names
- ๐งช Testable: Architecture designed for easy unit testing
- ๐ Documented: JSDoc annotations and clear README files
- ๐ Issues: GitHub Issues
- ๐ฌ Discussions: GitHub Discussions
- ๐ง Contact: hola@ecortes.cl
MIT License - see LICENSE file for details.
---
Created with โค๏ธ by eCortes.cl for the Vue.js community