Skip to content

🐩 A boilerplate for web applications with Vue and Tailwind using TypeScript on Vite.

Notifications You must be signed in to change notification settings

Shyam-Chen/Vue-Starter

Repository files navigation

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

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:

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

About

🐩 A boilerplate for web applications with Vue and Tailwind using TypeScript on Vite.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages