Vue Starter
Table of Contents
Project Setup
Follow steps to execute this boilerplate.
Install dependencies
$ yarn install
Compiles and hot-reloads for development
$ yarn serve
Compiles and minifies for production
$ yarn build
Lints and fixes files
Files: src/**/*.{js,vue}
$ yarn lint
Runs unit tests
Files: src/**/*.spec.js
$ yarn unit
Runs end-to-end tests
Files: e2e/**/*.spec.js
# Before running the `e2e` command, make sure to run the following commands.
$ yarn build
$ yarn preview
# If it's not setup, run it.
$ yarn setup
$ yarn e2e
Measures site's URLs
Files: e2e/**/*.meas.js
# Before running the `meas` command, make sure to run the following commands.
$ yarn build
$ yarn preview
# If it's not setup, run it.
$ yarn setup
$ yarn meas
Mock requests
mock/requests
is a fork of Koa-Starter that was made easy and quick way to run mock APIs locally.
# If it's not active, run it.
$ yarn active
$ yarn mock
Key Features
This seed repository provides the following features:
- ---------- Essentials ----------
- Vue
- Vue Router
- Vue Localer
- Vue Formor
- ---------- Tools ----------
- Vite
- Windi CSS
- Iconify
- Workbox
- ESLint
- Prettier
- Jest
- Playwright
- Lighthouse
- ---------- Environments ----------
- Node.js
- Yarn
- Caddy
- Netlify
- Capacitor (
git merge capacitor --squash
) - Electron (
git merge electron --squash
)
Dockerization
Dockerize an application.
- Build and run the container in the background
$ docker-compose up -d default
- Run a command in a running container
$ docker-compose exec default <COMMAND>
- Remove the old container before creating the new one
$ docker-compose rm -fs
- 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.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/
.js
function Environment() {
this.API_URL = 'http://api.example.com';
}
module.exports = new Environment();
$ yarn add env-cmd -D
// package.json "scripts": { // "env-cmd -f ./envs/.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,
// ...
}
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
βββ yarn.lock
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.
Bump acorn from 5.7.3 to 5.7.4
Bumps acorn from 5.7.3 to 5.7.4.
Commits
6370e90
Mark version 5.7.4fbc15b1
More rigorously check surrogate pairs in regexp validatorDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump codecov from 3.6.4 to 3.6.5
Bumps codecov from 3.6.4 to 3.6.5.
Commits
Maintainer changes
This version was pushed to npm by drazisil, a new releaser for codecov since your current version.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Optimize Internationalization
Lazy loading - Splitting different languages for feature modules
https://github.com/kazupon/vue-i18n/issues/317 https://github.com/kazupon/vue-i18n/issues/677
Bump browserslist from 4.16.3 to 4.21.2 in /e2e
Bumps browserslist from 4.16.3 to 4.21.2.
Changelog
Sourced from browserslist's changelog.
... (truncated)
Commits
f61c1a3
Release 4.21.2 version8cd0597
Update Firefox ESR834ca86
Update dependencies066c0fa
Release 4.21.1 version61baae0
Fix since query7ebd936
Update dependencies9a65b83
Typof11fbe5
Improve tools note9d867be
Release 4.21 version1dd18ef
Fix ChangeLog styleDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump terser from 4.8.0 to 4.8.1 in /mock/requests
Bumps terser from 4.8.0 to 4.8.1.
Changelog
Sourced from terser's changelog.
Commits
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump jpeg-js from 0.4.3 to 0.4.4 in /e2e
Bumps jpeg-js from 0.4.3 to 0.4.4.
Release notes
Sourced from jpeg-js's releases.
Commits
9ccd35f
fix: validate sampling factors (#106)b58cc11
fix(decoder): rethrow a more helpful error if Buffer is undefined (#93)2c90858
chore(deps): bump y18n from 4.0.0 to 4.0.3 (#98)fd73289
chore(deps): bump ws from 7.2.3 to 7.4.6 (#91)9449a8b
chore(deps): bump hosted-git-info from 2.8.8 to 2.8.9 (#90)ffdc4a4
chore(deps): bump lodash from 4.17.15 to 4.17.21 (#89)13e1ffa
feat: add comment tag encoding (#87)417e8e2
chore(ci): migrate to github actions (#86)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump ansi-regex from 4.1.0 to 4.1.1 in /e2e
Bumps ansi-regex from 4.1.0 to 4.1.1.
Commits
64735d2
v4.1.175a657d
Fix potential ReDoS (#37)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump ansi-regex from 4.1.0 to 4.1.1 in /mock/requests
Bumps ansi-regex from 4.1.0 to 4.1.1.
Commits
64735d2
v4.1.175a657d
Fix potential ReDoS (#37)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump minimist from 1.2.5 to 1.2.6 in /e2e
Bumps minimist from 1.2.5 to 1.2.6.
Commits
7efb22a
1.2.6ef88b93
security notice for additional prototype pollution issuec2b9819
isConstructorOrProto adapted from PRbc8ecee
test from prototype pollution PRDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump minimist from 1.2.5 to 1.2.6 in /mock/requests
Bumps minimist from 1.2.5 to 1.2.6.
Commits
7efb22a
1.2.6ef88b93
security notice for additional prototype pollution issuec2b9819
isConstructorOrProto adapted from PRbc8ecee
test from prototype pollution PRDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.
Commits
7efb22a
1.2.6ef88b93
security notice for additional prototype pollution issuec2b9819
isConstructorOrProto adapted from PRbc8ecee
test from prototype pollution PRDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.