{"id":28488038,"url":"https://github.com/peterbenoit/vvv-init","last_synced_at":"2026-04-09T17:57:47.697Z","repository":{"id":297630437,"uuid":"997387975","full_name":"peterbenoit/vvv-init","owner":"peterbenoit","description":"A fast-start Bash script to scaffold a modern Vue 3 project with Vite, Tailwind CSS, Pinia, ESLint, Prettier, and Vercel-compatible serverless API routing. Designed to work seamlessly on both local development and Vercel deployments.","archived":false,"fork":false,"pushed_at":"2025-06-30T17:50:24.000Z","size":133,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-30T18:46:20.886Z","etag":null,"topics":["daisy","husky","pinia","tailwind","vercel","vite","vue"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peterbenoit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-06T12:50:30.000Z","updated_at":"2025-06-30T17:50:27.000Z","dependencies_parsed_at":"2025-06-14T11:24:56.134Z","dependency_job_id":null,"html_url":"https://github.com/peterbenoit/vvv-init","commit_stats":null,"previous_names":["peterbenoit/vvv-init"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/peterbenoit/vvv-init","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2Fvvv-init","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2Fvvv-init/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2Fvvv-init/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2Fvvv-init/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterbenoit","download_url":"https://codeload.github.com/peterbenoit/vvv-init/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2Fvvv-init/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263184550,"owners_count":23427039,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["daisy","husky","pinia","tailwind","vercel","vite","vue"],"created_at":"2025-06-08T05:08:40.457Z","updated_at":"2025-12-30T22:44:10.530Z","avatar_url":"https://github.com/peterbenoit.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Vercel + Vite + Vue Setup\n\n![Vue.js](https://img.shields.io/badge/Vue.js-3.4.0-4FC08D?style=flat-square\u0026logo=vue.js)\n![Vite](https://img.shields.io/badge/Vite-5.0.0-646CFF?style=flat-square\u0026logo=vite)\n![Vercel](https://img.shields.io/badge/Vercel-Ready-000000?style=flat-square\u0026logo=vercel)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.3.0-38B2AC?style=flat-square\u0026logo=tailwind-css)\n\nA streamlined Bash script to scaffold a modern Vue 3 project with Vite, Tailwind CSS, serverless API endpoints, and a complete development setup. This template creates a production-ready project structure that works seamlessly in both local development and Vercel deployments.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/peterbenoit/vvv-init/main/screenshots/preview.png\" alt=\"Project Preview\" width=\"600\"\u003e\n\u003c/p\u003e\n\n## ✨ Features\n\n- **Frontend**: Vue 3 with Composition API and SFCs\n- **Build System**: Vite for lightning-fast development\n- **Styling**: Tailwind CSS with DaisyUI components\n- **State Management**: Pinia store integration\n- **API Integration**: Serverless API endpoints via Vercel\n- **SEO Support**: @vueuse/head for managing document head\n- **Code Quality**: ESLint, Prettier, and Husky pre-commit hooks\n- **Testing**: Vitest and Vue Test Utils setup\n- **Optional**: Vue Router support for multi-page applications\n- **Deployment-ready**: Configured for instant Vercel deployment\n\n## 🛠️ Installation\n\nClone this repository or download the `setup.sh` script:\n\n```bash\n# Make the script executable\nchmod +x setup.sh\n\n# Run the script\n./setup.sh\n```\n\n## 👨‍💻 Usage\n\nDuring setup, you'll be prompted to:\n\n1. **Clean directory**: Optionally remove all existing files (except setup.sh)\n2. **Add Vue Router**: Optionally include Vue Router for multi-page applications\n3. **Initialize Git**: Set up a Git repository with initial commit\n4. **Set remote origin**: Connect to a remote Git repository\n5. **Launch dev server**: Start the development server immediately\n\n### Directory Structure\n\n```\nmy-project/\n├── api/                # Serverless API endpoints\n│   └── hello.js        # Example API route\n├── public/             # Static assets\n│   └── favicon.svg\n├── src/\n│   ├── pages/          # (If using Vue Router)\n│   ├── App.vue         # Root component\n│   ├── main.js         # Application entry\n│   ├── router.js       # (If using Vue Router)\n│   └── style.css       # Global styles with Tailwind\n├── .env                # Environment variables\n├── .gitignore\n├── index.html          # HTML entry point\n├── package.json\n├── tailwind.config.js\n└── vercel.json         # Vercel configuration\n```\n\n## 🌐 Environment Variables\n\nThe project comes pre-configured with environment variables support:\n\n- **Frontend variables** (prefixed with `VITE_`):\n  ```\n  VITE_PUBLIC_MESSAGE=Hello from the frontend\n  VITE_API_BASE=/api\n  ```\n\n- **Backend variables** (private to API routes):\n  ```\n  PRIVATE_BACKEND_SECRET=shhh this is secret\n  ```\n\n## 💻 Development\n\n### Local Development\n\n```bash\n# Standard Vite development\nnpm run dev\n\n# Full Vercel emulation (including API routes)\nnpm run vercel-dev\n```\n\n### Building for Production\n\n```bash\nnpm run build\n```\n\n### Testing\n\n```bash\n# Run tests\nnpm test\n```\n\n## 🚢 Deployment\n\nThis project is configured for immediate deployment on Vercel:\n\n```bash\n# Install Vercel CLI if not installed\nnpm i -g vercel\n\n# Deploy to Vercel\nvercel\n```\n\n## 🧩 Extending the Project\n\n### Adding Components\n\nCreate reusable components in `src/components/`:\n\n```bash\nmkdir -p src/components\ntouch src/components/Button.vue\n```\n\n### Adding Meta Tags and SEO\n\nThe project includes [@vueuse/head](https://github.com/vueuse/head) for managing document head:\n\n```js\nimport { useHead } from '@vueuse/head'\n\nuseHead({\n  title: 'My Page Title',\n  meta: [\n    { name: 'description', content: 'Page description' },\n    { property: 'og:title', content: 'My Page Title' }\n  ],\n  link: [\n    { rel: 'canonical', href: 'https://example.com/page' }\n  ]\n})\n```\n\n### Working with Axios\n\nThe project includes [Axios](https://axios-http.com/) for making HTTP requests:\n\n```js\nimport axios from 'axios'\n\n// Basic GET request\nconst fetchData = async () =\u003e {\n  try {\n    const response = await axios.get('https://api.example.com/data')\n    console.log(response.data)\n  } catch (error) {\n    console.error('Error fetching data:', error)\n  }\n}\n\n// POST request with data\nconst submitData = async (data) =\u003e {\n  try {\n    const response = await axios.post('https://api.example.com/submit', data)\n    return response.data\n  } catch (error) {\n    console.error('Error submitting data:', error)\n    throw error\n  }\n}\n```\n\n### Adding API Routes\n\nCreate new API endpoints in the `api/` directory:\n\n```bash\ntouch api/users.js\n```\n\n## 📄 License\n\nMIT\n\n## 🙏 Acknowledgements\n\n- [Vue.js](https://vuejs.org/)\n- [Vite](https://vitejs.dev/)\n- [Vercel](https://vercel.com/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [DaisyUI](https://daisyui.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbenoit%2Fvvv-init","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterbenoit%2Fvvv-init","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbenoit%2Fvvv-init/lists"}