michael-255/vue3-boilerplate-app-v2

Vue 3 Boilerplate App V2

Project Archived

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

This Vue 3 Typescript project can be used as a template to help you get started developing smaller projects. Read through this README to have a better understanding of how this project is setup.

Post Cloning Steps

• Update package.json

  • name
  • description
  • version
  • repository
  • bugs
  • homepage

• Update base in ~/vite.config.ts to your repository name for deployments to work

• Update AppString in ~/src/constants/ui/string-enums.ts to represent your app

• Update title in ~/index.html to reflect the app name you use in ui-enums.ts

• Update GitHub repository settings

  • Add a Description

  • Add the GitHub Pages website

  • Add Topics

  • Update the Include in the home page section

    • Uncheck Releases
    • Uncheck Packages
    • Uncheck Environments

• Update README.md

  • Change README main heading to your project name
  • Add detailed project description
  • Remove unneeded sections (even this one)

Table of Contents

• Usage
• Project Creation Steps
• Package JSON Changes
• ES2020 Support
• Misc Setup Notes
• 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 updates to ensure they worked.

npm upgrade

Project Creation Steps

These are the general steps I took to create the initial project (vue3-boilerplate-app).

• npm init vue@latest (selecting YES for most options)
• npm i uuid (random ids)
• npm i -D @types/uuid
• npm i luxon (Javascript date utilities)
• npm i -D @types/luxon
• npm i dexie (IndexedDB wrapper)
• npm i -D gh-pages (GitHub Pages deployment)
• npm i -D @vitest/coverage-c8 (test coverage output)
• npm i @vueuse/core (Vue component utilities)
• npm i chart.js vue-chart-3 (charts with a Vue wrapper)
• npm i quasar @quasar/extras (Vue component framework)
• npm i -D @quasar/vite-plugin

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 selections.

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

The following files will need to be updated based on the configurator tool.

• mains.ts
• vite.config.ts

Package JSON Changes

Updated or added lines for testing and deployment. The deployment script 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.

{
  "scripts": {
    "test": "vitest --environment jsdom",
    "test:coverage": "vitest --environment jsdom --coverage",
    "deploy": "npm run build && cd dist && cp index.html 404.html && cd .. && gh-pages -d dist -m Deployment"
  }
}

ES2020 Support

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

• tsconfig.vitest.json
• tsconfig.app.json

Misc Setup Notes

Please note the setup of the following when using this project.

• .gitignore
• .eslintrc.cjs
• .prettierignore
• .prettierrc.json
• /.vscode/extensions.json

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:

1. 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)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.