Project structure was created by
npm create vue@latestAs example for handling of media (image and audio) assets, see src/components/StatsTable.vue
https://vuetifyjs.com/en/components/all/#form-inputs-and-controls
include only used icons in build and central handling of icons https://vuetifyjs.com/en/features/icon-fonts/#mdi-js-svg
see config src/plugins/vuetify.ts
OpenSource icon collection https://pictogrammers.com/library/mdi/
Icon search https://vuetifyjs.com/en/features/icon-fonts/#mdi-icon-search
use mdi as prefix in Vuetify (e.g. trash-can -> mdi-trash-can)
https://github.com/cssninjaStudio/unplugin-fonts#google-fonts https://fontsource.org/fonts/roboto
npm install @fontsource/robotosee vite.config.ts
see config vitest.config.ts
see how-tos at
https://blog.logrocket.com/guide-vitest-automated-testing-vue-components/ https://codingpr.com/test-your-vue-3-app-with-vitest-and-vue-test-utils/
To exclude a function in v8 code coverage report
/* c8 ignore next */Fix for TypeError: window.matchMedia is not a function
see https://lobotuerto.com/notes/vue-testing-cheat-sheet
and files
vitest.config.ts and
vitest.setup.ts
see config vite.config.ts
Manual chunks per component:
Do not use output: manualChunks: in vite.config.ts, as this prevents lazy loading via defineAsyncComponent
Instead, just use defineAsyncComponent to define lazy loading AND define chunks.
https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/
Install resulting Webpage as App
Currently only supported by Chrome/Chromium/Edge, not by Safari and Firefox
Great how-to: https://wildermuth.com/2023/02/09/vite-plugin-for-progressive-web-apps/
- add Vite PWA plugin
npm i vite-plugin-pwa -D-
add pwa to vite.config.ts
import { VitePWA } from "vite-plugin-pwa";and data for the manifest file (e.g. the required logo(s)) -
place a logo in the public dir (e.g.
144.png)
done.
Check in Chrome Devtools -> Application -> Manifest for errors.
Other how-tos
- https://rubenr.dev/pwa-vite/
- https://dev.to/adefam/pwa-in-vue-vite-53a3
- outdated: https://blog.logrocket.com/building-pwa-vue/
see https://stackblitz.com/edit/vue3-vite-router-typescript-starter
Configured in router.ts and App.vue see also public/.htaccess for URL rewrite in case users directly access a routed page.
Lazy loading of routes see https://router.vuejs.org/guide/advanced/lazy-loading.html
https://www.typescriptlang.org/docs/handbook/intro.html
https://vue-i18n.intlify.dev/guide/ how to at https://phrase.com/blog/posts/ultimate-guide-to-vue-localization-with-vue-i18n/ and https://codingpr.com/create-international-website-with-vue-3/