logue/vite-vuetify-ts-starter

@vitejs + @vuejs 3+@Vuetifyjs 3

Vue 3 + Typescript + Vite + Vuetify 3.3

This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Includes vue-router and Pinia ¹.

In addition, ESLint, Stylelint, and Prettier are also included and are set to be executed automatically at runtime and commit. (Since these settings are set strictly, please relax yourself.)

Also, when the development server is executed, it is checked in real time by vite-plugin-checker.

First define VITE_APP_TITLE in your .env file.

⚠ Important Notice

As of 3.3.0, TypeScript5 support is not sufficient due to problems on the Vuetify side. For this reason, you should add // @ts-expect-error before any import statements, such as when calling the useTheme() function.

Also, the first time you run a unit test, you will always get an error. Press a to rerun and the test will pass.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

And use Volar Takeover Mode for better performance.

Commands

It is designed to be close to create-vue commands.

Command	Description
dev	Start devserver.
clean	Clear devserver cache.
type-check	Check vue markup.
lint	Run ESLint and prettier.
lint:style	Run Stylelint.
test	Run vitest
test:unit	Run Unit test
coverage	Output Coverage Report.
build	Build for production.
build:analyze	Execute Bundle Analyzer
build:clean	Clear production build files.
build-only	Build for production without checking. For Deploy use.
preview	Run the program generated by the production build.

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can enable Volar's .vue type support plugin by running Volar: Switch TS Plugin on/off from VSCode command palette.

Troubleshooting

When adding or deleting files, an error may occur and even if the error is corrected, it may not be reflected in devserver. In that case, stop devserver and delete all the files in the node_modules/.vite directory. You can also run it with the clean command.

It will not work properly if you are using Node v21.0.0. Please upgrade to 21.1.0 or later.

Npm Scripts outputs MODULE_NOT_FOUND.

Due to yarn issues, it may not work properly if the path contains non-ASCII characters (such as 日本語 or 한국어, 中文 etc.).

Checklist

When you use this template, try follow the checklist to update your info properly

• Change the author name in LICENSE
• Change the favicon in public
• Remove the .github folder which contains the funding info
• Clean up the READMEs and remove routes

See Also

• for Vue3
  • vite-vue3-ts-starter
  • vite-elemental-plus-ts-starter
  • vite-bootstrap-vue-ts-starter - Comming soon.
• for Vue2
  • vite-vue2-ts-starter - Vite Vue2 starter.
  • vite-vue2-vuetify-ts-starter - UI library using Vuetify2
  • laravel9-vite-vue2-starter - Vue2 for Laravel9 + Breeze.
  • vite-vue2-ts-ssr-starter - SSR (Server Side Rendering) Version.

Footnotes

1. Pinia is the recommended state management library to replace Vuex in the next Vue. see https://github.com/vuejs/rfcs/discussions/270#discussioncomment-2066856 ↩

vite-vuetify-ts-starter's Issues

import colors from vuetify/lib/util/colors

Eslint doesn't see imports

tsconfig

Need to add option: "skipLibCheck"

Loading overlay blocks browser navigation buttons

https://github.com/logue/vite-vuetify-ts-starter/blob/d013cbe9b53fa8d8133bc7dc84ba831bf2668d92/src/App.vue#LL109C8-L109C8

If you do not set the close-on-back="false" attribute, then there will be problems when working with browser navigation buttons (back/forward)

https://vuetifyjs.com/en/api/v-overlay/#props-close-on-back

Unit tests do not work

Hi, I encountered an issue while running 'yarn run test:unit' on fresh template on my local Windows 10 machine.
Steps to reproduce the bug:

1. clone the repo
2. switch to repo directory in terminal
3. run 'yarn install'
4. run 'yarn run test:unit'

I did the same on github codespaces and there as well tests failed to run.

Do you have any idea what could be wrong?

Below I have attached terminal logs from Windows 10 machine and codespaces.

Logs from my Windows 10 machine:
`PS D:\Univ\semestr4\AWWW\template-testing\vite-vuetify-ts-starter> yarn --version
3.5.1
PS D:\Univ\semestr4\AWWW\template-testing\vite-vuetify-ts-starter> yarn run test:unit
Usage Error: Couldn't find the node_modules state file - running an install might help (findPackageLocation)

$ yarn run [--inspect] [--inspect-brk] [-T,--top-level] [-B,--binaries-only] ...
PS D:\Univ\semestr4\AWWW\template-testing\vite-vuetify-ts-starter> yarn install
➤ YN0000: ┌ Resolution step
➤ YN0002: │ vite-plugin-vuetify@npm:1.0.2 [a83c4] doesn't provide vue (p2d063), requested by @vuetify/loader-shared
➤ YN0002: │ vite-vuetify-ts-starter@workspace:. doesn't provide @typescript-eslint/parser (p5e41c), requested by @typescript-eslint/eslint-plugin
➤ YN0060: │ vite-vuetify-ts-starter@workspace:. provides eslint-plugin-n (p4d8de) with version 16.0.0, which doesn't satisfy what eslint-config-standard-with-typescript and some of its descendants request
➤ YN0060: │ vite-vuetify-ts-starter@workspace:. provides vue (pff8bc) with version 3.3.4, which doesn't satisfy what @vue/test-utils and some of its descendants request
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements for details, where is the six-letter p-prefixed code
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ yargs-parser@npm:21.1.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs@npm:16.2.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs@npm:17.7.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:0.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:1.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 1s 834ms
➤ YN0000: ┌ Link step
➤ YN0007: │ core-js@npm:3.30.2 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.17.18 must be built because it never has been before or the last one failed
➤ YN0007: │ vue-demi@npm:0.14.5 [94cec] must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 5s 884ms
➤ YN0000: Done with warnings in 7s 956ms
PS D:\Univ\semestr4\AWWW\template-testing\vite-vuetify-ts-starter> yarn run test:unit

DEV v0.31.1 D:/Univ/semestr4/AWWW/template-testing/vite-vuetify-ts-starter

Test Files no tests
Tests no tests
Start at 14:24:11
Duration 548ms (transform 123ms, setup 0ms, collect 0ms, tests 0ms, environment 0ms, prepare 0ms)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯TypeError: Cannot destructure property 'AsymmetricMatcher' of 'vite_ssr_import_1.plugins' as it is undefined.
❯ node_modules/@vitest/utils/dist/index.js:35:3
33| plugins: PLUGINS,
34| ...options
35| });
| ^
36| } catch {
37| result = format$1(object, {
❯ VitestExecutor.directRequest node_modules/vite-node/dist/client.mjs:326:5
❯ VitestExecutor.cachedRequest node_modules/vite-node/dist/client.mjs:184:14
❯ VitestExecutor.dependencyRequest node_modules/vite-node/dist/client.mjs:219:12
❯ node_modules/@vitest/expect/dist/index.js:1:31
❯ VitestExecutor.directRequest node_modules/vite-node/dist/client.mjs:326:5
❯ VitestExecutor.cachedRequest node_modules/vite-node/dist/client.mjs:184:14
❯ VitestExecutor.dependencyRequest node_modules/vite-node/dist/client.mjs:219:12
❯ node_modules/vitest/dist/runners.js:1:31
❯ VitestExecutor.directRequest node_modules/vite-node/dist/client.mjs:326:5

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
FAIL Tests failed. Watching for file changes...
press h to show help, press q to quit`

Logs from github codespaces:
`👋 Welcome to Codespaces! You are on our default image.

• It includes runtimes and tools for Python, Node.js, Docker, and more. See the full list here: https://aka.ms/ghcs-default-image
• Want to use a custom image instead? Learn more here: https://aka.ms/configure-codespace

🔍 To explore VS Code to its fullest, search using the Command Palette (Cmd/Ctrl + Shift + P or F1).

📝 Edit away, run your app as usual, and we'll automatically make it available for you to access.

ya@mrarat ➜ /workspaces/vite-vuetify-ts-starter (main) $ yarn install
➤ YN0065: Yarn will periodically gather anonymous telemetry: https://yarnpkg.com/advanced/telemetry
➤ YN0065: Run yarn config set --home enableTelemetry 0 to disable

➤ YN0000: ┌ Resolution step
➤ YN0002: │ vite-plugin-vuetify@npm:1.0.2 [a83c4] doesn't provide vue (p2d063), requested by @vuetify/loader-shared
➤ YN0002: │ vite-vuetify-ts-starter@workspace:. doesn't provide @typescript-eslint/parser (p5e41c), requested by @typescript-eslint/eslint-plugin
➤ YN0060: │ vite-vuetify-ts-starter@workspace:. provides eslint-plugin-n (p4d8de) with version 16.0.0, which doesn't satisfy what eslint-config-standard-with-typescript and some of its descendants request
➤ YN0060: │ vite-vuetify-ts-starter@workspace:. provides vue (pff8bc) with version 3.3.4, which doesn't satisfy what @vue/test-utils and some of its descendants request
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements for details, where is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 505ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ yargs-parser@npm:21.1.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs@npm:16.2.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs@npm:17.7.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:0.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:1.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 54s 441ms
➤ YN0000: ┌ Link step
➤ YN0007: │ core-js@npm:3.30.2 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.17.18 must be built because it never has been before or the last one failed
➤ YN0007: │ vue-demi@npm:0.14.5 [94cec] must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 12s 668ms
➤ YN0000: Done with warnings in 1m 8s
@mrarat ➜ /workspaces/vite-vuetify-ts-starter (main) $ yarn run test:unit

DEV v0.31.1 /workspaces/vite-vuetify-ts-starter

Test Files no tests
Tests no tests
Start at 12:39:56
Duration 803ms (transform 266ms, setup 0ms, collect 0ms, tests 0ms, environment 0ms, prepare 0ms)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: Cannot destructure property 'AsymmetricMatcher' of 'vite_ssr_import_1.plugins' as it is undefined.
❯ node_modules/@vitest/utils/dist/index.js:35:3
33| plugins: PLUGINS,
34| ...options
35| });
| ^
36| } catch {
37| result = format$1(object, {
❯ VitestExecutor.directRequest node_modules/vite-node/dist/client.mjs:326:5
❯ VitestExecutor.cachedRequest node_modules/vite-node/dist/client.mjs:184:14
❯ VitestExecutor.dependencyRequest node_modules/vite-node/dist/client.mjs:219:12
❯ node_modules/@vitest/expect/dist/index.js:1:31
❯ VitestExecutor.directRequest node_modules/vite-node/dist/client.mjs:326:5
❯ VitestExecutor.cachedRequest node_modules/vite-node/dist/client.mjs:184:14
❯ VitestExecutor.dependencyRequest node_modules/vite-node/dist/client.mjs:219:12
❯ node_modules/vitest/dist/runners.js:1:31
❯ VitestExecutor.directRequest node_modules/vite-node/dist/client.mjs:326:5

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

FAIL Tests failed. Watching for file changes...
press h to show help, press q to quit
@mrarat ➜ /workspaces/vite-vuetify-ts-starter (main) $ yarn --version
3.5.1`

Content Security Policy setting

I am trying to ensure that an embeded Google maps iframe displays properly when I build and deploy to GitHub Pages and I have no idea where to set the unsafe-inline property for the Content Security Policy so that I do not get a 404 once deployed. Any ideas where and how I would do this in this Vue 3/Vite static SPA?

<v-row>
  <div style="width: 100%">
    <iframe src="data.mapUrl" width="100%" height="450" frameborder="0" style="border:0;" loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</v-row>

[Deprecated Dependencies] Vitest Coverage

Warning Log about deprecated dependencies

WARN  deprecated @vitest/[email protected]: v8 coverage is moved to @vitest/coverage-v8 package

Please Move to v8 version

eslint | public files imports

<v-img :src="vueLogo" width="100" />

It is necessary to set the eslint config for importing files from the public directory

Editing markdown throws Eslint errors [ESLint] Parsing error: Invalid character. (null)

Simply deleting a line in any .md will result in eslint throwing errors.

I use your starter to develope but it always stop running during hmr

vite will stop and console record this:
Error [ERR_WORKER_OUT_OF_MEMORY]: Worker terminated due to reaching memory limit: JS heap out of memory
at new NodeError (node:internal/errors:371:5)
at Worker.[kOnExit] (node:internal/worker:276:26)
at Worker..onexit (node:internal/worker:198:20)
Emitted 'error' event on Worker instance at:
at Worker.[kOnExit] (node:internal/worker:276:12)
at Worker..onexit (node:internal/worker:198:20) {
code: 'ERR_WORKER_OUT_OF_MEMORY'
}

every time i run the project again but i will occur again after some time. how can i do this? u use node to do what?

Running on Windows and node 18.12.1 is very slow

Hello 👋 I've been trying to run it on Windows, with node.js 18.12.1, but it's so slow, could we somehow speed it up or find the reason for this?

I've found out that some people were already struggling with similar problems:
https://stackoverflow.com/questions/73204586/speed-up-vitejs-dev-mode-vue-3

I am not very into frontend programming, but I think those problems could be related to vite.config.js. Could we look into this?? 😄
Thanks in advance

type declaration

vscode

husky precommit

vscode;
actual version for this template;

I added the component to the "components" directory, then imported it into homePage.vue. Tried to commit but got the following errors:
1)Could not find "stylelint-config-prettier"
2) problems with catalog node_modules.

your styleling.config:

customSyntax: postcss-html
extends:
  - stylelint-config-html/vue
  - stylelint-config-recommended-scss
  - stylelint-config-recommended-vue/scss
  - stylelint-config-prettier
plugins:
  - stylelint-order
  - stylelint-scss
ignoreFiles:
  - 'dist/**/*'
rules:
  color-function-notation: legacy
  function-no-unknown: null
  no-descending-specificity: null
  scss/no-global-function-names: null

improve performance and reduce build size

npm run build:deploy

vite v3.2.2 building for production...
✓ 464 modules transformed.
dist/assets/logo.a40b4f16.svg                            0.52 KiB
dist/assets/materialdesignicons-webfont.861aea05.eot     1214.57 KiB
dist/assets/materialdesignicons-webfont.e52d60f6.woff2   376.33 KiB
dist/assets/materialdesignicons-webfont.48d3eec6.woff    548.61 KiB
dist/assets/materialdesignicons-webfont.bd725a7a.ttf     1214.36 KiB
dist/index.html                                          0.94 KiB
dist/assets/index.d19375d4.js                            10.02 KiB / gzip: 3.88 KiB
dist/assets/vue.91c39abb.js                              89.91 KiB / gzip: 35.59 KiB
dist/assets/index.dae96147.css                           222.11 KiB / gzip: 26.43 KiB
dist/assets/materialdesignicons.ad86dcb1.css             314.37 KiB / gzip: 49.96 KiB
dist/assets/vuetify.72eba6c6.js                          260.30 KiB / gzip: 82.19 KiB
dist/assets/vuetify.f0317dfe.css                         384.50 KiB / gzip: 47.48 KiB

npm install -g live-server
cd dist/
live-server

http://0.0.0.0:8080 is already in use. Trying another port.
Ready for changes
Serving vuetify-ts-starter/dist at http://127.0.0.1:39077

Static Assets Build and Deploy to GitHub Pages

Suppose I do something like

const spleenImageList = await import.meta.glob('../assets/ss_content/spleen/*.{jpg,png,gif}', { eager: true, import: 'default' });
    spleenImages.value = Object.keys(spleenImageList).map((key) => {
        return {
            // src: 'src/' + key.substring(2),
            src: key,
            alt: 'Image_' + key
        }
    }) as { src: string; alt: string; }[];

and I use those paths to create v-img components which work perfectly well on localhost, how would I change the vite.config.js or whatever else I need to change to be able to simply push the dist folder to a repo and deploy it on GitHub Pages.

Performance Issues and Vuetify Plugin Problems in Your Project

I'm using your project for web development, but it's so slow that I'm unsure if I can deploy it. Is it a problem with the Vuetify plugin? I've tried commenting out "styles: { configFile: 'src/styles/settings.scss' }" based on other issues, but it's still slow.