Merge branch 'vuejs:main' into main

Author: AloisSeckar

.vitepress/theme/components/Home.vue

@@ -162,16 +162,21 @@ html:not(.dark) .accent,
     linear-gradient(45deg, #42d392, #647eff) border-box;
   border: 2px solid transparent;
 }
+
 .actions .security:hover {
   background: linear-gradient(var(--vt-c-gray-light-4), var(--vt-c-gray-light-4)) padding-box, 
     linear-gradient(45deg, #42d392, #647eff) border-box;
 }
 
+.dark .actions .security:hover {
+  background: linear-gradient(var(--vt-c-gray-dark-3), var(--vt-c-gray-dark-3)) padding-box, 
+    linear-gradient(45deg, #42d392, #647eff) border-box;
+}
+
 .actions .security .icon {
   width: 12px;
   height: 12px;
   margin-left: 4px;
-
 }
 
 .actions .get-started,

.vitepress/theme/components/SecurityUpdateBtn.vue

@@ -43,6 +43,10 @@
       linear-gradient(45deg, #42d392, #647eff) border-box;
     transition-duration: 0.2s;
   }
+  .dark .container .security:hover {
+    background: linear-gradient(var(--vt-c-gray-dark-3), var(--vt-c-gray-dark-3)) padding-box, 
+      linear-gradient(45deg, #42d392, #647eff) border-box;
+  }
   .container .security .icon {
     width: 12px;
     height: 12px;

pnpm-lock.yaml

@@ -349,9 +349,10 @@
   },
   {
     "name": "Erick Petrucelli",
-    "title": "Software Engineer & Architect, UX Specialist, Consultant, Educator, Writer",
-    "company": "Freelance",
-    "location": "João Pessoa, Brazil",
+    "title": "Lead Software Engineer, UI/UX Specialist, Manager, Teacher, Speaker, Writer",
+    "company": "LawnStarter",
+    "companyLink": "https://www.lawnstarter.com/",
+    "location": "Campinas, Brazil",
     "languages": ["Portuguese", "English"],
     "projects": [
       {

src/about/team/members-partner.json

@@ -305,7 +305,7 @@ For adding built-in [`v-on` modifiers](/guide/essentials/event-handling#event-mo
 - **Type**
 
   ```ts
-  function withModifiers(fn: Function, modifiers: string[]): Function
+  function withModifiers(fn: Function, modifiers: ModifierGuardsKeys[]): Function
   ```
 
 - **Example**

src/api/render-function.md

@@ -227,6 +227,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 This will be compiled to equivalent runtime props `default` options. In addition, the `withDefaults` helper provides type checks for the default values, and ensures the returned `props` type has the optional flags removed for properties that do have default values declared.
 
+:::info
+Note that default values for mutable reference types (like arrays or objects) should be wrapped in functions to avoid accidental modification and external side effects. This ensures each component instance gets its own copy of the default value.
+:::
+
 ## defineModel() <sup class="vt-badge" data-text="3.4+" /> {#definemodel}
 
 This macro can be used to declare a two-way binding prop that can be consumed via `v-model` from the parent component. Example usage is also discussed in the [Component `v-model`](/guide/components/v-model) guide.

src/api/sfc-script-setup.md

@@ -197,8 +197,8 @@
   },
   {
     "name": "WrapPixel",
-    "description": "Check out developer friendly vue js admin dashboard templates built by our partners from [WrapPixel](https://wrappixel.com). Download them to start building your real time web application quickly to save hundreds of hours in development and design.",
-    "seeMoreUrl": "https://www.wrappixel.com/templates/category/vuejs-templates/",
+    "description": "Check out top [dashboard templates](https://www.wrappixel.com/templates/category/admin-dashboard-templates/?ref=320) built by our partners from [WrapPixel](https://www.wrappixel.com/?ref=320). Download highly customizable vue templates (https://www.wrappixel.com/templates/category/vuejs-templates/?ref=320) to start building your real time web application quickly to save hundreds of hours in development and design.",
+    "seeMoreUrl": "https://www.wrappixel.com/templates/category/vuejs-templates/?ref=320",
     "products": [
       {
         "name": "Spike Free VueJs Admin Template",
@@ -341,5 +341,54 @@
         "image": "https://cdn.themeselection.com/ts-assets/materio/materio-vuetify-nuxtjs-admin-template/banner/banner.png"
       }
     ]
-  }
-]
+  },
+  {
+    "name": "AdminMart",
+    "description": "Check out top [vue dashboard templates](https://adminmart.com/templates/vuejs-admin/?ref=34) built by our partners from [AdminMart](https://adminmart.com/?ref=34). Download them to speed up your web development process and build top class web applications.",
+    "seeMoreUrl": "https://adminmart.com/templates/vuejs-admin/?ref=34",
+    "products": [
+      {
+        "name": "Matdash Free Vuejs Admin Dashboard",
+        "price": 0,
+        "description": "Free & Open Source VueJs Admin Template",
+        "url": "https://adminmart.com/product/matdash-free-vuejs-admin-dashboard/?ref=34",
+        "image": "https://adminmart.com/wp-content/uploads/2024/05/matdash-vuetifi-vuejs-2.png"
+      },
+      {
+        "name": "Matdash Vuejs Admin Dashboard",
+        "price": 49,
+        "description": "Empowering Developers with Unmatched Flexibility and Power",
+        "url": "https://adminmart.com/product/matdash-vuejs-admin-dashboard/?ref=34",
+        "image": "https://adminmart.com/wp-content/uploads/2024/05/matdash-vuetify-vuejs-admin-dashboard.png"
+      },
+      {
+        "name": "Modernize Vuetify 3 & Vue 3 Admin Dashboard",
+        "price": 49,
+        "description": "Developer Friendly & Most Powerful Vue Admin Dashboard Template",
+        "url": "https://adminmart.com/product/modernize-vuetify-vue-admin-dashboard/?ref=34",
+        "image": "https://adminmart.com/wp-content/uploads/2023/02/modernize-vuetify-admin-dashboard-min.png"
+      },
+      {
+        "name": "Modernize Free Vuetify + Vue js Admin Dashboard",
+        "price": 0,
+        "description": "Free & Open Source VueJs Admin Template",
+        "url": "https://adminmart.com/product/modernize-free-vuetify-vue-js-admin-dashboard/?ref=34",
+        "image": "https://adminmart.com/wp-content/uploads/2023/02/modernize-free-vuetify-admin-dashboard-am-min1.png"
+      },
+      {
+        "name": "Modernize Free NuxtJs Admin Dashboard Template",
+        "price": 0,
+        "description": "Free NuxtJs Dashboard Template",
+        "url": "https://adminmart.com/product/modernize-free-vuetify-vue-js-admin-dashboard/?ref=34",
+        "image": "https://adminmart.com/wp-content/uploads/2023/02/modernize-free-nuxt-admin-dashboard-am-min.png"
+      },
+      {
+        "name": "Modernize Nuxt Js Admin Dashboard",
+        "price": 49,
+        "description": "Rapidly Build Powerful Dashboards with NuxtJs - Vuetify: A Developer's Dream",
+        "url": "https://adminmart.com/product/modernize-nuxt-js-admin-dashboard/?ref=34",
+        "image": "https://adminmart.com/wp-content/uploads/2023/02/modernize-nuxt-js-admin-dashboard.png"
+      }
+    ]
+  },
+]

src/ecosystem/themes/themes.json

@@ -194,7 +194,6 @@ The official loader that provides Vue SFC support in webpack. If you are using V
 - [Vue + Vite on Repl.it](https://replit.com/@templates/VueJS-with-Vite)
 - [Vue on CodeSandbox](https://codesandbox.io/p/devbox/github/codesandbox/sandbox-templates/tree/main/vue-vite)
 - [Vue on Codepen](https://codepen.io/pen/editor/vue)
-- [Vue on Components.studio](https://components.studio/create/vue3)
 - [Vue on WebComponents.dev](https://webcomponents.dev/create/cevue)
 
 <!-- TODO ## Backend Framework Integrations -->

src/guide/scaling-up/tooling.md

@@ -84,6 +84,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 This will be compiled to equivalent runtime props `default` options. In addition, the `withDefaults` helper provides type checks for the default values, and ensures the returned `props` type has the optional flags removed for properties that do have default values declared.
 
+:::info
+Note that default values for mutable reference types (like arrays or objects) should be wrapped in functions to avoid accidental modification and external side effects. This ensures each component instance gets its own copy of the default value.
+:::
+
 ### Without `<script setup>` {#without-script-setup}
 
 If not using `<script setup>`, it is necessary to use `defineComponent()` to enable props type inference. The type of the props object passed to `setup()` is inferred from the `props` option.