๐ฉ A boilerplate for SPA Client with HTML5, Vue, and Tailwind on Vite.
๐ View Demo: Live | Windows | macOS | Android | iOS
Source Code: Web-side | Native-side | Server-side
Prerequisites:
- Node.js v20
- PNPM v8
Get started with Vue Starter.
# install dependencies
$ pnpm install
# dev server (in one terminal)
$ pnpm dev
# mock server (in another terminal)
$ pnpm mock
Or use barebones scaffolding for your new Vue app
$ pnpm dlx degit Shyam-Chen/Starter-Templates/vue my-vue-app
Follow steps to execute this boilerplate.
$ pnpm install
$ pnpm dev
$ pnpm mock
$ pnpm build
$ pnpm preview
Biome CLI
# format
$ pnpm biome format ./app ./ui ./mock ./e2e --write
# lint
$ pnpm biome lint ./app ./ui ./mock ./e2e
# format, lint & sort
$ pnpm biome check --apply ./app ./ui ./mock ./e2e
$ pnpm check
$ pnpm test
$ pnpm e2e
This seed repository provides the following features:
- ---------- Essentials ----------
- Vue - User Interface Framework
- Router - Routing
- Routes - File-based Routing
- Storer - State Management
- Formor - Form Validation
- Valibot - Schema Validation
- Localer - Internationalization and Localization
- Use - Composition Utilities
- Qrcode Image - QR Code Generation
- Lodash - JavaScript Utilities
- Date Fns - Date Utilities
- UnoCSS - CSS Utilities
- Iconify - Icon Utilities
- Tiptap - Rich Text Editor
- ECharts - Data Visualization
- ---------- Tools ----------
- Vite - Bundler
- TypeScript - JavaScript with Syntax for Types
- Sassy CSS - CSS Extension
- Biome - Formatter and Linter
- ESLint - Linter
- Prettier - Formatter
- Vitest - Test Runner
- Playwright - Test Automation
- ---------- Environments ----------
- Node.js - JavaScript Runtime Environment
- Pnpm - Package Manager
- Caddy - Web Server
- Docker - Containerized Application Development
- GitHub Actions - Continuous Integration and Delivery
- Render - Cloud Application Hosting
Control the environment.
Set your local environment variables.
// vite.config.ts
define: envify({
API_URL: process.env.API_URL || '',
}),
Add environment secrets to the GitHub Actions workflow.
DEPLOY_HOOK=xxx
Add environment variables to the Render build.
API_URL=xxx
The structure follows the LIFT Guidelines.
.
โโโ .github/workflows/ci.yml
โโโ app
โ โโโ public
โ โโโ src
โ โ โโโ assets
โ โ โโโ components
โ โ โโโ composables
โ โ โโโ layouts
โ โ โโโ locales
โ โ โโโ middleware
โ โ โโโ plugins
โ โ โโโ routes
โ โ โโโ utilities
โ โ โโโ workers
โ โ โโโ App.vue
โ โ โโโ main.ts
โ โ โโโ shims.d.ts
โ โโโ index.html
โ โโโ package.json
โ โโโ tsconfig.json
โ โโโ vite.config.ts
โโโ e2e
โ โโโ src
โ โโโ package.json
โ โโโ playwright.config.ts
โ โโโ tsconfig.json
โโโ mock
โ โโโ src
โ โโโ package.json
โ โโโ tsconfig.json
โ โโโ vite.config.ts
โโโ ui
โ โโโ src
โ โโโ package.json
โ โโโ tsconfig.json
โ โโโ vite.config.ts
โโโ .editorconfig
โโโ .eslintrc
โโโ .gitignore
โโโ .prettierrc
โโโ biome.json
โโโ Caddyfile
โโโ compose.yaml
โโโ Dockerfile
โโโ package.json
โโโ pnpm-lock.yaml
โโโ pnpm-workspace.yaml
โโโ README.md
โโโ render.yaml