vuetifyjs / create Goto Github PK
View Code? Open in Web Editor NEW๐ ๏ธ Build tooling for Vuetify 3
๐ ๏ธ Build tooling for Vuetify 3
Currently in create-vuetify, Default
means the minimal install (with vuetify only), Base
adds routing and Essentials
adds some more. This is confusing because in many similar scenarios, Base
and Essential
are the minimal running preset , and Default
is the developer recommended preset (which adds some tooling to make development easier).
The names should be changed. My proposal is:
Barebones
= the current Default
,Regular
= the current Base
,Extra
= the current Essentials
.Vuetify Version: 3.5.2
Vue Version: 3.3.0
Browsers: Chrome 121.0.0.0
OS: Linux x86_64
npm create vuetify
then choose
A working Hello World project
fails to run.
Error: The following dependencies are imported but could not be resolved:
virtual:generated-layouts
This bug is in npm create vuetify
- so, sorry about the bogus repro link. I'm not sure how else to report this, but the dev experience of using the starter command and having an error is poor, so I presume is something you would care to know about.
#16 - seems like it might be related.
Please see the video below. <v- tags are no recognized, autocompletete does not work by default. However, if I use the full class name then autocomplete works for any component, and after that it also works for <v- tags.
It is very easy to reproduce, just create a new vuetify typescript project yarn create vuetify
then open it in vscode (with vue official plugin installed).
Version: 1.90.0
Commit: 6319a0b6210a13408ab1ef44be93444143942ea8
Date: 2024-05-03T07:47:29.201Z
Electron: 28.3.1
ElectronBuildId: undefined
Chromium: 120.0.6099.291
Node.js: 18.18.2
V8: 12.0.267.19-electron.0
OS: Linux x64 6.6.30-2-MANJARO
Vue plugin version 2.0.17
npm version
{
npm: '10.7.0',
node: '20.13.0',
acorn: '8.11.3',
ada: '2.7.8',
ares: '1.28.1',
base64: '0.5.2',
brotli: '1.1.0',
cjs_module_lexer: '1.2.2',
cldr: '44.1',
icu: '74.2',
llhttp: '8.1.2',
modules: '115',
napi: '9',
nghttp2: '1.61.0',
openssl: '3.3.0',
simdutf: '5.2.4',
tz: '2023c',
undici: '6.13.0',
unicode: '15.1',
uv: '1.48.0',
uvwasi: '0.0.20',
v8: '11.3.244.8-node.20',
zlib: '1.3.1'
}
If I add this to tsconfig:
"include": [
"**/*.ts",
"**/*.js",
"**/*.d.ts",
"**/*.tsx",
"**/*.vue",
"tests/setup.ts"
]
then it works.
(This was originally posted here: vuejs/language-tools#4421 )
The default project configuration might include a Vuetify-specific linter, which I accidentally found at https://github.com/vuetifyjs/eslint-plugin-vuetify and it's too sad that it isn't mentioned in official docs.
As a use-case to prove this point, in HelloWorld.vue there is a deprecated prop usage, throwing the following build error
.\src\components\HelloWorld.vue
5:9 error 'contain' has been replaced with 'cover' vuetify/no-deprecated-props
(as long as 'plugin:vuetify/base'
is part of eslintrc.js. A 'plugin:vue/base'
doesn't seem to make any effect)
I've been having a problem everytime I create a new vuetify component with the npm create vuetify
Error:
SyntaxError: missing ) after argument list at internalCompileFunction (node:internal/vm:77:18) at wrapSafe (node:internal/modules/cjs/loader:1287:20) at Module._compile (node:internal/modules/cjs/loader:1339:27) at Module._extensions..js (node:internal/modules/cjs/loader:1434:10) at Module.load (node:internal/modules/cjs/loader:1206:32) at Module._load (node:internal/modules/cjs/loader:1022:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12) at node:internal/main/run_main_module:28:49
Code line
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
Vuetify Version: 3.5.13
Last working version: 3.5.11
Vue Version: 3.4.21
Browsers: Chrome 123.0.0.0
OS: Windows 10 with WSL2
npm create vuetify
[...all].vue
in root of the pages
directory<v-btn>Test</v-btn>
element in this file/
page in the browserSee a large button in the page
Nothing in the page : we've getting an error in the console Uncaught (in promise) Error: Missing required param "all"
https://codesandbox.io/p/github/cmatyja/vuetify-catch-all-route-issue/main
Encountered an errror about package dependency when creating a new vuetify app template with create-vuetify command.
The detailed procedure of the error reproduction is as follows.
If you will select "yarn" instead of "npm", then there is no error when executing yarn install
command.
It's only a problem when using "npm" for installing dependencies.
npm create vuetify
Vuetify.js - Material Component Framework for Vue
โ Project name: โฆ vuetify-project
โ Which preset would you like to install? โบ Base (Vuetify, VueRouter)
โ Use TypeScript? โฆ No / Yes
โ Would you like to install dependencies with yarn, npm, or pnpm? โบ npm <== Select "npm"
โ Generating scaffold...
โ Installing dependencies with npm...
vuetify-project has been generated at /home/shigeyf/dev/srcs/_working/shigeyf/dashboard/tmp/vuetify-project
Discord community: https://community.vuetifyjs.com
Github: https://github.com/vuetifyjs/vuetify
Support Vuetify: https://github.com/sponsors/johnleider
cd vuetify-project
npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR! dev vite@"^4.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @vitejs/[email protected]
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR! dev @vitejs/plugin-vue@"^3.0.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I created a project using create vuetify
and I chose the base config (Default + Router). I didn't expect unplugin-vue-router to be added, and since our team is not confident on using it we now have to manually remove the dependency and everything related to it.
It would be awesome to choose to use it or not directly from the "wizard".
When I run yarn crate vuetify
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
- create-vuetify
[############] 12/12
Vuetify.js - Material Component Framework for Vue
โ Project name: โฆ vuetify-project
โ Which preset would you like to install? โบ Base (Vuetify, VueRouter)
โ Use TypeScript? โฆ No / Yes
โ Would you like to install dependencies with yarn, npm, or pnpm? โบ yarn
โ Generating scaffold...
โ Installing dependencies with yarn...
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 13.54s.
vuetify-project has been generated at /tmp/test/vuetify-project
Discord community: https://community.vuetifyjs.com
Github: https://github.com/vuetifyjs/vuetify
Support Vuetify: https://github.com/sponsors/johnleider
Done in 34.18s.
It creates a project with vuetify version 3.0.0, that version is already 7 months old, is there a reason not to use the latest version (3.3.1)?
Vuetify Version: 3.5.12
Vue Version: 3.4.21
Browsers: Chrome 123.0.0.0
OS: Mac OS 10.15.7
default layout(src/layouts/default.vue) can not be changed to another until defaultLayout
is set to 'default' in vite.config.mts.
this can reproduce by deleting defaultLayout in vite.config.mts, then the abc
in page will disappear.
layout can be changed
layout is fixed
When creating a new vuetify project using yarn (4.2.2), the created project might have missing dependencies and can't be started.
yarn create vuetify
Essentials (Base, Layouts, Pinia)
No
yarn
Yes
yarn dev
failed to load config from C:\Users\<u>\Documents\git\vuetify3\vite.config.mjs
error when starting dev server:
Error: unplugin-vue-router tried to access @vue/compiler-sfc, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Required package: @vue/compiler-sfc (via "@vue\compiler-sfc\package.json")
Required by: unplugin-vue-router@virtual:8fa23003b625c9f1c0bfafebc7d98e5483e90f8881ab8ca19bedf1bf38c3f7f50ffde76e543b72e647f6f216452bbf9e9c74b182f07a1e63fbe895e6aab64e90#npm:0.8.6 (via C:\Users\<u>\Documents\git\vuetify3\.yarn\__virtual__\unplugin-vue-router-virtual-28baf8bdfb\4\AppData\Local\Yarn\Berry\cache\unplugin-vue-router-npm-0.8.6-4f36a46575-10c0.zip\node_modules\unplugin-vue-router\dist\chunk-UGN5YR6V.mjs)
at makeError (C:\Users\<u>\Documents\git\vuetify3\.pnp.cjs:10381:34)
at resolveToUnqualified (C:\Users\<u>\Documents\git\vuetify3\.pnp.cjs:12029:21)
at Object.resolveToUnqualified (C:\Users\<u>\Documents\git\vuetify3\.pnp.cjs:12209:26)
at resolve$1 (file:///C:/Users/<u>/Documents/git/vuetify3/.pnp.loader.mjs:2027:31)
at nextResolve (node:internal/modules/esm/hooks:866:28)
at Hooks.resolve (node:internal/modules/esm/hooks:304:30)
at handleMessage (node:internal/modules/esm/worker:196:24)
at Immediate.checkForMessages (node:internal/modules/esm/worker:138:28)
at process.processImmediate (node:internal/timers:478:21)
Running yarn add --dev @vue/compiler-sfc
fixes the issue.
However it would be nice if the template would just work out of the box.
Vuetify Version: 3.5.2
Vue Version: 3.4.15
Browsers: Chrome 121.0.0.0
OS: Windows 10
see readme.md:
I'm using Windows 10 and node v20.11.0
build without errors
Found 37 errors in 4 files.
This is a proposal to install the Roboto font as a dependency of create-vuetify instead of using Google-hosted fonts.
A way to fix all of the above issues could be to use unplugin-fonts (existing dependency), add @fontsource/roboto
, remove roboto-fontface
, and adapt the unplugin-fonts config to use the locally installed Roboto font and also add italic style. See also detailed description in this issue comment.
I'd be happy to have a go at implementing this, but would first like to get some feedback about whether such a change would be welcomed by the maintainer(s) or not.
<router-view>
is not present in default rendered view, so while routing will technically happen (no errors in console, address in addressbar changes), user won't see a different component rendered.
This is confusing for new users, one would assume enabling router preset should make routing work out-of-the-box.
Vuetify Version: 3.0.0
Vue Version: 3.2.38
Browsers: Chrome 107.0.0.0
OS: Linux x86_64
As per documentation, yarn install vuetify
and cd to the project directory.
yarn build
and copy the dist folder's content to a webserver like apache.
The vuetify logo to be visible, as in the hot reload.
The logo is not visible, not in the dist folder, and the browser logs an error.. GET http://localhost/src/assets/logo.svg
[HTTP/1.1 404 Not Found 0ms]
https://github.com/LaKing/debug-vuetify
:src="logo"
in the v-img tag, and import logo from "@/assets/logo.svg";
works ok.
However, it is very frustrating for newcomers, to hit a bug right at the blank test drive.
Vuetify Version: 3.3.22
Last working version: 3.3.22
Vue Version: 3.3.4
Browsers: Chrome 117.0.0.0
OS: Windows 10
npm create vuetify
framework built and new vuetify project created
โ Which preset would you like to install? ยป Custom (Choose your features)
โ Use TypeScript? ... No / Yes
โ Use Vue Router? ... No / Yes
โ Use Pinia? ... No / Yes
โ Use ESLint? ... No / Yes
โ Would you like to install dependencies with yarn, npm, pnpm, or bun? ยป npm
โ Generating scaffold...
โ SyntaxError: Unexpected token } in JSON at position 243
npm ERR! code 1
npm ERR! path C:\jb
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c create-vuetify
npm ERR! A complete log of this run can be found in: C:\Users\blake\AppData\Local\npm-cache_logs\2023-10-19T06_57_15_530Z-debug-0.log
https://play.vuetifyjs.com/#...
here is the log:
0 verbose cli C:\Program Files\nodejs\node.exe C:\Users\blake\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 3ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:C:\Users\blake\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 3ms
6 timing config:load:builtin Completed in 3ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:C:\Users\blake\src.npmrc Completed in 0ms
10 timing config:load:project Completed in 2ms
11 timing config:load:file:C:\Users\blake.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:C:\Users\blake\AppData\Roaming\npm\etc\npmrc Completed in 1ms
14 timing config:load:global Completed in 1ms
15 timing config:load:setEnvs Completed in 0ms
16 timing config:load Completed in 10ms
17 timing npm:load:configload Completed in 10ms
18 timing config:load:flatten Completed in 2ms
19 timing npm:load:mkdirpcache Completed in 1ms
20 timing npm:load:mkdirplogs Completed in 0ms
21 verbose title npm create vuetify
22 verbose argv "create" "vuetify"
23 timing npm:load:setTitle Completed in 1ms
24 timing npm:load:display Completed in 1ms
25 verbose logfile logs-max:10 dir:C:\Users\blake\AppData\Local\npm-cache_logs\2023-10-19T06_49_18_034Z-
26 verbose logfile C:\Users\blake\AppData\Local\npm-cache_logs\2023-10-19T06_49_18_034Z-debug-0.log
27 timing npm:load:logFile Completed in 9ms
28 timing npm:load:timers Completed in 0ms
29 timing npm:load:configScope Completed in 0ms
30 timing npm:load Completed in 125ms
31 silly logfile start cleaning logs, removing 1 files
32 timing arborist:ctor Completed in 0ms
33 silly logfile done cleaning log files
34 http fetch GET 200 https://registry.npmjs.org/create-vuetify 895ms (cache revalidated)
35 timing arborist:ctor Completed in 1ms
36 timing arborist:ctor Completed in 0ms
37 timing command:create Completed in 28593ms
38 verbose stack Error: command failed
38 verbose stack at ChildProcess. (C:\Users\blake\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\promise-spawn\lib\index.js:53:27)
38 verbose stack at ChildProcess.emit (node:events:514:28)
38 verbose stack at maybeClose (node:internal/child_process:1091:16)
38 verbose stack at ChildProcess._handle.onexit (node:internal/child_process:302:5)
39 verbose cwd C:\Users\blake\src
40 verbose Windows_NT 10.0.22621
41 verbose node v18.17.1
42 verbose npm v10.2.1
43 error code 1
44 error path C:\Users\blake\src
45 error command failed
46 error command C:\Windows\system32\cmd.exe /d /s /c create-vuetify
47 verbose exit 1
48 timing npm Completed in 29361ms
49 verbose code 1
50 error A complete log of this run can be found in: C:\Users\blake\AppData\Local\npm-cache_logs\2023-10-19T06_49_18_034Z-debug-0.log
I have successfully used Vuetify 2 in the past, but when trying to create a Veutify 3 project, I run npm create vue@latest
. I cd into the app directory and run npm install
, then I run npm run dev
and when I visit http://localhost:3001/ I get the following:
[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
virtual:vue-router/auto-routes:5:128
I did not opt for Typescript during setup, just vanilla JS. Not of the generated files that get created are .jsx or .tsx.
node -v v22.3.0
npm -v 10.8.1
When I write yarn create vuetify
on my powershell, I get the following
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
- create-vuetify
'C:\Users\Sohan' is not recognized as an internal or external command,
operable program or batch file.
error Command failed.
Exit code: 1
Command: C:\Users\Sohan Basak\AppData\Local\Yarn\bin\create-vuetify
Arguments:
Directory: F:\CODING\cardinalwords
Output:
info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.
this is likely because the path Contains spaces and vuetify isn't properly escaping the spaces.
Vuetify Version: 3.3.23
Vue Version: 3.3.7
Browsers: Chrome 118.0.0.0
OS: Mac OS 11.7.10
npm create vuetify
choose preset: Default (Vuetify)
installation with default (Vuetify) scaffolding
โ SyntaxError: Expected double-quoted property name in JSON at position 243
https://play.vuetifyjs.com/#...
This problem occurs when choosing the default preset.
After creating a new project (npm create vuetify
), the command npm run lint
cannot be executed because the installed package versions do not match each other.
I get the following error:
> [email protected] lint
> eslint . --fix --ignore-path .gitignore
=============
WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.
You may find that it works just fine, or you may not.
SUPPORTED TYPESCRIPT VERSIONS: >=4.3.5 <5.4.0
YOUR TYPESCRIPT VERSION: 5.4.2
Please only submit bug reports when using the officially supported version.
=============
here is my package.json file:
{
"name": "my-app",
"version": "0.0.0",
"scripts": {
"dev": "node --no-warnings ./node_modules/.bin/vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"lint": "eslint . --fix --ignore-path .gitignore"
},
"dependencies": {
"@mdi/font": "7.0.96",
"core-js": "^3.34.0",
"roboto-fontface": "*",
"vue": "^3.3.0",
"vuetify": "^3.0.0"
},
"devDependencies": {
"@babel/types": "^7.23.0",
"@types/node": "^20.10.0",
"@vitejs/plugin-vue": "^4.5.0",
"@vue/eslint-config-typescript": "^12.0.0",
"eslint": "^8.56.0",
"eslint-config-standard": "^17.1.0",
"eslint-plugin-import": "^2.29.0",
"eslint-plugin-n": "^16.4.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-vue": "^9.19.0",
"pinia": "^2.1.0",
"sass": "^1.69.0",
"typescript": "^5.3.0",
"unplugin-fonts": "^1.1.0",
"unplugin-vue-components": "^0.26.0",
"unplugin-vue-router": "^0.7.0",
"vite": "^5.0.0",
"vite-plugin-vue-layouts": "^0.10.0",
"vite-plugin-vuetify": "^2.0.0",
"vue-router": "^4.2.0",
"vue-tsc": "^1.8.0"
}
}
I know that the problem is in the version of typescript and compatibility with eslint, but manually it is difficult to find which dependency is in conflict.
Node.js: v20.11.0
Npm: 10.2.4
20.04.1-Ubuntu
I ran yarn create vuetify
Options:
โ Which preset would you like to install? ยป Essentials (Base, Layouts, Pinia)
โ Use TypeScript? ... Yes
โ Would you like to install dependencies with yarn, npm, pnpm, or bun? ยป yarn
Tried running yarn build
yarn run v1.22.21
$ vue-tsc --noEmit && vite build
src/router/index.ts:8:48 - error TS2307: Cannot find module 'vue-router/auto' or its corresponding type declarations.
8 import { createRouter, createWebHistory } from 'vue-router/auto'
~~~~~~~~~~~~~~~~~
src/router/index.ts:9:30 - error TS2307: Cannot find module 'virtual:generated-layouts' or its corresponding type declarations.
9 import { setupLayouts } from 'virtual:generated-layouts'
yarn dev
seems to work, at least the one page is coming up correctly.
I was able to get the first error to clear by following some of the steps here: https://github.com/posva/unplugin-vue-router?tab=readme-ov-file#typescript although I have 0 clue if that's the correct thing to do.
I used yarn create vuetify
and set the settings to use Essentials (Vuetify, VueRouter, and Pinia), and to use typescript. When I launch yarn dev
and go to the website, any click on any page produces the error below:
Uncaught TypeError: Cannot read properties of undefined (reading '0')
at Array.<anonymous> (content.js:7:89199)
at c.trigger (content.js:7:81786)
at HTMLDocument.<anonymous> (content.js:7:81253)
It also happens for the keydown, input, change, and focus events. In the compiled code, all of these places use e.path[0]
. I do not know if this is a vuetify problem, or if it is a problem with the default template given by yarn create vuetify. However, both the JS and Typescript versions have this same bug.
Created a vuetify project with npm create vuetify
after the npm install completed, package.json in project root showing as below
"dependencies": {
"@mdi/font": "7.0.96",
"core-js": "^3.29.0",
"roboto-fontface": "*",
"vue": "^3.2.0",
"vue-router": "^4.0.0",
"vuetify": "^3.0.0"
},
where the \node_modules\vuetify\package.json
shows
"name": "vuetify",
"description": "Vue Material Component Framework",
"version": "3.4.10",
"author": {
"name": "John Leider",
"email": "[email protected]"
},
same for vue
and vuetify
packages
Expected
package.json dependencies need to be same as the installed version
Correct me if I'm wrong, thanks
just create project: Essentials + TypeScript + yarn. Not change any source file.
โ Project name: ... vuetify-project
โ Which preset would you like to install? ยป Essentials (Base, Layouts, Pinia)
โ Use TypeScript? ... Yes
โ Would you like to install dependencies with yarn, npm, pnpm, or bun? ยป yarn
yarn dev
Error:
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1287:20)
at Module._compile (node:internal/modules/cjs/loader:1339:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
at Module.load (node:internal/modules/cjs/loader:1206:32)
at Module._load (node:internal/modules/cjs/loader:1022:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12)
at node:internal/main/run_main_module:28:49
Node.js v21.5.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
It seems execute linux bash file ./node_modules/.bin/vite
. Similar error with "dev": "node --no-warnings ./node_modules/.bin/vite.cmd",
in package,json.
I change the dev config to "dev": "vite",
, it works with warnning.
(node:16892) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
yarn build
Error:
yarn run v1.22.21
$ vue-tsc --noEmit && vite build
src/router/index.ts:8:48 - error TS2307: Cannot find module 'vue-router/auto' or its corresponding type declarations.
8 import { createRouter, createWebHistory } from 'vue-router/auto'
~~~~~~~~~~~~~~~~~
src/router/index.ts:9:30 - error TS2307: Cannot find module 'virtual:generated-layouts' or its corresponding type declarations.
9 import { setupLayouts } from 'virtual:generated-layouts'
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Found 2 errors in the same file, starting at: src/router/index.ts:8
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I need manually add "types": ["vite-plugin-vue-layouts/client", "node"],
to compilerOptions
and add "*.d.ts"
to include
list in tsconfig.json file.
I'm new to use vuetify and vue3, the manually change is right or not? There is a better way?
Thanks!
Check the resulting CSS you get from Google Fonts, there is no italic font there. Vuetify does support and use seldomly uses italic.
see #45
Environment
Vuetify Version: 3.5.2
Vue Version: 3.4.15
Browsers: Chrome 121.0.0.0
OS: Windows 10
Steps to reproduce
see readme.md:
npm create vuetify
select Essentials (Vuetify, VueRouter, Pinia)
select Use TypeScript? Yes
select npm
npm install
npm run build
I'm using Windows 10 and node v20.11.0
Expected Behavior
build without errors
Actual Behavior
Found 37 errors in 4 files.
Reproduction Link
https://github.com/heziegl/vuetify352_test
Vuetify Version: 3.1.1
Vue Version: 3.2.45
Browsers: Edge 108.0.1462.76
OS: Windows
Initialize a Vuetify 3 project
Error: 'C:\Users\PeterSidebotham' is not recognized as an internal or external command,
https://codesandbox.io/s/boring-dust-1dty24
This appears to be a problem escaping the parenthesis character in the yarn command to initialize the vuetify 3 project. It's not clear to me if this is an issue with yarn or vuetify 3. I've tried the command in regular and elevated prompts, and in windows cmd and MinTTY. Given the oddness of having a parenthesis in a username, I would be happy with a more manual approach to initialize a project.
Vuetify Version: 3.3.1
Last working version: 3.2.5
Vue Version: 3.3.4
Browsers: Chrome 105.0.0.0
OS: Windows 10, Linux
Just run the Playground to constat the not respect of the
The block is align rigth instead of the to be in the center of the page.
Change in playground the version of Vuestify 3.3.x to 3.2.5 to see the align center of the block is not respect anymore with this new version
This code come from the vuestify starter client.
In version 3.3.x, the Text block should be in the center of the page with
The Text block is rigth align in the page in version Vuestify 3.3.x.
The same code in Vuestify 3.2.x respect align center
Vuetify Version: 3.1.13
Vue Version: 3.3.0-alpha.9
Browsers: Firefox 111.0
OS: Windows 10
Reproduction steps:
yarn create vuetify
โ Project name: ... vuetify-project
โ Which preset would you like to install? ยป Essentials (Vuetify, VueRouter, Pinia)
โ Use TypeScript? Yes
โ Would you like to install dependencies with yarn, npm, or pnpm? ยป npm
npm run dev
= works fine.
npm run build
`Found 18 errors in 5 files.
Errors Files
1 node_modules/@babel/parser/typings/babel-parser.d.ts:3
6 node_modules/@vue/compiler-core/dist/compiler-core.d.ts:1
1 node_modules/@vue/compiler-sfc/dist/compiler-sfc.d.ts:20
4 node_modules/@vue/reactivity-transform/dist/reactivity-transform.d.ts:1
6 node_modules/vuetify/lib/components/index.d.ts:26992`
Cannot find module '@babel/types' or its corresponding type declarations.
"npm run build" works on a fresh build
"Cannot find module '@babel/types' or its corresponding type declarations.", when trying to build a fresh installation by create vuetify
https://github.com/GreenStorm/CreateVuetifyBuildError
Thanks.
Starting new project with cmd line : npm create vuetify
, and manually selected no TypeScript, add Router, Pinia and ESLint, in package.json I have:
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"eslint": "^8.22.0",
"eslint-plugin-vue": "^9.3.0",
"vite": "^4.2.0",
"vite-plugin-vuetify": "^1.0.0"
}
Still Vite 4 , not Vite 5.
If I 'force' update to [email protected] I receive a lot of warnings. After that, project is starting OK.
Still, on 'npm run build
', I receive a warning:
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
Tested on Windows 10 with NodeJS v18.19.0
update npm create vuetify
Below is the error message:
Error: The following dependencies are imported but could not be resolved:
virtual:generated-layouts (imported by D:/proj/vue/vuetify-base/src/router/index.js)
I've noticed the creation of layouts/
directories with 2 Vue files, that are referenced in the router configuration.
However, they are not used, since the main.ts
loads App.vue
that doesn't do anything with either <router-view />
nor those files in layouts/
directory.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.