:poodle: A boilerplate for web apps with Vue and Tailwind using TypeScript on Vite.
:poodle: A boilerplate for SPA Client with HTML5, Vue, and Tailwind on Vite.
:rainbow: View Demo: Live | Windows | macOS | Android | iOS
:octocat: Source Code: Web-side | Native-side | Server-side
Prerequisites:
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
$ pnpm biome check --apply ./app ./ui ./mock ./e2e
$ pnpm check
$ pnpm test
$ pnpm e2e
This seed repository provides the following features:
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
├── docs -> Write documentation with VitePress
│ ├── .vitepress
│ ├── index.md
│ ├── package.json
│ └── vite.config.ts
├── e2e -> End-to-end testing of web pages
│ ├── src
│ ├── package.json
│ ├── playwright.config.ts
│ └── tsconfig.json
├── infra -> Infrastructure as code
│ ├── src
│ ├── package.json
│ ├── Pulumi.yaml
│ └── tsconfig.json
├── mock -> Mock backend API
│ ├── src
│ ├── package.json
│ ├── tsconfig.json
│ └── vite.config.ts
├── ui -> Design system
│ ├── 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