{"id":16590657,"url":"https://github.com/shyam-chen/vue-starter","last_synced_at":"2025-04-04T07:07:16.856Z","repository":{"id":22756752,"uuid":"97235790","full_name":"Shyam-Chen/Vue-Starter","owner":"Shyam-Chen","description":":poodle: A boilerplate for web applications with Vue and Tailwind using TypeScript on Vite.","archived":false,"fork":false,"pushed_at":"2024-10-24T06:46:47.000Z","size":7663,"stargazers_count":199,"open_issues_count":0,"forks_count":50,"subscribers_count":15,"default_branch":"main","last_synced_at":"2024-10-25T01:57:12.059Z","etag":null,"topics":["html5","render","typescript","vite","vitest","vue"],"latest_commit_sha":null,"homepage":"https://vue-starter-6fa6.onrender.com","language":"Vue","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/Shyam-Chen.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}},"created_at":"2017-07-14T13:19:17.000Z","updated_at":"2024-10-24T06:46:50.000Z","dependencies_parsed_at":"2023-09-21T18:18:59.667Z","dependency_job_id":"8c1a6301-e63b-4671-8d4b-040f60a3f5f2","html_url":"https://github.com/Shyam-Chen/Vue-Starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shyam-Chen%2FVue-Starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shyam-Chen%2FVue-Starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shyam-Chen%2FVue-Starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shyam-Chen%2FVue-Starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Shyam-Chen","download_url":"https://codeload.github.com/Shyam-Chen/Vue-Starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135144,"owners_count":20889421,"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":["html5","render","typescript","vite","vitest","vue"],"created_at":"2024-10-11T23:13:52.691Z","updated_at":"2025-04-04T07:07:16.840Z","avatar_url":"https://github.com/Shyam-Chen.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Starter\n\n:poodle: A boilerplate for web applications with Vue and Tailwind using TypeScript on Vite.\n\n:rainbow: View Demo: [Live](https://vue-starter-6fa6.onrender.com) | Windows | macOS | Android | iOS\n\n:octocat: Source Code: [Web-side](https://github.com/Shyam-Chen/Vue-Starter) | [Native-side](https://github.com/Shyam-Chen/Tauri-Starter) | [Server-side](https://github.com/Shyam-Chen/Fastify-Starter) | [Cloud-side](https://github.com/Shyam-Chen/Pulumi-Starter)\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Project Setup](#project-setup)\n- [Key Features](#key-features)\n- [Configuration](#configuration)\n- [Directory Structure](#directory-structure)\n\n## Getting Started\n\nPrerequisites:\n\n- Node.js v20\n- PNPM v9\n\nGet started with Vue Starter.\n\n```sh\n# install dependencies\n$ pnpm install\n\n# dev server (in one terminal)\n$ pnpm dev\n\n# mock server (in another terminal)\n$ pnpm mock\n```\n\nOr use barebones scaffolding for your new Vue app\n\n```sh\n$ pnpm dlx degit Shyam-Chen/Barebones-Templates/vue my-vue-app\n```\n\n## Project Setup\n\nFollow steps to execute this boilerplate.\n\n### Install dependencies\n\n```sh\n$ pnpm install\n```\n\n### Compiles and hot-reloads for development\n\n```sh\n$ pnpm dev\n```\n\n### Mock APIs during development\n\n```sh\n$ pnpm mock\n```\n\n### Compiles and minifies for production\n\n```sh\n$ pnpm build\n```\n\n### Locally preview the production build\n\n```sh\n$ pnpm preview\n```\n\n### Lints and fixes files\n\n```sh\n$ pnpm lint\n```\n\n### Check types\n\n```sh\n$ pnpm check\n```\n\n### Runs unit tests\n\n```sh\n$ pnpm test\n```\n\n### Runs end-to-end tests\n\n```sh\n$ pnpm e2e\n```\n\n## Key Features\n\nThis seed repository provides the following features:\n\n- ---------- **Essentials** ----------\n- [x] [Vue](https://github.com/vuejs/vue) - User Interface Framework\n- [x] [Router](https://github.com/vuejs/vue-router) - Routing\n- [x] [Routes](https://github.com/Vanilla-IceCream/vite-plugin-vue-routes) - File-based Routing\n- [x] [Storer](https://github.com/Vanilla-IceCream/vue-storer) - State Management\n- [x] [Formor](https://github.com/Vanilla-IceCream/vue-formor) - Form Validation\n- [x] [Valibot](https://github.com/fabian-hiller/valibot) - Schema Validation\n- [x] [Localer](https://github.com/Vanilla-IceCream/vue-localer) - Internationalization and Localization\n- [x] [Use](https://github.com/vueuse/vueuse) - Composition Utilities\n- [x] [Qrcode Image](https://github.com/Vanilla-IceCream/vue-qrcode-image) - QR Code Generation\n- [x] [Lodash](https://github.com/lodash/lodash) - JavaScript Utilities\n- [x] [Date Fns](https://github.com/date-fns/date-fns) - Date Utilities\n- [x] [UnoCSS](https://github.com/unocss/unocss) - CSS Utilities\n- [x] [Iconify](https://github.com/iconify/iconify) - Icon Utilities\n- [x] [Tiptap](https://github.com/ueberdosis/tiptap) - Rich Text Editor\n- [x] [ECharts](https://github.com/apache/echarts) - Data Visualization\n- ---------- **Tools** ----------\n- [x] [Vite](https://github.com/vitejs/vite) - Bundler\n- [x] [TypeScript](https://github.com/microsoft/TypeScript) - JavaScript with Syntax for Types\n- [x] [Sassy CSS](https://github.com/sass/sass) - CSS Extension\n- [x] [ESLint](https://github.com/eslint/eslint) - Linter\n- [x] [Prettier](https://github.com/prettier/prettier) - Formatter\n- [x] [Vitest](https://github.com/vitest-dev/vitest) - Test Runner\n- [x] [Playwright](https://github.com/microsoft/playwright) - Test Automation\n- ---------- **Environments** ----------\n- [x] [Node.js](https://nodejs.org/en/) - JavaScript Runtime Environment\n- [x] [Pnpm](https://pnpm.io/) - Package Manager\n- [x] [Caddy](https://caddyserver.com/) - Web Server\n- [x] [Docker](https://www.docker.com/) - Containerized Application Development\n- [x] [GitHub Actions](https://github.com/features/actions) - Continuous Integration and Delivery\n- [x] [Render](https://render.com/) - Cloud Application Hosting\n\n## Configuration\n\nControl the environment.\n\n### Default environments\n\nSet your local environment variables.\n\n```ts\n// vite.config.ts\n  define: envify({\n    API_URL: process.env.API_URL || '',\n  }),\n```\n\n### Continuous integration environments\n\nAdd environment secrets to the GitHub Actions workflow.\n\n```sh\nDEPLOY_HOOK=xxx\n```\n\n### Continuous delivery environments\n\nAdd environment variables to the Render build.\n\n```sh\nAPI_URL=xxx\n```\n\n### Container registry\n\nPush the image to your registry.\n\n```sh\n$ docker build -f ./.github/registry/Dockerfile \\\n               --build-arg SITE_ADDRESS=$SITE_ADDRESS \\\n               -t $SITE_NAME .\n\n$ docker tag $SITE_NAME $REGISTRY_URL\n\n$ docker push $REGISTRY_URL\n```\n\n## Directory Structure\n\nThe structure follows the LIFT Guidelines.\n\n```coffee\n.\n├── .github\n├── app\n│   ├── public\n│   ├── src\n│   │   ├── assets\n│   │   ├── components\n│   │   ├── composables\n│   │   ├── layouts\n│   │   ├── locales\n│   │   ├── middleware\n│   │   ├── plugins\n│   │   ├── routes\n│   │   ├── utilities\n│   │   ├── workers\n│   │   ├── App.vue\n│   │   ├── main.ts\n│   │   └── shims.d.ts\n│   ├── index.html\n│   ├── package.json\n│   ├── tsconfig.json\n│   └── vite.config.ts\n├── e2e -\u003e End-to-end testing of web pages\n│   ├── src\n│   ├── package.json\n│   ├── playwright.config.ts\n│   └── tsconfig.json\n├── mock -\u003e Mock backend API\n│   ├── src\n│   ├── package.json\n│   ├── tsconfig.json\n│   └── vite.config.ts\n├── ui -\u003e Design system\n│   ├── src\n│   ├── package.json\n│   ├── tsconfig.json\n│   └── vite.config.ts\n├── .dockerignore\n├── .editorconfig\n├── .gitignore\n├── Caddyfile\n├── compose.yaml\n├── Dockerfile\n├── eslint.config.js\n├── package.json\n├── pnpm-lock.yaml\n├── pnpm-workspace.yaml\n├── prettier.config.js\n├── README.md\n└── render.yaml\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshyam-chen%2Fvue-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshyam-chen%2Fvue-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshyam-chen%2Fvue-starter/lists"}