alidogu / Vue-Starter-main

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

Getting Started

Prerequisites:

• Node.js v20
• PNPM v8

Get started with Vue Starter.

$ pnpm install

# dev server
$ pnpm dev

# mock server
$ pnpm mock

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 ----------
• 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 Editor - Rich Text Editor Utilities
• D3 - Data Visualization Utilities
• ---------- Tools ----------
• Vite - Bundler
• TypeScript - JavaScript with Syntax for Types
• Sassy CSS - CSS Extension
• 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

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

Directory Structure

The structure follows the LIFT Guidelines.

.
├── .github/workflows/ci.yml
├── api
├── e2e
├── public
├── src
│   ├── assets
│   ├── components
│   ├── composables
│   ├── layouts
│   ├── locales
│   ├── middleware
│   ├── plugins
│   ├── routes
│   ├── utilities
│   ├── App.vue
│   ├── main.ts
│   └── shims.d.ts
├── ui
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .prettierrc
├── Caddyfile
├── docker-compose.yml
├── Dockerfile
├── index.html
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── README.md
├── render.yaml
├── tsconfig.json
└── vite.config.ts