diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 58486e2fe6..80c74de089 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -497,10 +497,6 @@ export const sidebar: ThemeConfig['sidebar'] = { text: 'List with Transitions', link: '/examples/#list-transition' }, - { - text: 'TodoMVC', - link: '/examples/#todomvc' - } ] }, { diff --git a/.vitepress/inlined-scripts/restorePreference.js b/.vitepress/inlined-scripts/restorePreference.js index d4aab6093c..5e18b50ffa 100644 --- a/.vitepress/inlined-scripts/restorePreference.js +++ b/.vitepress/inlined-scripts/restorePreference.js @@ -8,6 +8,6 @@ restore('vue-docs-prefer-composition', 'prefer-composition', true) restore('vue-docs-prefer-sfc', 'prefer-sfc', true) - window.__VUE_BANNER_ID__ = 'vueconf2025' - restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed') + // window.__VUE_BANNER_ID__ = '' + // restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed') })() diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue index a41d08221c..6730fcd48d 100644 --- a/.vitepress/theme/components/Banner.vue +++ b/.vitepress/theme/components/Banner.vue @@ -22,31 +22,16 @@ function dismiss() { @@ -65,12 +50,12 @@ html:not(.banner-dismissed) { font-weight: 600; color: #fff; background-color: var(--vt-c-green); - background: #0f172a; - display: flex; - justify-content: center; - align-items: center; - - + background: linear-gradient( + 90deg, + rgba(66, 184, 131, 1) 0%, + rgba(39, 179, 137, 1) 19%, + rgba(100, 126, 255, 1) 100% + ); } .banner-dismissed .banner { @@ -85,7 +70,7 @@ button { position: absolute; right: 0; top: 0; - padding: 10px 10px; + padding: 5px; } .close { @@ -94,61 +79,10 @@ button { fill: #fff; transform: rotate(45deg); } - -.vt-banner-text { - color: #fff; - font-size: 16px; -} - -.vt-text-primary { - color: #75c05e; -} - -.vt-primary-action { - background: #75c05e; - color: #121c1a; - padding: 8px 15px; - border-radius: 5px; - font-size: 14px; - text-decoration: none; - margin: 0 10px; - font-weight: bold; -} - -.vt-primary-action:hover { - text-decoration: none; - background: #c4d141; -} - -@media (max-width: 1280px) { - .banner .vt-banner-text { - font-size: 14px; - } - - -} - -@media (max-width: 780px) { - .vt-tagline { - display: none; - } - .vt-primary-action { - margin: 0 10px; - padding: 5px 5px; - } - - .vt-time-now { - display: none; - } -} - -@media (max-width: 560px) { - - .vt-place { +/* +@media (max-width: 720px) { + a > span { display: none; } - .vt-date { - display: none; - } -} +} */ diff --git a/.vitepress/theme/components/ScrimbaLink.vue b/.vitepress/theme/components/ScrimbaLink.vue new file mode 100644 index 0000000000..1fb6021610 --- /dev/null +++ b/.vitepress/theme/components/ScrimbaLink.vue @@ -0,0 +1,59 @@ + + + \ No newline at end of file diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts index 9ea1fb93ff..e2d8379a6b 100644 --- a/.vitepress/theme/index.ts +++ b/.vitepress/theme/index.ts @@ -10,14 +10,15 @@ import { } from './components/preferences' import SponsorsAside from './components/SponsorsAside.vue' import VueSchoolLink from './components/VueSchoolLink.vue' -import Banner from './components/Banner.vue' +import ScrimbaLink from './components/ScrimbaLink.vue' +// import Banner from './components/Banner.vue' // import TextAd from './components/TextAd.vue' export default Object.assign({}, VPTheme, { Layout: () => { // @ts-ignore return h(VPTheme.Layout, null, { - banner: () => h(Banner), + // banner: () => h(Banner), 'sidebar-top': () => h(PreferenceSwitch), 'sidebar-bottom': () => h(SecurityUpdateBtn), 'aside-mid': () => h(SponsorsAside) @@ -28,6 +29,7 @@ export default Object.assign({}, VPTheme, { app.provide('prefer-sfc', preferSFC) app.provide('filter-headers', filterHeadersByPreference) app.component('VueSchoolLink', VueSchoolLink) + app.component('ScrimbaLink', ScrimbaLink) // app.component('TextAd', TextAd) } }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 113334eced..be099a8cce 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 4.5.1 '@vue/theme': specifier: ^2.3.0 - version: 2.3.0(@algolia/client-search@5.20.0)(search-insights@2.17.2)(vitepress@1.6.3(@algolia/client-search@5.20.0)(@types/node@22.7.5)(postcss@8.5.1)(search-insights@2.17.2)(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3)) + version: 2.3.0(@algolia/client-search@5.20.0)(search-insights@2.17.2)(vitepress@1.6.3(@algolia/client-search@5.20.0)(@types/node@22.7.5)(postcss@8.5.4)(search-insights@2.17.2)(typescript@5.6.3))(vue@3.5.16(typescript@5.6.3)) dynamics.js: specifier: ^1.1.5 version: 1.1.5 @@ -22,10 +22,10 @@ importers: version: 3.12.5 vitepress: specifier: ^1.4.3 - version: 1.6.3(@algolia/client-search@5.20.0)(@types/node@22.7.5)(postcss@8.5.1)(search-insights@2.17.2)(typescript@5.6.3) + version: 1.6.3(@algolia/client-search@5.20.0)(@types/node@22.7.5)(postcss@8.5.4)(search-insights@2.17.2)(typescript@5.6.3) vue: specifier: ^3.5.12 - version: 3.5.13(typescript@5.6.3) + version: 3.5.16(typescript@5.6.3) devDependencies: '@types/body-scroll-lock': specifier: ^3.1.2 @@ -185,21 +185,21 @@ packages: '@algolia/transporter@4.24.0': resolution: {integrity: sha512-86nI7w6NzWxd1Zp9q3413dRshDqAzSbsQjhcDhPIatEFiZrL1/TjnHL8S7jVKFePlIMzDsZWXAXwXzcok9c5oA==} - '@babel/helper-string-parser@7.25.7': - resolution: {integrity: sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==} + '@babel/helper-string-parser@7.27.1': + resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==} engines: {node: '>=6.9.0'} - '@babel/helper-validator-identifier@7.25.7': - resolution: {integrity: sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==} + '@babel/helper-validator-identifier@7.27.1': + resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==} engines: {node: '>=6.9.0'} - '@babel/parser@7.25.8': - resolution: {integrity: sha512-HcttkxzdPucv3nNFmfOOMfFf64KgdJVqm1KaCm25dPGMLElo9nsLvXeJECQg8UzPuBGLyTSA0ZzqCtDSzKTEoQ==} + '@babel/parser@7.27.3': + resolution: {integrity: sha512-xyYxRj6+tLNDTWi0KCBcZ9V7yg3/lwL9DWh9Uwh/RIVlIfFidggcgxKX3GCXwCiswwcGRawBKbEg2LG/Y8eJhw==} engines: {node: '>=6.0.0'} hasBin: true - '@babel/types@7.25.8': - resolution: {integrity: sha512-JWtuCu8VQsMladxVz/P4HzHUGCAwpuqacmowgXFs5XjxIgKuNjnLokQzuVjlTvIzODaDmpjT3oxcC48vyk9EWg==} + '@babel/types@7.27.3': + resolution: {integrity: sha512-Y1GkI4ktrtvmawoSq+4FCVHNryea6uR+qUQy0AGxLSsjCX0nVmkYQMBLHDkXZuo5hGx7eYdnIaslsdBFm7zbUw==} engines: {node: '>=6.9.0'} '@docsearch/css@3.6.2': @@ -566,20 +566,20 @@ packages: '@vue/compiler-core@3.5.12': resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==} - '@vue/compiler-core@3.5.13': - resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==} + '@vue/compiler-core@3.5.16': + resolution: {integrity: sha512-AOQS2eaQOaaZQoL1u+2rCJIKDruNXVBZSiUD3chnUrsoX5ZTQMaCvXlWNIfxBJuU15r1o7+mpo5223KVtIhAgQ==} '@vue/compiler-dom@3.5.12': resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==} - '@vue/compiler-dom@3.5.13': - resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==} + '@vue/compiler-dom@3.5.16': + resolution: {integrity: sha512-SSJIhBr/teipXiXjmWOVWLnxjNGo65Oj/8wTEQz0nqwQeP75jWZ0n4sF24Zxoht1cuJoWopwj0J0exYwCJ0dCQ==} - '@vue/compiler-sfc@3.5.13': - resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==} + '@vue/compiler-sfc@3.5.16': + resolution: {integrity: sha512-rQR6VSFNpiinDy/DVUE0vHoIDUF++6p910cgcZoaAUm3POxgNOOdS/xgoll3rNdKYTYPnnbARDCZOyZ+QSe6Pw==} - '@vue/compiler-ssr@3.5.13': - resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==} + '@vue/compiler-ssr@3.5.16': + resolution: {integrity: sha512-d2V7kfxbdsjrDSGlJE7my1ZzCXViEcqN6w14DOsDrUCHEA6vbnVCpRFfrc4ryCP/lCKzX2eS1YtnLE/BuC9f/A==} '@vue/compiler-vue2@2.7.16': resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==} @@ -601,22 +601,22 @@ packages: typescript: optional: true - '@vue/reactivity@3.5.13': - resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==} + '@vue/reactivity@3.5.16': + resolution: {integrity: sha512-FG5Q5ee/kxhIm1p2bykPpPwqiUBV3kFySsHEQha5BJvjXdZTUfmya7wP7zC39dFuZAcf/PD5S4Lni55vGLMhvA==} '@vue/repl@4.5.1': resolution: {integrity: sha512-YYXvFue2GOrZ6EWnoA8yQVKzdCIn45+tpwJHzMof1uwrgyYAVY9ynxCsDYeAuWcpaAeylg/nybhFuqiFy2uvYA==} - '@vue/runtime-core@3.5.13': - resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==} + '@vue/runtime-core@3.5.16': + resolution: {integrity: sha512-bw5Ykq6+JFHYxrQa7Tjr+VSzw7Dj4ldR/udyBZbq73fCdJmyy5MPIFR9IX/M5Qs+TtTjuyUTCnmK3lWWwpAcFQ==} - '@vue/runtime-dom@3.5.13': - resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==} + '@vue/runtime-dom@3.5.16': + resolution: {integrity: sha512-T1qqYJsG2xMGhImRUV9y/RseB9d0eCYZQ4CWca9ztCuiPj/XWNNN+lkNBuzVbia5z4/cgxdL28NoQCvC0Xcfww==} - '@vue/server-renderer@3.5.13': - resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==} + '@vue/server-renderer@3.5.16': + resolution: {integrity: sha512-BrX0qLiv/WugguGsnQUJiYOE0Fe5mZTwi6b7X/ybGB0vfrPH9z0gD/Y6WOR1sGCgX4gc25L1RYS5eYQKDMoNIg==} peerDependencies: - vue: 3.5.13 + vue: 3.5.16 '@vue/shared@3.5.12': resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==} @@ -624,6 +624,9 @@ packages: '@vue/shared@3.5.13': resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==} + '@vue/shared@3.5.16': + resolution: {integrity: sha512-c/0fWy3Jw6Z8L9FmTyYfkpM5zklnqqa9+a6dz3DvONRKW2NEbh46BP0FHuLFSWi2TnQEtp91Z6zOWNrU6QiyPg==} + '@vue/theme@2.3.0': resolution: {integrity: sha512-eKd4ipY6i6P2XD2iRVgbxs936g7pesEY2AgNX24C/sjzcmCnm48J7uV8xKXI2du2qfA89/r5QQp7bqZVf2Tekw==} peerDependencies: @@ -816,8 +819,8 @@ packages: resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} engines: {node: '>=0.10.0'} - magic-string@0.30.12: - resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==} + magic-string@0.30.17: + resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==} mark.js@8.11.1: resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==} @@ -861,6 +864,11 @@ packages: muggle-string@0.4.1: resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==} + nanoid@3.3.11: + resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + nanoid@3.3.8: resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} @@ -885,6 +893,10 @@ packages: resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==} engines: {node: ^10 || ^12 || >=14} + postcss@8.5.4: + resolution: {integrity: sha512-QSa9EBe+uwlGTFmHsPKokv3B/oEMQZxfqW0QqNCyhpa6mB1afzulwn8hihglqAb2pOw+BJgNlmXQ8la2VeHB7w==} + engines: {node: ^10 || ^12 || >=14} + preact@10.24.2: resolution: {integrity: sha512-1cSoF0aCC8uaARATfrlz4VCBqE8LwZwRfLgkxJOQwAlQt6ayTmi0D9OF7nXid1POI5SZidFuG9CnlXbDfLqY/Q==} @@ -957,10 +969,6 @@ packages: tiny-decode@0.1.3: resolution: {integrity: sha512-1z+tXaZpPUyREOfjKDQj5lR6HfD6Pa4NF7pb/9ep7sP4+X5WF76bGdJktWCY1Rm+aMR46vJ75VAL/oAptpD1AA==} - to-fast-properties@2.0.0: - resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} - engines: {node: '>=4'} - trim-lines@3.0.1: resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==} @@ -1059,8 +1067,8 @@ packages: peerDependencies: typescript: '>=5.0.0' - vue@3.5.13: - resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==} + vue@3.5.16: + resolution: {integrity: sha512-rjOV2ecxMd5SiAmof2xzh2WxntRcigkX/He4YFJ6WdRvVUrbt6DxC1Iujh10XLl8xCDRDtGKMeO3D+pRQ1PP9w==} peerDependencies: typescript: '*' peerDependenciesMeta: @@ -1281,19 +1289,18 @@ snapshots: '@algolia/logger-common': 4.24.0 '@algolia/requester-common': 4.24.0 - '@babel/helper-string-parser@7.25.7': {} + '@babel/helper-string-parser@7.27.1': {} - '@babel/helper-validator-identifier@7.25.7': {} + '@babel/helper-validator-identifier@7.27.1': {} - '@babel/parser@7.25.8': + '@babel/parser@7.27.3': dependencies: - '@babel/types': 7.25.8 + '@babel/types': 7.27.3 - '@babel/types@7.25.8': + '@babel/types@7.27.3': dependencies: - '@babel/helper-string-parser': 7.25.7 - '@babel/helper-validator-identifier': 7.25.7 - to-fast-properties: 2.0.0 + '@babel/helper-string-parser': 7.27.1 + '@babel/helper-validator-identifier': 7.27.1 '@docsearch/css@3.6.2': {} @@ -1548,10 +1555,10 @@ snapshots: '@ungap/structured-clone@1.2.1': {} - '@vitejs/plugin-vue@5.2.1(vite@5.4.14(@types/node@22.7.5))(vue@3.5.13(typescript@5.6.3))': + '@vitejs/plugin-vue@5.2.1(vite@5.4.14(@types/node@22.7.5))(vue@3.5.16(typescript@5.6.3))': dependencies: vite: 5.4.14(@types/node@22.7.5) - vue: 3.5.13(typescript@5.6.3) + vue: 3.5.16(typescript@5.6.3) '@volar/language-core@2.4.6': dependencies: @@ -1567,16 +1574,16 @@ snapshots: '@vue/compiler-core@3.5.12': dependencies: - '@babel/parser': 7.25.8 + '@babel/parser': 7.27.3 '@vue/shared': 3.5.12 entities: 4.5.0 estree-walker: 2.0.2 source-map-js: 1.2.1 - '@vue/compiler-core@3.5.13': + '@vue/compiler-core@3.5.16': dependencies: - '@babel/parser': 7.25.8 - '@vue/shared': 3.5.13 + '@babel/parser': 7.27.3 + '@vue/shared': 3.5.16 entities: 4.5.0 estree-walker: 2.0.2 source-map-js: 1.2.1 @@ -1586,27 +1593,27 @@ snapshots: '@vue/compiler-core': 3.5.12 '@vue/shared': 3.5.12 - '@vue/compiler-dom@3.5.13': + '@vue/compiler-dom@3.5.16': dependencies: - '@vue/compiler-core': 3.5.13 - '@vue/shared': 3.5.13 + '@vue/compiler-core': 3.5.16 + '@vue/shared': 3.5.16 - '@vue/compiler-sfc@3.5.13': + '@vue/compiler-sfc@3.5.16': dependencies: - '@babel/parser': 7.25.8 - '@vue/compiler-core': 3.5.13 - '@vue/compiler-dom': 3.5.13 - '@vue/compiler-ssr': 3.5.13 - '@vue/shared': 3.5.13 + '@babel/parser': 7.27.3 + '@vue/compiler-core': 3.5.16 + '@vue/compiler-dom': 3.5.16 + '@vue/compiler-ssr': 3.5.16 + '@vue/shared': 3.5.16 estree-walker: 2.0.2 - magic-string: 0.30.12 - postcss: 8.5.1 + magic-string: 0.30.17 + postcss: 8.5.4 source-map-js: 1.2.1 - '@vue/compiler-ssr@3.5.13': + '@vue/compiler-ssr@3.5.16': dependencies: - '@vue/compiler-dom': 3.5.13 - '@vue/shared': 3.5.13 + '@vue/compiler-dom': 3.5.16 + '@vue/shared': 3.5.16 '@vue/compiler-vue2@2.7.16': dependencies: @@ -1644,43 +1651,45 @@ snapshots: optionalDependencies: typescript: 5.6.3 - '@vue/reactivity@3.5.13': + '@vue/reactivity@3.5.16': dependencies: - '@vue/shared': 3.5.13 + '@vue/shared': 3.5.16 '@vue/repl@4.5.1': {} - '@vue/runtime-core@3.5.13': + '@vue/runtime-core@3.5.16': dependencies: - '@vue/reactivity': 3.5.13 - '@vue/shared': 3.5.13 + '@vue/reactivity': 3.5.16 + '@vue/shared': 3.5.16 - '@vue/runtime-dom@3.5.13': + '@vue/runtime-dom@3.5.16': dependencies: - '@vue/reactivity': 3.5.13 - '@vue/runtime-core': 3.5.13 - '@vue/shared': 3.5.13 + '@vue/reactivity': 3.5.16 + '@vue/runtime-core': 3.5.16 + '@vue/shared': 3.5.16 csstype: 3.1.3 - '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.6.3))': + '@vue/server-renderer@3.5.16(vue@3.5.16(typescript@5.6.3))': dependencies: - '@vue/compiler-ssr': 3.5.13 - '@vue/shared': 3.5.13 - vue: 3.5.13(typescript@5.6.3) + '@vue/compiler-ssr': 3.5.16 + '@vue/shared': 3.5.16 + vue: 3.5.16(typescript@5.6.3) '@vue/shared@3.5.12': {} '@vue/shared@3.5.13': {} - '@vue/theme@2.3.0(@algolia/client-search@5.20.0)(search-insights@2.17.2)(vitepress@1.6.3(@algolia/client-search@5.20.0)(@types/node@22.7.5)(postcss@8.5.1)(search-insights@2.17.2)(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))': + '@vue/shared@3.5.16': {} + + '@vue/theme@2.3.0(@algolia/client-search@5.20.0)(search-insights@2.17.2)(vitepress@1.6.3(@algolia/client-search@5.20.0)(@types/node@22.7.5)(postcss@8.5.4)(search-insights@2.17.2)(typescript@5.6.3))(vue@3.5.16(typescript@5.6.3))': dependencies: '@docsearch/css': 3.6.2 '@docsearch/js': 3.6.2(@algolia/client-search@5.20.0)(search-insights@2.17.2) - '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.6.3)) + '@vueuse/core': 10.11.1(vue@3.5.16(typescript@5.6.3)) body-scroll-lock: 4.0.0-beta.0 normalize.css: 8.0.1 tiny-decode: 0.1.3 - vitepress: 1.6.3(@algolia/client-search@5.20.0)(@types/node@22.7.5)(postcss@8.5.1)(search-insights@2.17.2)(typescript@5.6.3) + vitepress: 1.6.3(@algolia/client-search@5.20.0)(@types/node@22.7.5)(postcss@8.5.4)(search-insights@2.17.2)(typescript@5.6.3) transitivePeerDependencies: - '@algolia/client-search' - '@types/react' @@ -1690,12 +1699,12 @@ snapshots: - search-insights - vue - '@vueuse/core@10.11.1(vue@3.5.13(typescript@5.6.3))': + '@vueuse/core@10.11.1(vue@3.5.16(typescript@5.6.3))': dependencies: '@types/web-bluetooth': 0.0.20 '@vueuse/metadata': 10.11.1 - '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.6.3)) - vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3)) + '@vueuse/shared': 10.11.1(vue@3.5.16(typescript@5.6.3)) + vue-demi: 0.14.10(vue@3.5.16(typescript@5.6.3)) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -1705,7 +1714,7 @@ snapshots: '@types/web-bluetooth': 0.0.20 '@vueuse/metadata': 12.5.0 '@vueuse/shared': 12.5.0(typescript@5.6.3) - vue: 3.5.13(typescript@5.6.3) + vue: 3.5.16(typescript@5.6.3) transitivePeerDependencies: - typescript @@ -1713,7 +1722,7 @@ snapshots: dependencies: '@vueuse/core': 12.5.0(typescript@5.6.3) '@vueuse/shared': 12.5.0(typescript@5.6.3) - vue: 3.5.13(typescript@5.6.3) + vue: 3.5.16(typescript@5.6.3) optionalDependencies: focus-trap: 7.6.4 transitivePeerDependencies: @@ -1723,16 +1732,16 @@ snapshots: '@vueuse/metadata@12.5.0': {} - '@vueuse/shared@10.11.1(vue@3.5.13(typescript@5.6.3))': + '@vueuse/shared@10.11.1(vue@3.5.16(typescript@5.6.3))': dependencies: - vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3)) + vue-demi: 0.14.10(vue@3.5.16(typescript@5.6.3)) transitivePeerDependencies: - '@vue/composition-api' - vue '@vueuse/shared@12.5.0(typescript@5.6.3)': dependencies: - vue: 3.5.13(typescript@5.6.3) + vue: 3.5.16(typescript@5.6.3) transitivePeerDependencies: - typescript @@ -1899,7 +1908,7 @@ snapshots: kind-of@6.0.3: {} - magic-string@0.30.12: + magic-string@0.30.17: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 @@ -1950,6 +1959,8 @@ snapshots: muggle-string@0.4.1: {} + nanoid@3.3.11: {} + nanoid@3.3.8: {} normalize.css@8.0.1: {} @@ -1972,6 +1983,12 @@ snapshots: picocolors: 1.1.1 source-map-js: 1.2.1 + postcss@8.5.4: + dependencies: + nanoid: 3.3.11 + picocolors: 1.1.1 + source-map-js: 1.2.1 + preact@10.24.2: {} preact@10.25.4: {} @@ -2061,8 +2078,6 @@ snapshots: dependencies: entities: 4.5.0 - to-fast-properties@2.0.0: {} - trim-lines@3.0.1: {} typescript@5.6.3: {} @@ -2118,7 +2133,7 @@ snapshots: minimatch: 10.0.1 picocolors: 1.1.1 - vitepress@1.6.3(@algolia/client-search@5.20.0)(@types/node@22.7.5)(postcss@8.5.1)(search-insights@2.17.2)(typescript@5.6.3): + vitepress@1.6.3(@algolia/client-search@5.20.0)(@types/node@22.7.5)(postcss@8.5.4)(search-insights@2.17.2)(typescript@5.6.3): dependencies: '@docsearch/css': 3.8.2 '@docsearch/js': 3.8.2(@algolia/client-search@5.20.0)(search-insights@2.17.2) @@ -2127,7 +2142,7 @@ snapshots: '@shikijs/transformers': 2.1.0 '@shikijs/types': 2.1.0 '@types/markdown-it': 14.1.2 - '@vitejs/plugin-vue': 5.2.1(vite@5.4.14(@types/node@22.7.5))(vue@3.5.13(typescript@5.6.3)) + '@vitejs/plugin-vue': 5.2.1(vite@5.4.14(@types/node@22.7.5))(vue@3.5.16(typescript@5.6.3)) '@vue/devtools-api': 7.7.0 '@vue/shared': 3.5.13 '@vueuse/core': 12.5.0(typescript@5.6.3) @@ -2137,9 +2152,9 @@ snapshots: minisearch: 7.1.1 shiki: 2.1.0 vite: 5.4.14(@types/node@22.7.5) - vue: 3.5.13(typescript@5.6.3) + vue: 3.5.16(typescript@5.6.3) optionalDependencies: - postcss: 8.5.1 + postcss: 8.5.4 transitivePeerDependencies: - '@algolia/client-search' - '@types/node' @@ -2169,9 +2184,9 @@ snapshots: vscode-uri@3.0.8: {} - vue-demi@0.14.10(vue@3.5.13(typescript@5.6.3)): + vue-demi@0.14.10(vue@3.5.16(typescript@5.6.3)): dependencies: - vue: 3.5.13(typescript@5.6.3) + vue: 3.5.16(typescript@5.6.3) vue-tsc@2.1.6(typescript@5.6.3): dependencies: @@ -2180,13 +2195,13 @@ snapshots: semver: 7.6.3 typescript: 5.6.3 - vue@3.5.13(typescript@5.6.3): + vue@3.5.16(typescript@5.6.3): dependencies: - '@vue/compiler-dom': 3.5.13 - '@vue/compiler-sfc': 3.5.13 - '@vue/runtime-dom': 3.5.13 - '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.6.3)) - '@vue/shared': 3.5.13 + '@vue/compiler-dom': 3.5.16 + '@vue/compiler-sfc': 3.5.16 + '@vue/runtime-dom': 3.5.16 + '@vue/server-renderer': 3.5.16(vue@3.5.16(typescript@5.6.3)) + '@vue/shared': 3.5.16 optionalDependencies: typescript: 5.6.3 diff --git a/src/about/faq.md b/src/about/faq.md index f717ce7d58..860813a5be 100644 --- a/src/about/faq.md +++ b/src/about/faq.md @@ -20,7 +20,7 @@ If you intend to migrate an existing Vue 2 app to Vue 3, consult the [migration ## Is Vue 2 Still Supported? {#is-vue-2-still-supported} -Vue 2.7, which was shipped in July 2022, is the final minor release of the Vue 2 version range. Vue 2 has now entered maintenance mode: it will no longer ship new features, but will continue to receive critical bug fixes and security updates for 18 months starting from the 2.7 release date. This means **Vue 2 will reach End of Life on December 31st, 2023**. +Vue 2.7, which was shipped in July 2022, is the final minor release of the Vue 2 version range. Vue 2 has entered maintenance mode: it will no longer ship new features, but will continue to receive critical bug fixes and security updates for 18 months starting from the 2.7 release date. This means **Vue 2 reached End of Life on December 31st, 2023**. We believe this should provide plenty of time for most of the ecosystem to migrate over to Vue 3. However, we also understand that there could be teams or projects that cannot upgrade by this timeline while still needing to fulfill security and compliance requirements. We are partnering with industry experts to provide extended support for Vue 2 for teams with such needs - if your team expects to be using Vue 2 beyond the end of 2023, make sure to plan ahead and learn more about [Vue 2 Extended LTS](https://v2.vuejs.org/lts/). diff --git a/src/api/composition-api-lifecycle.md b/src/api/composition-api-lifecycle.md index d274fa8bbf..035c0741cc 100644 --- a/src/api/composition-api-lifecycle.md +++ b/src/api/composition-api-lifecycle.md @@ -210,7 +210,7 @@ Registers a hook to be called when an error propagating from a descendant compon In production, the 3rd argument (`info`) will be a shortened code instead of the full information string. You can find the code to string mapping in the [Production Error Code Reference](/error-reference/#runtime-errors). ::: - You can modify component state in `errorCaptured()` to display an error state to the user. However, it is important that the error state should not render the original content that caused the error; otherwise the component will be thrown into an infinite render loop. + You can modify component state in `onErrorCaptured()` to display an error state to the user. However, it is important that the error state should not render the original content that caused the error; otherwise the component will be thrown into an infinite render loop. The hook can return `false` to stop the error from propagating further. See error propagation details below. diff --git a/src/api/reactivity-advanced.md b/src/api/reactivity-advanced.md index 825b2373f5..a8c5f6350f 100644 --- a/src/api/reactivity-advanced.md +++ b/src/api/reactivity-advanced.md @@ -38,7 +38,7 @@ Shallow version of [`ref()`](./reactivity-core#ref). ## triggerRef() {#triggerref} -Force trigger effects that depends on a [shallow ref](#shallowref). This is typically used after making deep mutations to the inner value of a shallow ref. +Force trigger effects that depend on a [shallow ref](#shallowref). This is typically used after making deep mutations to the inner value of a shallow ref. - **Type** diff --git a/src/examples/src/crud/App/composition.js b/src/examples/src/crud/App/composition.js index ef63960e26..5543164aa6 100644 --- a/src/examples/src/crud/App/composition.js +++ b/src/examples/src/crud/App/composition.js @@ -15,7 +15,7 @@ export default { ) watch(selected, (name) => { - ;[last.value, first.value] = name.split(', ') + [last.value, first.value] = name.split(', ') }) function create() { diff --git a/src/examples/src/todomvc/App/composition.js b/src/examples/src/todomvc/App/composition.js deleted file mode 100644 index 3d168e840f..0000000000 --- a/src/examples/src/todomvc/App/composition.js +++ /dev/null @@ -1,99 +0,0 @@ -import { ref, computed, watchEffect } from 'vue' - -const STORAGE_KEY = 'vue-todomvc' - -const filters = { - all: (todos) => todos, - active: (todos) => todos.filter((todo) => !todo.completed), - completed: (todos) => todos.filter((todo) => todo.completed) -} - -export default { - setup() { - // state - const todos = ref(JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')) - const visibility = ref('all') - const editedTodo = ref() - - // derived state - const filteredTodos = computed(() => filters[visibility.value](todos.value)) - const remaining = computed(() => filters.active(todos.value).length) - - // handle routing - window.addEventListener('hashchange', onHashChange) - onHashChange() - - // persist state - watchEffect(() => { - localStorage.setItem(STORAGE_KEY, JSON.stringify(todos.value)) - }) - - function toggleAll(e) { - todos.value.forEach((todo) => (todo.completed = e.target.checked)) - } - - function addTodo(e) { - const value = e.target.value.trim() - if (value) { - todos.value.push({ - id: Date.now(), - title: value, - completed: false - }) - e.target.value = '' - } - } - - function removeTodo(todo) { - todos.value.splice(todos.value.indexOf(todo), 1) - } - - let beforeEditCache = '' - function editTodo(todo) { - beforeEditCache = todo.title - editedTodo.value = todo - } - - function cancelEdit(todo) { - editedTodo.value = null - todo.title = beforeEditCache - } - - function doneEdit(todo) { - if (editedTodo.value) { - editedTodo.value = null - todo.title = todo.title.trim() - if (!todo.title) removeTodo(todo) - } - } - - function removeCompleted() { - todos.value = filters.active(todos.value) - } - - function onHashChange() { - const route = window.location.hash.replace(/#\/?/, '') - if (filters[route]) { - visibility.value = route - } else { - window.location.hash = '' - visibility.value = 'all' - } - } - - return { - todos, - visibility, - editedTodo, - filteredTodos, - remaining, - toggleAll, - addTodo, - removeTodo, - editTodo, - doneEdit, - cancelEdit, - removeCompleted, - } - } -} diff --git a/src/examples/src/todomvc/App/options.js b/src/examples/src/todomvc/App/options.js deleted file mode 100644 index 6adf5706df..0000000000 --- a/src/examples/src/todomvc/App/options.js +++ /dev/null @@ -1,100 +0,0 @@ -const STORAGE_KEY = 'vue-todomvc' - -const filters = { - all: (todos) => todos, - active: (todos) => todos.filter((todo) => !todo.completed), - completed: (todos) => todos.filter((todo) => todo.completed) -} - -export default { - // app initial state - data: () => ({ - todos: JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'), - editedTodo: null, - visibility: 'all' - }), - - // watch todos change for localStorage persistence - watch: { - todos: { - handler(todos) { - localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)) - }, - deep: true - } - }, - - mounted() { - window.addEventListener('hashchange', this.onHashChange) - this.onHashChange() - }, - - computed: { - filteredTodos() { - return filters[this.visibility](this.todos) - }, - remaining() { - return filters.active(this.todos).length - } - }, - - // methods that implement data logic. - // note there's no DOM manipulation here at all. - methods: { - toggleAll(e) { - this.todos.forEach((todo) => (todo.completed = e.target.checked)) - }, - - addTodo(e) { - const value = e.target.value.trim() - if (!value) { - return - } - this.todos.push({ - id: Date.now(), - title: value, - completed: false - }) - e.target.value = '' - }, - - removeTodo(todo) { - this.todos.splice(this.todos.indexOf(todo), 1) - }, - - editTodo(todo) { - this.beforeEditCache = todo.title - this.editedTodo = todo - }, - - doneEdit(todo) { - if (!this.editedTodo) { - return - } - this.editedTodo = null - todo.title = todo.title.trim() - if (!todo.title) { - this.removeTodo(todo) - } - }, - - cancelEdit(todo) { - this.editedTodo = null - todo.title = this.beforeEditCache - }, - - removeCompleted() { - this.todos = filters.active(this.todos) - }, - - onHashChange() { - var visibility = window.location.hash.replace(/#\/?/, '') - if (filters[visibility]) { - this.visibility = visibility - } else { - window.location.hash = '' - this.visibility = 'all' - } - } - } -} diff --git a/src/examples/src/todomvc/App/style.css b/src/examples/src/todomvc/App/style.css deleted file mode 100644 index 6011b41b58..0000000000 --- a/src/examples/src/todomvc/App/style.css +++ /dev/null @@ -1 +0,0 @@ -@import "http://github.com/service/https://unpkg.com/todomvc-app-css@2.4.1/index.css"; \ No newline at end of file diff --git a/src/examples/src/todomvc/App/template.html b/src/examples/src/todomvc/App/template.html deleted file mode 100644 index 9be7c5911d..0000000000 --- a/src/examples/src/todomvc/App/template.html +++ /dev/null @@ -1,65 +0,0 @@ -
-
-

Todos

- -
-
- - - -
- -
diff --git a/src/examples/src/todomvc/description.txt b/src/examples/src/todomvc/description.txt deleted file mode 100644 index 5892ea1f99..0000000000 --- a/src/examples/src/todomvc/description.txt +++ /dev/null @@ -1,2 +0,0 @@ -A fully spec-compliant TodoMVC implementation -https://todomvc.com/ \ No newline at end of file diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md index 9be18aba92..2fb1341359 100644 --- a/src/guide/components/v-model.md +++ b/src/guide/components/v-model.md @@ -1,5 +1,9 @@ # Component v-model {#component-v-model} + + Watch an interactive video lesson on Scrimba + + ## Basic Usage {#basic-usage} `v-model` can be used on a component to implement a two-way binding. diff --git a/src/guide/essentials/component-basics.md b/src/guide/essentials/component-basics.md index 651a5f8d9c..3bc43e557d 100644 --- a/src/guide/essentials/component-basics.md +++ b/src/guide/essentials/component-basics.md @@ -1,5 +1,9 @@ # Components Basics {#components-basics} + + Watch an interactive video lesson on Scrimba + + Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation. It's common for an app to be organized into a tree of nested components: ![Component Tree](./images/components.png) diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md index a8f0532abf..47a46da76c 100644 --- a/src/guide/essentials/computed.md +++ b/src/guide/essentials/computed.md @@ -263,8 +263,15 @@ Now when you run `fullName.value = 'John Doe'`, the setter will be invoked and ` - Only supported in 3.4+ +

+In case you need it, you can get the previous value returned by the computed property accessing +the second argument of the getter: +

+ +

In case you need it, you can get the previous value returned by the computed property accessing the first argument of the getter: +

@@ -326,7 +333,7 @@ export default { }, computed: { alwaysSmall: { - get(previous) { + get(_, previous) { if (this.count <= 3) { return this.count } diff --git a/src/guide/essentials/template-syntax.md b/src/guide/essentials/template-syntax.md index 56a7c7b5f1..8a42bff4dd 100644 --- a/src/guide/essentials/template-syntax.md +++ b/src/guide/essentials/template-syntax.md @@ -1,5 +1,9 @@ # Template Syntax {#template-syntax} + + Watch an interactive video lesson on Scrimba + + Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers. Under the hood, Vue compiles the templates into highly-optimized JavaScript code. Combined with the reactivity system, Vue can intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes. @@ -68,7 +72,7 @@ Attributes that start with `:` may look a bit different from normal HTML, but it - Only supported in 3.4+ -If the attribute has the same name with the JavaScript value being bound, the syntax can be further shortened to omit the attribute value: +If the attribute has the same name as the variable name of the JavaScript value being bound, the syntax can be further shortened to omit the attribute value: ```vue-html diff --git a/src/guide/extras/animation.md b/src/guide/extras/animation.md index b70c558106..7d5faa9f0f 100644 --- a/src/guide/extras/animation.md +++ b/src/guide/extras/animation.md @@ -160,6 +160,8 @@ const tweened = reactive({ number: 0 }) +// Note: For inputs greater than Number.MAX_SAFE_INTEGER (9007199254740991), +// the result may be inaccurate due to limitations in JavaScript number precision. watch(number, (n) => { gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 }) }) @@ -183,6 +185,8 @@ export default { tweened: 0 } }, + // Note: For inputs greater than Number.MAX_SAFE_INTEGER (9007199254740991), + // the result may be inaccurate due to limitations in JavaScript number precision. watch: { number(n) { gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 }) diff --git a/src/guide/quick-start.md b/src/guide/quick-start.md index f711eee365..72d596ce96 100644 --- a/src/guide/quick-start.md +++ b/src/guide/quick-start.md @@ -16,6 +16,8 @@ import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme' - If you are already familiar with Node.js and the concept of build tools, you can also try a complete build setup right within your browser on [StackBlitz](https://vite.new/vue). +- To get a walkthrough of the recommended setup, watch this interactive [Scrimba](http://scrimba.com/links/vue-quickstart) tutorial that shows you how to run, edit, and deploy your first Vue app. + ## Creating a Vue Application {#creating-a-vue-application} :::tip Prerequisites diff --git a/src/guide/reusability/plugins.md b/src/guide/reusability/plugins.md index a9d653eb92..122862643a 100644 --- a/src/guide/reusability/plugins.md +++ b/src/guide/reusability/plugins.md @@ -97,7 +97,7 @@ Use global properties scarcely, since it can quickly become confusing if too man ### Provide / Inject with Plugins {#provide-inject-with-plugins} -Plugins also allow us to use `inject` to provide a function or attribute to the plugin's users. For example, we can allow the application to have access to the `options` parameter to be able to use the translations object. +Plugins also allow us to use `provide` to give plugin users access to a function or attribute. For example, we can allow the application to have access to the `options` parameter to be able to use the translations object. ```js{10} // plugins/i18n.js diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md index 2368dc0f78..79c020e5ce 100644 --- a/src/guide/typescript/composition-api.md +++ b/src/guide/typescript/composition-api.md @@ -1,5 +1,9 @@ # TypeScript with Composition API {#typescript-with-composition-api} + + Watch an interactive video lesson on Scrimba + + > This page assumes you've already read the overview on [Using Vue with TypeScript](./overview). ## Typing Component Props {#typing-component-props}