Vue Starter

:poodle: A boilerplate for HTML5, Vue, Vue Router, UnoCSS, Vite, Vitest, and Netlify.

Table of Contents

• Project Setup
• Key Features
• Dockerization
• Configuration
• Examples
• Directory Structure
• Microservices

Project Setup

Follow steps to execute this boilerplate.

Install dependencies

$ pnpm install

Compiles and hot-reloads for development

$ pnpm serve

Compiles and minifies for production

$ pnpm build

Lints and fixes files

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

$ pnpm lint

Runs unit tests

Files: src/**/*.spec.js

$ pnpm unit

Runs end-to-end tests

Files: e2e/**/*.spec.js

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

# If it's not setup, run it.
$ pnpm setup

$ pnpm e2e

Measures site's URLs

Files: e2e/**/*.meas.js

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

# If it's not setup, run it.
$ pnpm setup

$ pnpm meas

Mock requests

mock/requests is a fork of Fastify-Starter that was made easy and quick way to run mock APIs locally.

# If it's not active, run it.
$ pnpm active

$ pnpm mock

Key Features

This seed repository provides the following features:

• ---------- Essentials ----------
• [x] Vue
• [x] Vue Router
• [x] Vue Localer - Internationalization
• [x] Vue Formor - Form Validation
• ---------- Tools ----------
• [x] Vite
• [x] UnoCSS
• [x] Iconify
• [ ] Workbox
• [x] ESLint
• [x] Prettier
• [x] Vitest
• [ ] Playwright
• [ ] Lighthouse
• ---------- Environments ----------
• [x] Node.js
• [x] Pnpm
• [x] Caddy
• [ ] Netlify

Dockerization

Dockerize an application.

1. Build and run the container in the background

$ docker-compose up -d default

2. Run a command in a running container

$ docker-compose exec default <COMMAND>

3. Remove the old container before creating the new one

$ docker-compose rm -fs

4. Restart up the container in the background

$ docker-compose up -d --build default

Configuration

Control the environment.

Default environments

Set your local environment variables. (use this.<ENV_NAME> = process.env.<ENV_NAME> || <LOCAL_ENV>;)

// env.js

function Environment() {
  this.API_URL = process.env.API_URL ?? 'http://localhost:3000';
}

export default new Environment();

Continuous integration environments

Add environment variables to the CircleCI build.

CODECOV_TOKEN=xxx

Continuous deployment environments

Add environment variables to the Netlify build.

API_URL=http://api.example.com

File-based environments

If you want to set environment variables from a file.

.
├── e2e
├── envs
│   ├── dev.js
│   ├── stage.js
│   └── prod.js
├── mock
├── public
└── src

// envs/<ENV_NAME>.js

function Environment() {
  this.API_URL = 'http://api.example.com';
}

module.exports = new Environment();

$ pnpm add env-cmd -D

// package.json

  "scripts": {
    // "env-cmd -f ./envs/<ENV_NAME>.js" + "pnpm build"
    "build:dev": "env-cmd -f ./envs/dev.js pnpm build",
    "build:stage": "env-cmd -f ./envs/stage.js pnpm build",
    "build:prod": "env-cmd -f ./envs/prod.js pnpm build",
  },

SEO friendly

Netlify comes with built-in prerendering. Enabling it is as simple as checking a box:

VS Code settings

The most basic configuration.

{
  // ...
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "javascript.validate.enable": false,
  "css.validate": false,
  "vetur.validation.template": false,
  "vetur.validation.script": false,
  "vetur.validation.style": false,
  // ...
}

Examples

• Hello World
• CRUD Operations
• Authentication
• File Uploads
• Realtime Data

Directory Structure

The structure follows the LIFT Guidelines.

.
├── src
│   ├── __tests__
│   │   └── ...
│   ├── _<THING>  -> app of private or protected things
│   │   └── ...
│   ├── assets  -> datas, fonts, images, medias, styles
│   │   └── ...
│   ├── core  -> core feature module
│   │   └── ...
│   ├── <FEATURE>  -> feature modules
│   │   ├── __tests__
│   │   │   ├── <FEATURE>.spec.js
│   │   │   ├── actions.spec.js
│   │   │   └── getters.spec.js
│   │   ├── _<THING>  -> feature of private or protected things
│   │   │   └── ...
│   │   ├── <FEATURE>.vue  -> page component
│   │   ├── actions.js
│   │   ├── constants.js
│   │   └── getters.js
│   ├── <GROUP>  -> module group
│   │   └── <FEATURE>  -> feature modules
│   │       ├── __tests__
│   │       │   ├── <FEATURE>.spec.js
│   │       │   ├── actions.spec.js
│   │       │   └── getters.spec.js
│   │       ├── _<THING>  -> feature of private or protected things
│   │       │   └── ...
│   │       ├── <FEATURE>.vue  -> page component
│   │       ├── actions.js
│   │       ├── constants.js
│   │       └── getters.js
│   ├── shared  -> shared feature module
│   │   └── ...
│   ├── App.vue
│   ├── Home.vue
│   └── main.js  -> entrypoint
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .prettierrc
├── Caddyfile
├── circle.yml
├── docker-compose.yml
├── Dockerfile
├── env.js
├── index.html
├── jest.config.js
├── LICENSE
├── netlify.toml
├── package.json
├── README.md
└── vite.config.js

Microservices

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.

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