{"id":30594958,"url":"https://github.com/maexled/vite-vue-openapi-template","last_synced_at":"2026-04-10T06:35:30.759Z","repository":{"id":311143968,"uuid":"1042345378","full_name":"maexled/vite-vue-openapi-template","owner":"maexled","description":"A modern full-stack template using Vue 3, Vuetify, Hono, Chanfana + openapi-ts, TanStack Query, Drizzle ORM, Zod, and i18n. Features type-safe API contracts, code generation, and seamless integration between frontend and backend.","archived":false,"fork":false,"pushed_at":"2025-08-22T10:24:28.000Z","size":159,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-22T12:33:56.822Z","etag":null,"topics":["chanfana","cloudflare","cloudflare-workers","drizzle-orm","hono","i18n","openapi","openapi-ts","openapi3","tanstack-query","template","vite","vue","vue3","vuetify","wrangler","zod"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maexled.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-08-21T21:44:28.000Z","updated_at":"2025-08-22T11:39:04.000Z","dependencies_parsed_at":"2025-08-22T12:34:03.201Z","dependency_job_id":"ac7de6be-0683-447f-bddc-e51bd9359752","html_url":"https://github.com/maexled/vite-vue-openapi-template","commit_stats":null,"previous_names":["maexled/vite-vue-openapi-template"],"tags_count":null,"template":true,"template_full_name":null,"purl":"pkg:github/maexled/vite-vue-openapi-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maexled%2Fvite-vue-openapi-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maexled%2Fvite-vue-openapi-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maexled%2Fvite-vue-openapi-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maexled%2Fvite-vue-openapi-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maexled","download_url":"https://codeload.github.com/maexled/vite-vue-openapi-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maexled%2Fvite-vue-openapi-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272758439,"owners_count":24988239,"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","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["chanfana","cloudflare","cloudflare-workers","drizzle-orm","hono","i18n","openapi","openapi-ts","openapi3","tanstack-query","template","vite","vue","vue3","vuetify","wrangler","zod"],"created_at":"2025-08-29T20:33:23.312Z","updated_at":"2025-12-30T20:06:32.650Z","avatar_url":"https://github.com/maexled.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Vite Vue OpenAPI Template\n\n\u003eThis template provides a modern, full-stack starter for building Vue 3 apps with a typed backend and frontend, using OpenAPI and code generation for seamless integration.\n\n## Tech Stack\n\n- **Vue 3** — The progressive JavaScript framework for building user interfaces\n- **Vuetify** — Material Design component framework for Vue\n- **Hono** — Super-fast, lightweight web framework for the backend (API)\n- **Chanfana** + **openapi-ts** — OpenAPI contract-first backend (Chanfana) and code generation for both backend and frontend (openapi-ts)\n- **TanStack Query** — Powerful async state management for data fetching and caching\n- **Drizzle ORM** — Type-safe SQL ORM for database access\n- **Zod** — TypeScript-first schema validation\n- **vue-i18n** — Internationalization plugin for Vue\n\n---\n\n## Getting Started\n\n### 1. Install dependencies\n\n```sh\nnpm install\n```\n\n### 2. Create a D1 Database\n\nThis template uses [Cloudflare D1](https://developers.cloudflare.com/d1/) as the database. You must create a D1 database in your Cloudflare account.\n\n1. Create the database using Wrangler:\n\n\t```sh\n\tnpx wrangler d1 create vite-vue-openapi-template-db\n\t```\n\n\tThis will output a `database_id`.\n2. Copy the generated `database_id`\n3. Replace `replace_with_your_database_id` in `wrangler.jsonc` with your actual database ID:\n\n```jsonc\n\"d1_databases\": [\n\t{\n\t\t\"binding\": \"DB\",\n\t\t\"database_name\": \"vite-vue-openapi-template-db\",\n\t\t\"database_id\": \"your_database_id_here\",\n\t\t\"migrations_dir\": \"migrations\"\n\t}\n]\n```\n\n### 3. Apply Migrations\n\n#### Locally (for development)\n\n```sh\nnpm run seedLocalD1\n```\n\n#### Remote (Cloudflare D1)\n\n```sh\nnpm run predeploy\n```\n\n---\n\n### 4. Generate OpenAPI Client \u0026 Types\n\nThis project uses [Chanfana](https://chanfana.pages.dev/) to expose your API as OpenAPI, and [openapi-ts](https://github.com/hey-api/openapi-ts) to generate fully typed API clients, Zod schemas, and TanStack Query hooks from your OpenAPI spec.\n\n```sh\nnpm run generate\n```\n\nThis will:\n- Generate TypeScript types and Zod schemas for your API\n- Generate TanStack Query hooks for easy data fetching\n- Keep your frontend and backend in sync with your API definition\n\n---\n\n### 5. Start the Development Server\n\n```sh\nnpm run dev\n```\n\n---\n\n## Using TanStack Query with openapi-ts\n\nThe generated TanStack Query hooks (in `src/client/@tanstack/`) make it easy to fetch and mutate data with full type safety. Example usage:\n\n```ts\nimport { useQuery } from '@tanstack/vue-query';\nimport { getTodosOptions } from '@/client/@tanstack/vue-query.gen';\n\nconst { data, isLoading } = useQuery(getTodosOptions());\n```\n\nMutations are just as easy:\n\n```ts\nimport { useMutation, useQueryClient } from '@tanstack/vue-query';\nimport { createTodoMutation, getTodosQueryKey } from '@/client/@tanstack/vue-query.gen';\n\nconst queryClient = useQueryClient();\nconst { mutate } = useMutation({\n\t...createTodoMutation(),\n\tonSuccess: () =\u003e queryClient.invalidateQueries({ queryKey: getTodosQueryKey() }) // refetch all todos\n});\n```\n\n---\n\n## Internationalization (i18n)\n\nTranslations are managed in `src/locales/`. Use the `LanguageSwitcher` component to allow users to change languages at runtime.\n\n---\n\n## Customization\n\n- [Define the endpoints with Chanfana](https://chanfana.pages.dev/endpoints/defining-endpoints) and generate the OpenAPI specification with `npm run generate`. This will output the schema in the root folder under `schema.json`. OpenAPI-TS then generates the client code for the frontend.\n- Update database schema in `server/db/schema.ts` and run migrations\n- Customize UI with Vuetify themes in `src/plugins/vuetify.ts`\n\n---\n\n## Scripts\n\n- `npm run dev` — Start development server\n- `npm run build` — Build for production\n- `npm run generate` — Generate OpenAPI client/types/hooks based on Chanfana endpoints\n- `npm run seedLocalD1` — Apply DB migrations locally\n- `npm run predeploy` — Apply DB migrations remotely\n- `npm run test` — Run tests\n\n---\n\n## Credits\n\nThis template brings together the best of modern full-stack TypeScript development:\n\n- [Vue 3](https://vuejs.org/)\n- [Vuetify](https://vuetifyjs.com/)\n- [Hono](https://hono.dev/)\n- [OpenAPI](https://www.openapis.org/)\n- [openapi-ts](https://github.com/hey-api/openapi-ts)\n- [TanStack Query](https://tanstack.com/query/latest)\n- [Drizzle ORM](https://orm.drizzle.team/)\n- [Zod](https://zod.dev/)\n- [vue-i18n](https://vue-i18n.intlify.dev/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaexled%2Fvite-vue-openapi-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaexled%2Fvite-vue-openapi-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaexled%2Fvite-vue-openapi-template/lists"}