Web App Template

Project Archived

This Vue 3 Typescript project can be used as a web application template to help you get started developing. 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 certain code files

  • Update base in ~/vite.config.ts to your repository name for deployments to work
  • Update AppName and AppDescription in ~/src/types/misc.ts to represent your app
  • Update name and short_name in ~/public/manifest.json to the app name
  • Update start_url in ~/public/manifest.json to deployed website address

• Update GitHub repository settings

  • Add a Description

  • Add the Website

  • Add Topics

  • Update the Include in the home page section

    • Uncheck Releases
    • Uncheck Packages
    • Uncheck Environments (or keep checked to show gh-pages deployment)

• Generate a new Favicon here: https://favicon.io/ (credit original artists)

• Update README.md

  • Change README main heading to your project name
  • Add detailed project description
  • Update the Credits section as needed
  • Remove unneeded sections (including this one)

Table of Contents

• Usage
• Project Creation Steps
• Additional Notes
• Credits

Usage

Install the project dependencies.

npm i

Launch the dev server site.

npm run dev

Build the project dist directory.

npm run build

Preview application using built dist artifacts.

npm run preview

Run tests.

npm test

Run tests with coverage report.

npm test:coverage

Removes previous GitHub Pages deployment.

npm run deploy:clean-gh-pages

Build and deploy the dist directory to GitHub Pages.

npm run deploy:gh-pages

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

Details on the general steps I took to setup this project. This isn't intended as a step-by-step guide on how to replicate this project, but is a good starting point.

1. Create an empty repository in GitHub with a PROJECT_NAME
2. Run npm init @vue/latest in your local Projects directory:
   • Name the project PROJECT_NAME
   • TypeScript - Yes
   • JSX - No
   • Vue Router - Yes
   • Pinia - Yes
   • ViTest - Yes
   • End-to-End Testing - No
   • ESLint - Yes
   • Prettier - Yes
3. Install useful dependencies:
   • npm i slugify - For making URL slug from text
   • 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-chartjs - Chart.js with a Vue wrapper
   • npm i -D @types/chart.js
   • npm i quasar @quasar/extras - Vue component framework
   • npm i -D @quasar/vite-plugin
4. Use Quasar configurator tool to help setup Quasar for your specific project:
   • https://quasar.dev/start/vite-plugin
5. Setup the following files based on Quasar configurator tool selections:
   • mains.ts
   • vite.config.ts
6. Additional scripts for package.json file. The deploy 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 --root src/",
       "test:coverage": "vitest --environment jsdom --coverage --root src/",
       "deploy:clean-gh-pages": "gh-pages-clean gh-pages -d dist -m Deployment",
       "deploy:gh-pages": "npm run build && npm version patch && cd dist && cp index.html 404.html && cd .. && gh-pages -d dist -m Deployment"
     }
   }

7. Setup other config files as desired:
   • /.vscode/extensions.json - Include extensions you recommend for your version
   • tsconfig.app.json - Setup for ES2020+ support
   • tsconfig.vitest.json - Setup for ES2020+ support
   • .eslintrc.cjs
   • .gitignore
   • .prettierignore
   • .prettier.json
8. Add icons, manifest file, and update useMeta in ~/src/App.vue
9. Run git init inside your project directory
10. Commit all changes to the project into it's initial commit
11. Run the follow commands to push the new project to your GitHub repo:

    git remote add origin https://github.com/GITHUB_USER/PROJECT_NAME.git
    git branch -M main
    git push -u origin main

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.

Credits

Recognize the work of anyone whose material you used in the project here.

Original Web App Template created by Michael Joy (michael-255 on GitHub)