Vue Starter

🐩 A boilerplate for HTML5, Vue, Vue Router, i18n, Tailwind, Windi, Netlify, and Vite.

Table of Contents

• Getting Started
• Key Features
• Dockerization
• Configuration
• Directory Structure
• Microservices
• Frequently Asked Questions

Getting Started

Follow steps to execute this boilerplate.

1. Clone this boilerplate

$ git clone --depth 1 https://github.com/Shyam-Chen/Vue-Starter <PROJECT_NAME>
$ cd <PROJECT_NAME>

2. Install dependencies

$ yarn install

3. Compiles and hot-reloads for development

$ yarn serve

4. Compiles and minifies for production

$ yarn build

5. Lints and fixes files

File Scope: src/**/*.{vue,js,css}

$ yarn lint

6. Runs unit tests

File Scope: src/**/*.spec.js

$ yarn unit

7. Runs end-to-end tests

File Scope: src/**/*.e2e-spec.js

$ yarn build
$ yarn preview
$ yarn e2e

8. Measure app performance

File Scope: src/**/*.e2e-meas.js

$ yarn build
$ yarn preview
$ yarn meas

9. Mock requests

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

$ yarn active
$ yarn mock

Key Features

This seed repository provides the following features:

• ---------- Essentials ----------
• [x] Vue
• [x] Vue Router
• [x] Vue Localer
• ---------- Tools ----------
• [x] Vite
• [x] Windi CSS
• [x] ESLint
• [ ] StyleLint
• [x] Prettier
• [ ] Jest
• [ ] Playwright
• [ ] Lighthouse
• ---------- Environments ----------
• [x] Netlify
• [ ] Capacitor (git merge capacitor --squash)
• [ ] Electron (git merge electron --squash)

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.

.
├── 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 Environments();

$ yarn add env-cmd -D

// package.json

  "scripts": {
    // "env-cmd -f ./envs/<ENV_NAME>.js" + "yarn build"
    "build:dev": "env-cmd -f ./envs/dev.js yarn build",
    "build:stage": "env-cmd -f ./envs/stage.js yarn build",
    "build:prod": "env-cmd -f ./envs/prod.js yarn 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,
  // ...
}

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>.e2e-spec.js
│   │   │   ├── <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>.e2e-spec.js
│   │       │   ├── <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
├── .stylelintrc
├── circle.yml
├── docker-compose.yml
├── Dockerfile
├── env.js
├── index.html
├── jest.config.js
├── LICENSE
├── netlify.toml
├── package.json
├── README.md
├── vite.config.js
└── yarn.lock

Microservices

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

See Client-side Micro-Fullstack for instructions on how to create microservices from source.

Frequently Asked Questions

• HTML img src tag not displaying image

<template>
  <div>
    <img src="~~/assets/images/foo.png" alt="foo" />
  </div>
</template>

• CSS background image not displaying

<template>
  <div>
    <div class="foo"></div>
  </div>
</template>

<style scoped>
.foo {
  width: 6rem;
  height: 6rem;
  background: url('~/assets/images/foo.png') no-repeat;
}
</style>

• Vue.js dynamic images not displaying

<template>
  <div>
    <img :src="require('~/assets/images/foo.png')" alt="foo" />
  </div>
</template>