A boilerplate for web applications with Vue and Tailwind using TypeScript on Vite.
π© A boilerplate for web applications with Vue and Tailwind using TypeScript on Vite.
π View Demo: Live | Windows | macOS | Android | iOS
:octocat: Source Code: Web-side | Native-side | Server-side | Cloud-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/Barebones-Templates/vue my-vue-app
Follow steps to execute this boilerplate.
$ pnpm install
$ pnpm dev
$ pnpm mock
$ pnpm build
$ pnpm preview
$ pnpm lint
$ 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
Push the image to your registry.
$ docker build -f ./.github/registry/Dockerfile \
--build-arg SITE_ADDRESS=$SITE_ADDRESS \
-t $SITE_NAME .
$ docker tag $SITE_NAME $REGISTRY_URL
$ docker push $REGISTRY_URL
The structure follows the LIFT Guidelines.
.
βββ .github
βββ 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 -> End-to-end testing of web pages
β βββ src
β βββ package.json
β βββ playwright.config.ts
β βββ 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
βββ .dockerignore
βββ .editorconfig
βββ .gitignore
βββ Caddyfile
βββ compose.yaml
βββ Dockerfile
βββ eslint.config.js
βββ package.json
βββ pnpm-lock.yaml
βββ pnpm-workspace.yaml
βββ prettier.config.js
βββ README.md
βββ render.yaml