Vue Starter

🐩 A boilerplate for HTML5, Vue, TypeScript, Vite, Vitest, and Render.

🌈 Live Demo - The server application is here.

Table of Contents

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

Getting Started

Get started with Vue Starter.

# dev server
$ pnpm install
$ pnpm dev

# mock server
$ cd mock/requests && pnpm install && cd ../..
$ pnpm mock

Project Setup

Follow steps to execute this boilerplate.

Install dependencies

$ pnpm install

Compiles and hot-reloads for development

$ pnpm dev

Compiles and minifies for production

$ pnpm build

Locally preview the production build

# Before running the `preview` command, make sure to run the following commands.
$ pnpm build

$ pnpm preview

Lints and fixes files

Files: src/**/*.{ts,vue}

$ pnpm lint

Runs unit tests

Files: src/**/*.spec.ts

$ pnpm unit

Runs end-to-end tests

Files: e2e/**/*.spec.ts

# Before running the `e2e` command, make sure to run the following commands.
$ pnpm build
$ pnpm preview

# If it's not installed, run it.
$ cd e2e && pnpm install && cd ..

$ pnpm e2e

Performance metrics

Files: benchmark/**/*.spec.ts

# Before running the `bench` command, make sure to run the following commands.
$ pnpm build
$ pnpm preview

# If it's not installed, run it.
$ cd benchmark && pnpm install && cd ..

$ pnpm bench

Mock requests/responses

# If it's not installed, run it.
$ cd mock/requests && pnpm install && cd ../..

$ pnpm mock

mock/responses can be applied to unit testing, end-to-end testing, and performance metrics.

Documentation

Files: docs/**/*.md

# If it's not installed, run it.
$ cd docs && pnpm install && cd ..

$ pnpm doc

Key Features

This seed repository provides the following features:

• ---------- Essentials ----------
• Vue - User Interface Framework
• Router - Routing
• Routes - File-based Routing
• Storer - State Management
• Formor - Form Validation
• Localer - Internationalization and Localization
• Hooks - Composition Utilities
• Lodash - JavaScript Utilities
• Zod - Schema Validation
• Date Fns - Date Utilities
• UnoCSS - CSS Utilities
• Iconify - Icon Utilities
• Highcharts - Data Visualization
• Qrcode Image - QR Code Generation
• ---------- Tools ----------
• Vite - Bundler
• TypeScript - JavaScript with Syntax for Types
• Sassy CSS - CSS Extension
• ESLint - Linter
• Prettier - Formatter
• Vitest - Test Runner
• Playwright - Test Automation
• Lighthouse - Measure Performance
• VitePress - Documentation
• ---------- Environments ----------
• Node.js - JavaScript Runtime Environment
• Pnpm - Package Manager
• Caddy - Web Server
• Docker - Containerized Application Development
• CircleCI - Continuous Integration and Delivery
• Render - Cloud Application Hosting

Configuration

Control the environment.

Default environments

Set your local environment variables.

// env.ts
export default {
  API_URL: process.env.API_URL || '',
};

Continuous integration environments

Add environment variables to the CircleCI build.

# production
DEPLOY_HOOK=xxx

# development
DEV_DEPLOY_HOOK=xxx

# staging
STAGE_DEPLOY_HOOK=xxx

Continuous delivery environments

Add environment variables to the Render build.

API_URL=xxx

Directory Structure

The structure follows the LIFT Guidelines.

.
├── .circleci
├── benchmark -> performance testing
├── docs -> site documentation
├── e2e -> e2e testing (Caddy Server serve static files and proxy mock api)
├── mock
│   ├── requests -> mock api
│   └── responses -> mock data for mock api, unit testing, and e2e testing
├── public
├── src
│   ├── assets -> data, fonts, images, medias, styles
│   ├── components -> shared module
│   ├── composables -> shared module
│   ├── layouts -> core module
│   ├── locales -> core module
│   ├── middleware -> core module
│   ├── plugins -> root module
│   ├── routes -> feature modules
│   ├── utilities -> shared module
│   ├── App.vue
│   ├── Error.vue
│   ├── main.ts
│   └── shims.d.ts
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .prettierrc
├── Caddyfile
├── docker-compose.yml
├── Dockerfile
├── env.ts
├── index.html -> entrypoint
├── LICENSE
├── package.json
├── pnpm-lock.yaml
├── README.md
├── render.yaml
├── tsconfig.json
└── vite.config.ts

Microservices

A micro-frontend architecture lays out the approach for the structural elements of a micro-frontend framework. It also defines the relationships among them, governing how UI fragments are assembled and communicate in order to achieve the optimal developer and user experience.

See Micro-Fullstack's Micro Frontends for instructions on how to create microservices from source code.

example.com
├── feature1.example.com
└── feature2.example.com