Vue Starter

🐩 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

Table of Contents

• Getting Started
• Project Setup
• Key Features
• Configuration
• Directory Structure

Getting Started

Prerequisites:

• Node.js v20
• PNPM v9

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

Project Setup

Follow steps to execute this boilerplate.

Install dependencies

$ pnpm install

Compiles and hot-reloads for development

$ pnpm dev

Mock APIs during development

$ pnpm mock

Compiles and minifies for production

$ pnpm build

Locally preview the production build

$ pnpm preview

Lints and fixes files

$ pnpm lint

Check types

$ pnpm check

Runs unit tests

$ pnpm test

Runs end-to-end tests

$ pnpm e2e

Key Features

This seed repository provides the following features:

• ---------- Essentials ----------
• [x] Vue - User Interface Framework
• [x] Router - Routing
• [x] Routes - File-based Routing
• [x] Storer - State Management
• [x] Formor - Form Validation
• [x] Valibot - Schema Validation
• [x] Localer - Internationalization and Localization
• [x] Use - Composition Utilities
• [x] Qrcode Image - QR Code Generation
• [x] Lodash - JavaScript Utilities
• [x] Date Fns - Date Utilities
• [x] UnoCSS - CSS Utilities
• [x] Iconify - Icon Utilities
• [x] Tiptap - Rich Text Editor
• [x] ECharts - Data Visualization
• ---------- Tools ----------
• [x] Vite - Bundler
• [x] TypeScript - JavaScript with Syntax for Types
• [x] Sassy CSS - CSS Extension
• [x] ESLint - Linter
• [x] Prettier - Formatter
• [x] Vitest - Test Runner
• [x] Playwright - Test Automation
• ---------- Environments ----------
• [x] Node.js - JavaScript Runtime Environment
• [x] Pnpm - Package Manager
• [x] Caddy - Web Server
• [x] Docker - Containerized Application Development
• [x] GitHub Actions - Continuous Integration and Delivery
• [x] Render - Cloud Application Hosting

Configuration

Control the environment.

Default environments

Set your local environment variables.

// vite.config.ts
  define: envify({
    API_URL: process.env.API_URL || '',
  }),

Continuous integration environments

Add environment secrets to the GitHub Actions workflow.

DEPLOY_HOOK=xxx

Continuous delivery environments

Add environment variables to the Render build.

API_URL=xxx

Container registry

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

Directory Structure

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