Vue 3 Boilerplate App

Project Archived

Please use the following version as a template: https://github.com/michael-255/vue3-web-app-template-2023

Post Cloning Steps

Todos

WIP

Usage
Project Information
Additional Notes

Usage

Install the project dependencies.

npm i

Launch the dev server site.

npm run dev

Build the project dist directory.

npm run build

Run tests and coverage report (press q to quit).

npm test

Build and deploy the dist directory.

npm run deploy

Check for outdated packages.

npm outdated

Update packages based on package.json version settings. Test if you update to the latest version.

npm upgrade

Project Information

Steps for adding models (classes) and fields

Adding a new model for use in the database requires some extra steps.

Create the model in ~/src/models
Update LocalDatabase with a new table for the model
Define the field enums in ~/src/constants > data-enums.ts
Update the field helpers in ~/src/helpers > *.ts
Update the table helpers in ~/src/helpers > *.ts
Create components for the input fields in ~/src/components

ES2020 Support

Support for ES2020 language features is achieved by adding es2020 to the following files.

tsconfig.vitest.json
tsconfig.vite-config.json
tsconfig.app.json

Vue 3 (+Vite)

Initialize a new Vue 3 project with Vite and follow the prompts.

npm init vue@latest

Vitest

Add the coverage flag to the test script to generate code coverage reports. You may be required to install the c8 package when you first run vitest.

// FILE: ~/package.json
"scripts": {
  "test": "vitest --environment jsdom --coverage"
}

VSCode

Recommended extensions file.

// FILE: ~/.vscode/extensions.json
{
  "recommendations": [
    // Syntax highlighting for Vue/TypeScript
    "johnsoncodehk.volar",
    "johnsoncodehk.vscode-typescript-vue-plugin",
    // JavaScript linting
    "dbaeumer.vscode-eslint",
    // CSS, LESS, SCSS linting
    "stylelint.vscode-stylelint",
    // MarkDown linting
    "DavidAnson.vscode-markdownlint",
    // Code formatting
    "esbenp.prettier-vscode",
    // Git information in editor
    "eamodio.gitlens",
    // Open server in browser
    "ritwickdey.liveserver",
    // Better VSCode icons
    "pkief.material-icon-theme"
  ]
}

Code snippets file.

// FILE: ~/.vscode/project.code-snippets
{
  "component-vue3": {
    "scope": "vue",
    "prefix": "component (vue3)",
    "description": "TypeScript component for Vue 3",
    "body": [
      "<script setup lang=\"ts\">", // 1
      "import { ref } from 'vue'", // 2
      "const data = ref('New Component')", // 3
      "</script>\n", // 4
      "<template>", // 5
      "\t<h3>{{ data }}</h3>", // 6
      "</template>\n", // 7
      "<style></style>" // 8
    ]
  },

  "imports-vitest": {
    "scope": "typescript",
    "prefix": "import (vitest imports)",
    "description": "Common imports for vitest",
    "body": "import { describe, test, expect } from 'vitest'"
  },

  "test-vitest": {
    "scope": "typescript",
    "prefix": "test (vitest func)",
    "description": "Test function for vitest",
    "body": [
      "test('${0:testing...}', () => {", // 1
      "\texpect(true).toBe(false)", // 2
      "})" // 3
    ]
  },

  "describe-vitest": {
    "scope": "typescript",
    "prefix": "describe (vitest func)",
    "description": "Describe function for vitest",
    "body": [
      "describe('${1:Example}', () => {", // 1
      "\t${0}", // 2
      "})" // 3
    ]
  },

  "beforeEach-vitest": {
    "scope": "typescript",
    "prefix": "beforeEach (vitest func)",
    "description": "BeforeEach function for vitest",
    "body": [
      "beforeEach(() => {", // 1
      "\t${0}", // 2
      "})" // 3
    ]
  }
}

Git Ignore

Good default ignore setup for this Vue 3 project.

# FILE: ~/.gitignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

# Build files
node_modules
dist
dist-ssr

# OS files
.DS_Store
Thumbs.db
desktop.ini

# Test suite files
coverage
/cypress/videos/
/cypress/screenshots/

# Editor directories and files
# .vscode/* # Leaving .vscode on purpose
# !.vscode/extensions.json # Leaving .vscode on purpose
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# dotenv environment variables file
.env
.env.test
*.local

Prettier

Create Prettier config that should work with ESLint using "eslint-config-prettier" package.

// FILE: ~/.prettierrc.js
module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: 'always',
  proseWrap: 'always',
  htmlWhitespaceSensitivity: 'css',
  vueIndentScriptAndStyle: false,
  endOfLine: 'lf',
}

Create Prettier ignore file so it won't format anything in the defined directories.

# FILE: ~/.prettierignore
/node_modules/**
/dist/**
/coverage/**
/logs/**

Gh-pages

Install gh-pages for GitHub Pages deployments.

npm i -D gh-pages

Use the following script to build and deploy your project. It makes a copy of the index.html in dist as 404.html to address complications related to routing. This let's you avoid using hash based routing.

// FILE: ~/package.json
"scripts": {
  "deploy": "npm run build && cd dist && cp index.html 404.html && cd .. && gh-pages -d dist -m Deployment"
}

Chart.js

The amazing chart.js package.

npm i chart.js

The Vue 3 wrapper for chart.js (vue-chart-3).

npm i vue-chart-3

Quasar

Install quasar and it's extras if desired (fonts, icons, etc).

npm i quasar @quasar/extras

Install the Quasar Vite plugin and SASS.

npm i -D @quasar/vite-plugin sass@1.32.0

Use the configurator tool to help setup Quasar for your specific project. It generates the files you'll need to copy over based on your selection.

https://quasar.dev/start/vite-plugin

Dexie (IndexedDB)

Using this package to store the apps data in an easy to use local DB. I've wrapped Dexie with a class called LocalDatabase in this project.

Installing the package.

npm i dexie

Hygen

Code generator that internally makes use of the inquirer (or enquirer) package.

Install the latest version globally.

npm i -g hygen

Initialize in a project only once. You should see a ~/_templates directory.

hygen init self

My Boilerplate Generators

class
util

Create a new Hygen generator with the following steps:

Create a generator NAME directory in ~/_templates
- Like class, component, or util
Create a generator ACTION directory in the NAME directory
- Like new, add, or help
Add your generator files to the ACTION directory
- *.ejf.t
- *.test.ejs.t
- index.js (if using console prompts)

You can run your generators with the following command.

hygen {NAME} {ACTION}

You can run your ACTION help files with the following command.

hygen {NAME} help

Services

Services you can reuse in other projects located at ~/src/services/*

LocalDatabase
LocalStorage
Logger

Utils

Utilities you can reuse in other projects located at ~/src/utils/*

Additional Notes

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

Disable the built-in TypeScript Extension
1. Run Extensions: Show Built-in Extensions from VSCode's command palette
2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

michael-255/vue3-boilerplate-app

Vue 3 Boilerplate App

Post Cloning Steps

Todos

Table of Contents

Usage

Project Information

Steps for adding models (classes) and fields

ES2020 Support

Vue 3 (+Vite)

Vitest

VSCode

Git Ignore

Prettier

Gh-pages

Chart.js

Quasar

Dexie (IndexedDB)

Hygen

Services

Utils

Additional Notes

Recommended IDE Setup

Type Support for `.vue` Imports in TS

Customize configuration

michael-255/vue3-boilerplate-app

Vue 3 Boilerplate App

Post Cloning Steps

Todos

Table of Contents

Usage

Project Information

Steps for adding models (classes) and fields

ES2020 Support

Vue 3 (+Vite)

Vitest

VSCode

Git Ignore

Prettier

Gh-pages

Chart.js

Quasar

Dexie (IndexedDB)

Hygen

Services

Utils

Additional Notes

Recommended IDE Setup

Type Support for .vue Imports in TS

Customize configuration

Type Support for `.vue` Imports in TS