logue/vite-vuetify-ts-starter

@vitejs + @vuejs 3+@Vuetifyjs 3

vite-vuetify-ts-starter's Issues

import colors from vuetify/lib/util/colors

Eslint doesn't see imports

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

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

type declaration

vscode

[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

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

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`

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.

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>

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

tsconfig

Need to add option: "skipLibCheck"

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?

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

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

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

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.