diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 80c74de089..6888471fe2 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -6,6 +6,7 @@ import llmstxt from 'vitepress-plugin-llms' import baseConfig from '@vue/theme/config' import { headerPlugin } from './headerMdPlugin' // import { textAdPlugin } from './textAdMdPlugin' +import { groupIconMdPlugin,groupIconVitePlugin } from 'vitepress-plugin-group-icons' const nav: ThemeConfig['nav'] = [ { @@ -757,6 +758,7 @@ export default defineConfigWithTheme({ theme: 'github-dark', config(md) { md.use(headerPlugin) + .use(groupIconMdPlugin) // .use(textAdPlugin) } }, @@ -808,6 +810,12 @@ Vue.js - The Progressive JavaScript Framework ## Table of Contents {toc}` + }) as Plugin, + groupIconVitePlugin({ + customIcon: { + cypress: 'vscode-icons:file-type-cypress', + 'testing library': 'logos:testing-library' + } }) as Plugin ] } diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts index 9ea1fb93ff..081f3c5192 100644 --- a/.vitepress/theme/index.ts +++ b/.vitepress/theme/index.ts @@ -11,6 +11,8 @@ import { import SponsorsAside from './components/SponsorsAside.vue' import VueSchoolLink from './components/VueSchoolLink.vue' import Banner from './components/Banner.vue' +import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css' +import 'virtual:group-icons.css' // import TextAd from './components/TextAd.vue' export default Object.assign({}, VPTheme, { diff --git a/.vitepress/theme/styles/index.css b/.vitepress/theme/styles/index.css index 26324134e5..8bd6bb8cfe 100644 --- a/.vitepress/theme/styles/index.css +++ b/.vitepress/theme/styles/index.css @@ -4,3 +4,4 @@ @import "./inline-demo.css"; @import "./utilities.css"; @import "./style-guide.css"; +@import "./vars.css"; diff --git a/.vitepress/theme/styles/vars.css b/.vitepress/theme/styles/vars.css new file mode 100644 index 0000000000..1702caba31 --- /dev/null +++ b/.vitepress/theme/styles/vars.css @@ -0,0 +1,16 @@ +:root { + --vp-code-tab-active-bar-color: var(--vt-c-green); + --vp-code-tab-active-text-color: var(--vt-c-text-inverse-1); + --vp-code-tab-text-color: var(--vt-c-text-inverse-2); + --vp-code-tab-hover-text-color: var(--vt-c-text-inverse-1); + --vp-code-tab-bg: #292d3ef0; + --vp-code-block-bg: #292d3ef0; +} + +.dark { + --vp-code-tab-text-color: var(--vt-c-text-2); + --vp-code-tab-hover-text-color: var(--vt-c-text-1); + --vp-code-tab-active-text-color: var(--vt-c-text-1); + --vp-code-tab-bg: var(--vt-c-black-mute); + --vp-code-block-bg: var(--vt-c-black-mute); +} diff --git a/package.json b/package.json index aab3d1f55e..5162c5b784 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@types/markdown-it": "^14.1.2", "@types/node": "^22.7.5", "typescript": "^5.6.3", + "vitepress-plugin-group-icons": "^1.5.4", "vitepress-plugin-llms": "^0.0.8", "vue-tsc": "^2.1.6" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 113334eced..68311a33c6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,6 +39,9 @@ importers: typescript: specifier: ^5.6.3 version: 5.6.3 + vitepress-plugin-group-icons: + specifier: ^1.5.4 + version: 1.5.4(markdown-it@14.1.0)(vite@5.4.14(@types/node@22.7.5)) vitepress-plugin-llms: specifier: ^0.0.8 version: 0.0.8 @@ -185,6 +188,12 @@ packages: '@algolia/transporter@4.24.0': resolution: {integrity: sha512-86nI7w6NzWxd1Zp9q3413dRshDqAzSbsQjhcDhPIatEFiZrL1/TjnHL8S7jVKFePlIMzDsZWXAXwXzcok9c5oA==} + '@antfu/install-pkg@1.1.0': + resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==} + + '@antfu/utils@8.1.1': + resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==} + '@babel/helper-string-parser@7.25.7': resolution: {integrity: sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==} engines: {node: '>=6.9.0'} @@ -386,12 +395,21 @@ packages: cpu: [x64] os: [win32] + '@iconify-json/logos@1.2.4': + resolution: {integrity: sha512-XC4If5D/hbaZvUkTV8iaZuGlQCyG6CNOlaAaJaGa13V5QMYwYjgtKk3vPP8wz3wtTVNVEVk3LRx1fOJz+YnSMw==} + '@iconify-json/simple-icons@1.2.21': resolution: {integrity: sha512-aqbIuVshMZ2fNEhm25//9DoKudboXF3CpoEQJJlHl9gVSVNOTr4cgaCIZvgSEYmys2HHEfmhcpoZIhoEFZS8SQ==} + '@iconify-json/vscode-icons@1.2.21': + resolution: {integrity: sha512-velkIWAZRxvM9VuhkVeD6obyw0UXjTFk7lqcaxIzY+X7lXx2+yX2MoMbIwgpH3PbgqjvymS/SujBb4aWYcfmhw==} + '@iconify/types@2.0.0': resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + '@iconify/utils@2.3.0': + resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==} + '@jridgewell/sourcemap-codec@1.5.0': resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==} @@ -688,6 +706,11 @@ packages: '@vueuse/shared@12.5.0': resolution: {integrity: sha512-vMpcL1lStUU6O+kdj6YdHDixh0odjPAUM15uJ9f7MY781jcYkIwFA4iv2EfoIPO6vBmvutI1HxxAwmf0cx5ISQ==} + acorn@8.14.1: + resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==} + engines: {node: '>=0.4.0'} + hasBin: true + algoliasearch@4.24.0: resolution: {integrity: sha512-bf0QV/9jVejssFBmz2HQLxUadxk574t4iwjCKp5E7NBzwKkrDEhKPISIIjAU/p6K5qDx3qoeh4+26zWN1jmw3g==} @@ -698,6 +721,9 @@ packages: argparse@1.0.10: resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==} + argparse@2.0.1: + resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -725,6 +751,12 @@ packages: computeds@0.0.1: resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==} + confbox@0.1.8: + resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==} + + confbox@0.2.2: + resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==} + copy-anything@3.0.5: resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==} engines: {node: '>=12.13'} @@ -735,6 +767,15 @@ packages: de-indent@1.0.2: resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} + debug@4.4.1: + resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + dequal@2.0.3: resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} engines: {node: '>=6'} @@ -765,6 +806,9 @@ packages: estree-walker@2.0.2: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + exsolve@1.0.5: + resolution: {integrity: sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg==} + extend-shallow@2.0.1: resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==} engines: {node: '>=0.10.0'} @@ -777,6 +821,10 @@ packages: engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] + globals@15.15.0: + resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==} + engines: {node: '>=18'} + gray-matter@4.0.3: resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==} engines: {node: '>=6.0'} @@ -816,12 +864,26 @@ packages: resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} engines: {node: '>=0.10.0'} + kolorist@1.8.0: + resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} + + linkify-it@5.0.0: + resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==} + + local-pkg@1.1.1: + resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==} + engines: {node: '>=14'} + magic-string@0.30.12: resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==} mark.js@8.11.1: resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==} + markdown-it@14.1.0: + resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==} + hasBin: true + markdown-title@1.0.2: resolution: {integrity: sha512-MqIQVVkz+uGEHi3TsHx/czcxxCbRIL7sv5K5DnYw/tI+apY54IbPefV/cmgxp6LoJSEx/TqcHdLs/298afG5QQ==} engines: {node: '>=6'} @@ -829,6 +891,9 @@ packages: mdast-util-to-hast@13.2.0: resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==} + mdurl@2.0.0: + resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==} + micromark-util-character@2.1.1: resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==} @@ -858,6 +923,12 @@ packages: mitt@3.0.1: resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==} + mlly@1.7.4: + resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==} + + ms@2.1.3: + resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} + muggle-string@0.4.1: resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==} @@ -872,15 +943,27 @@ packages: oniguruma-to-es@2.3.0: resolution: {integrity: sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g==} + package-manager-detector@1.3.0: + resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==} + path-browserify@1.0.1: resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} + pathe@2.0.3: + resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==} + perfect-debounce@1.0.0: resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==} picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} + pkg-types@1.3.1: + resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==} + + pkg-types@2.1.0: + resolution: {integrity: sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==} + postcss@8.5.1: resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==} engines: {node: ^10 || ^12 || >=14} @@ -894,6 +977,13 @@ packages: property-information@6.5.0: resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==} + punycode.js@2.3.1: + resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==} + engines: {node: '>=6'} + + quansync@0.2.10: + resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==} + regex-recursion@5.1.1: resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==} @@ -957,6 +1047,9 @@ packages: tiny-decode@0.1.3: resolution: {integrity: sha512-1z+tXaZpPUyREOfjKDQj5lR6HfD6Pa4NF7pb/9ep7sP4+X5WF76bGdJktWCY1Rm+aMR46vJ75VAL/oAptpD1AA==} + tinyexec@1.0.1: + resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==} + to-fast-properties@2.0.0: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} engines: {node: '>=4'} @@ -969,6 +1062,12 @@ packages: engines: {node: '>=14.17'} hasBin: true + uc.micro@2.1.0: + resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==} + + ufo@1.6.1: + resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==} + undici-types@6.19.8: resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==} @@ -1024,6 +1123,12 @@ packages: terser: optional: true + vitepress-plugin-group-icons@1.5.4: + resolution: {integrity: sha512-B7kuASLeUmJzbrLHzaW6EPCEDEAaIRJgR5R6Uooj5RGOqWXNQ/zfHMNTlXqOPDQDRCILgWqR4E/1T49C96n6Qg==} + peerDependencies: + markdown-it: '>=14' + vite: '>=3' + vitepress-plugin-llms@0.0.8: resolution: {integrity: sha512-xz4wb87TqAn75RbKwQs+w+63OToK7W57pmLKIEY849Izpzi/WvTI9T+rCDwabdhPFirI3LLT2P2nErsSrik0/A==} @@ -1281,6 +1386,13 @@ snapshots: '@algolia/logger-common': 4.24.0 '@algolia/requester-common': 4.24.0 + '@antfu/install-pkg@1.1.0': + dependencies: + package-manager-detector: 1.3.0 + tinyexec: 1.0.1 + + '@antfu/utils@8.1.1': {} + '@babel/helper-string-parser@7.25.7': {} '@babel/helper-validator-identifier@7.25.7': {} @@ -1412,12 +1524,33 @@ snapshots: '@esbuild/win32-x64@0.21.5': optional: true + '@iconify-json/logos@1.2.4': + dependencies: + '@iconify/types': 2.0.0 + '@iconify-json/simple-icons@1.2.21': dependencies: '@iconify/types': 2.0.0 + '@iconify-json/vscode-icons@1.2.21': + dependencies: + '@iconify/types': 2.0.0 + '@iconify/types@2.0.0': {} + '@iconify/utils@2.3.0': + dependencies: + '@antfu/install-pkg': 1.1.0 + '@antfu/utils': 8.1.1 + '@iconify/types': 2.0.0 + debug: 4.4.1 + globals: 15.15.0 + kolorist: 1.8.0 + local-pkg: 1.1.1 + mlly: 1.7.4 + transitivePeerDependencies: + - supports-color + '@jridgewell/sourcemap-codec@1.5.0': {} '@rollup/rollup-android-arm-eabi@4.31.0': @@ -1736,6 +1869,8 @@ snapshots: transitivePeerDependencies: - typescript + acorn@8.14.1: {} + algoliasearch@4.24.0: dependencies: '@algolia/cache-browser-local-storage': 4.24.0 @@ -1774,6 +1909,8 @@ snapshots: dependencies: sprintf-js: 1.0.3 + argparse@2.0.1: {} + balanced-match@1.0.2: {} birpc@0.2.19: {} @@ -1794,6 +1931,10 @@ snapshots: computeds@0.0.1: {} + confbox@0.1.8: {} + + confbox@0.2.2: {} + copy-anything@3.0.5: dependencies: is-what: 4.1.16 @@ -1802,6 +1943,10 @@ snapshots: de-indent@1.0.2: {} + debug@4.4.1: + dependencies: + ms: 2.1.3 + dequal@2.0.3: {} devlop@1.1.0: @@ -1844,6 +1989,8 @@ snapshots: estree-walker@2.0.2: {} + exsolve@1.0.5: {} + extend-shallow@2.0.1: dependencies: is-extendable: 0.1.1 @@ -1855,6 +2002,8 @@ snapshots: fsevents@2.3.3: optional: true + globals@15.15.0: {} + gray-matter@4.0.3: dependencies: js-yaml: 3.14.1 @@ -1899,12 +2048,33 @@ snapshots: kind-of@6.0.3: {} + kolorist@1.8.0: {} + + linkify-it@5.0.0: + dependencies: + uc.micro: 2.1.0 + + local-pkg@1.1.1: + dependencies: + mlly: 1.7.4 + pkg-types: 2.1.0 + quansync: 0.2.10 + magic-string@0.30.12: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 mark.js@8.11.1: {} + markdown-it@14.1.0: + dependencies: + argparse: 2.0.1 + entities: 4.5.0 + linkify-it: 5.0.0 + mdurl: 2.0.0 + punycode.js: 2.3.1 + uc.micro: 2.1.0 + markdown-title@1.0.2: {} mdast-util-to-hast@13.2.0: @@ -1919,6 +2089,8 @@ snapshots: unist-util-visit: 5.0.0 vfile: 6.0.3 + mdurl@2.0.0: {} + micromark-util-character@2.1.1: dependencies: micromark-util-symbol: 2.0.1 @@ -1948,6 +2120,15 @@ snapshots: mitt@3.0.1: {} + mlly@1.7.4: + dependencies: + acorn: 8.14.1 + pathe: 2.0.3 + pkg-types: 1.3.1 + ufo: 1.6.1 + + ms@2.1.3: {} + muggle-string@0.4.1: {} nanoid@3.3.8: {} @@ -1960,12 +2141,28 @@ snapshots: regex: 5.1.1 regex-recursion: 5.1.1 + package-manager-detector@1.3.0: {} + path-browserify@1.0.1: {} + pathe@2.0.3: {} + perfect-debounce@1.0.0: {} picocolors@1.1.1: {} + pkg-types@1.3.1: + dependencies: + confbox: 0.1.8 + mlly: 1.7.4 + pathe: 2.0.3 + + pkg-types@2.1.0: + dependencies: + confbox: 0.2.2 + exsolve: 1.0.5 + pathe: 2.0.3 + postcss@8.5.1: dependencies: nanoid: 3.3.8 @@ -1978,6 +2175,10 @@ snapshots: property-information@6.5.0: {} + punycode.js@2.3.1: {} + + quansync@0.2.10: {} + regex-recursion@5.1.1: dependencies: regex: 5.1.1 @@ -2061,12 +2262,18 @@ snapshots: dependencies: entities: 4.5.0 + tinyexec@1.0.1: {} + to-fast-properties@2.0.0: {} trim-lines@3.0.1: {} typescript@5.6.3: {} + uc.micro@2.1.0: {} + + ufo@1.6.1: {} + undici-types@6.19.8: {} unist-util-is@6.0.0: @@ -2111,6 +2318,16 @@ snapshots: '@types/node': 22.7.5 fsevents: 2.3.3 + vitepress-plugin-group-icons@1.5.4(markdown-it@14.1.0)(vite@5.4.14(@types/node@22.7.5)): + dependencies: + '@iconify-json/logos': 1.2.4 + '@iconify-json/vscode-icons': 1.2.21 + '@iconify/utils': 2.3.0 + markdown-it: 14.1.0 + vite: 5.4.14(@types/node@22.7.5) + transitivePeerDependencies: + - supports-color + vitepress-plugin-llms@0.0.8: dependencies: gray-matter: 4.0.3 diff --git a/src/api/compile-time-flags.md b/src/api/compile-time-flags.md index b590cad810..98dbbc9c71 100644 --- a/src/api/compile-time-flags.md +++ b/src/api/compile-time-flags.md @@ -40,8 +40,7 @@ See [Configuration Guides](#configuration-guides) on how to configure them depen `@vitejs/plugin-vue` automatically provides default values for these flags. To change the default values, use Vite's [`define` config option](https://vitejs.dev/config/shared-options.html#define): -```js -// vite.config.js +```js [vite.config.js] import { defineConfig } from 'vite' export default defineConfig({ @@ -56,8 +55,7 @@ export default defineConfig({ `@vue/cli-service` automatically provides default values for some of these flags. To configure /change the values: -```js -// vue.config.js +```js [vue.config.js] module.exports = { chainWebpack: (config) => { config.plugin('define').tap((definitions) => { @@ -76,8 +74,7 @@ module.exports = { Flags should be defined using webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/): -```js -// webpack.config.js +```js [webpack.config.js] module.exports = { // ... plugins: [ @@ -94,8 +91,7 @@ module.exports = { Flags should be defined using [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace): -```js -// rollup.config.js +```js [rollup.config.js] import replace from '@rollup/plugin-replace' export default { diff --git a/src/guide/extras/reactivity-transform.md b/src/guide/extras/reactivity-transform.md index 09643d3085..8392166828 100644 --- a/src/guide/extras/reactivity-transform.md +++ b/src/guide/extras/reactivity-transform.md @@ -293,8 +293,7 @@ The following only applies up to Vue version 3.3 and below. Support has been rem - Applies to SFCs and js(x)/ts(x) files. A fast usage check is performed on files before applying the transform so there should be no performance cost for files not using the macros. - Note `reactivityTransform` is now a plugin root-level option instead of nested as `script.refSugar`, since it affects not just SFCs. -```js -// vite.config.js +```js [vite.config.js] export default { plugins: [ vue({ @@ -309,8 +308,7 @@ export default { - Currently only affects SFCs - Requires `vue-loader@>=17.0.0` -```js -// vue.config.js +```js [vue.config.js] module.exports = { chainWebpack: (config) => { config.module @@ -331,8 +329,7 @@ module.exports = { - Currently only affects SFCs - Requires `vue-loader@>=17.0.0` -```js -// webpack.config.js +```js [webpack.config.js] module.exports = { module: { rules: [ diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md index c5e3076730..3c594ca15f 100644 --- a/src/guide/extras/web-components.md +++ b/src/guide/extras/web-components.md @@ -24,8 +24,7 @@ app.config.compilerOptions.isCustomElement = (tag) => tag.includes('-') #### Example Vite Config {#example-vite-config} -```js -// vite.config.js +```js [vite.config.js] import vue from '@vitejs/plugin-vue' export default { diff --git a/src/guide/quick-start.md b/src/guide/quick-start.md index f711eee365..fa61c45a90 100644 --- a/src/guide/quick-start.md +++ b/src/guide/quick-start.md @@ -28,43 +28,31 @@ In this section we will introduce how to scaffold a Vue [Single Page Application Make sure you have an up-to-date version of [Node.js](https://nodejs.org/) installed and your current working directory is the one where you intend to create a project. Run the following command in your command line (without the `$` sign): - - +::: code-group - ```sh - $ npm create vue@latest - ``` - - - - - ```sh - $ pnpm create vue@latest - ``` +```sh [npm] +$ npm create vue@latest +``` - - +```sh [pnpm] +$ pnpm create vue@latest +``` - ```sh - # For Yarn (v1+) - $ yarn create vue +```sh [yarn] +# For Yarn (v1+) +$ yarn create vue - # For Yarn Modern (v2+) - $ yarn create vue@latest +# For Yarn Modern (v2+) +$ yarn create vue@latest - # For Yarn ^v4.11 - $ yarn dlx create-vue@latest - ``` - - - - - ```sh - $ bun create vue@latest - ``` +# For Yarn ^v4.11 +$ yarn dlx create-vue@latest +``` - - +```sh [bun] +$ bun create vue@latest +``` +::: This command will install and execute [create-vue](https://github.com/vuejs/create-vue), the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support: @@ -84,44 +72,34 @@ This command will install and execute [create-vue](https://github.com/vuejs/crea If you are unsure about an option, simply choose `No` by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server: - - - - ```sh-vue - $ cd {{''}} - $ npm install - $ npm run dev - ``` +::: code-group - - - - ```sh-vue - $ cd {{''}} - $ pnpm install - $ pnpm run dev - ``` +```sh-vue [npm] +$ cd {{''}} +$ npm install +$ npm run dev +``` - - +```sh-vue [pnpm] +$ cd {{''}} +$ pnpm install +$ pnpm run dev +``` - ```sh-vue - $ cd {{''}} - $ yarn - $ yarn dev - ``` +```sh-vue [yarn] +$ cd {{''}} +$ yarn +$ yarn dev +``` - - +```sh-vue [bun] +$ cd {{''}} +$ bun install +$ bun run dev +``` - ```sh-vue - $ cd {{''}} - $ bun install - $ bun run dev - ``` +::: - - You should now have your first Vue project running! Note that the example components in the generated project are written using the [Composition API](/guide/introduction#composition-api) and `