docs(es): Jun 11 - 12

.vitepress/config.ts

@@ -16,6 +16,7 @@ const nav: ThemeConfig['nav'] = [
  { text: 'Ejemplos', link: '/examples/' },
  { text: 'Inicio Rápido', link: '/guide/quick-start' },
  // { text: 'Guía de Estilo', link: '/style-guide/' },
+ { text: 'Glosario', link: '/glossary/' },
  {
  text: 'Documentación de Vue 2',
  link: 'https://v2.vuejs.org'
@@ -738,5 +739,5 @@ export default defineConfigWithTheme<ThemeConfig>({
  json: {
  stringify: true
  }
- },
+ }
 })

.vitepress/inlined-scripts/restorePreference.js

@@ -5,7 +5,7 @@
  document.documentElement.classList.add(cls)
  }
  }
- restore('vue-docs-prefer-composition', 'prefer-composition')
+ restore('vue-docs-prefer-composition', 'prefer-composition', true)
  restore('vue-docs-prefer-sfc', 'prefer-sfc', true)
 
  // window.__VUE_BANNER_ID__ = ''

.vitepress/theme/components/PreferenceSwitch.vue

@@ -8,6 +8,7 @@ import {
  preferSFCKey,
  preferSFC
 } from './preferences'
+import PreferenceTooltip from './PreferenceTooltip.vue'
 
 const route = useRoute()
 const show = computed(() =>
@@ -94,6 +95,7 @@ function useToggleFn(
  @click="closeSideBar"
  >?</a
  >
+ <PreferenceTooltip />
  </div>
  <div class="switch-container" v-if="showSFC">
  <label class="no-sfc-label" @click="toggleSFC(false)">HTML</label>
@@ -171,7 +173,7 @@ function useToggleFn(
  align-items: center;
 }
 
-@media(max-width: 959px) {
+@media (max-width: 959px) {
  .switch-container {
  padding: 0 1em;
  }

.vitepress/theme/components/PreferenceTooltip.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import {
+ inBrowser,
+ preferComposition,
+ preferCompositionKey
+} from './preferences'
+import { useData, type Header } from 'vitepress'
+const show = ref(false)
+const { page } = useData()
+type Source = 'url-query' | 'url-header' | 'default'
+let source: Source | false =
+ inBrowser && localStorage.getItem(preferCompositionKey) === null
+ ? 'default'
+ : false
+if (inBrowser) {
+ // 1. check if URL contains explicit preference
+ const match = location.search.match(/[\?&]api=(\w+)/)
+ const preference = match && match[1]
+ if (preference === 'composition') {
+ setPreference(true, 'url-query')
+ } else if (preference === 'options') {
+ setPreference(false, 'url-query')
+ } else {
+ // 2. check if target header only exists for a certain API
+ if (location.hash) {
+ const h = findHeader(page.value.headers, location.hash)
+ if (h && h.optionsOnly) {
+ setPreference(false, 'url-header')
+ } else if (h && h.compositionOnly) {
+ setPreference(true, 'url-header')
+ }
+ }
+ }
+}
+function findHeader(
+ headers: Header[],
+ link: string
+):
+ | (Header & {
+ optionsOnly?: boolean
+ compositionOnly?: boolean
+ })
+ | undefined {
+ for (const h of headers) {
+ if (h.link === link) {
+ return h
+ }
+ if (h.children) {
+ const c = findHeader(h.children, link)
+ if (c) return c
+ }
+ }
+}
+function setPreference(capi: boolean, s: Source) {
+ if (capi && !preferComposition.value) {
+ source = s
+ preferComposition.value = true
+ document.documentElement.classList.add('prefer-composition')
+ } else if (!capi && preferComposition.value) {
+ source = s
+ preferComposition.value = false
+ document.documentElement.classList.remove('prefer-composition')
+ }
+}
+onMounted(() => {
+ if (
+ !page.value.relativePath.startsWith('tutorial/') &&
+ source !== false
+ ) {
+ show.value = true
+ // dismiss if user switches with the tooltip open
+ const stop = watch(preferComposition, () => {
+ show.value = false
+ stop()
+ })
+ }
+})
+function dismiss() {
+ show.value = false
+ // save if default
+ if (source === 'default') {
+ localStorage.setItem(
+ preferCompositionKey,
+ String(preferComposition.value)
+ )
+ }
+}
+</script>
+
+<template>
+ <Transition name="fly-in">
+ <div class="preference-tooltip" v-if="show">
+ <template v-if="source === 'default'">
+ <p>API style now defaults to Composition API.</p>
+ <p>
+ Some pages contain different content based on the API style
+ chosen. Use this switch to toggle between APIs styles.
+ </p>
+ </template>
+ <template v-if="source && source.startsWith('url')">
+ <p>
+ Showing content for
+ {{ preferComposition ? 'Composition' : 'Options' }} API because
+ {{
+ source === 'url-query'
+ ? 'it is specified by the URL query.'
+ : 'the target section is only available for that API.'
+ }}
+ </p>
+ <p>
+ This is different from your saved preference and will only affect
+ the current browsing session.
+ </p>
+ </template>
+ <p class="actions">
+ <a href="/guide/introduction#api-styles">Learn more</a>
+ <button @click="dismiss">Got it</button>
+ </p>
+ <div class="arrow-top"></div>
+ <div class="arrow-top inner"></div>
+ </div>
+ </Transition>
+</template>
+
+<style scoped>
+.preference-tooltip {
+ font-weight: 500;
+ line-height: 1.6;
+ position: absolute;
+ padding: 12px 20px 12px 36px;
+ width: 100%;
+ background-color: var(--vt-c-bg-soft);
+ top: 7.5em;
+ border: 1px solid var(--vt-c-green);
+ border-radius: 8px;
+ box-shadow: var(--vt-shadow-3);
+ z-index: 10;
+}
+.preference-tooltip:before {
+ content: 'ⓘ';
+ position: absolute;
+ font-weight: 600;
+ font-size: 14px;
+ top: 9px;
+ left: 13px;
+}
+.dark .preference-tooltip {
+ box-shadow: var(--vt-shadow-1);
+}
+p {
+ margin-bottom: 8px;
+}
+.arrow-top {
+ width: 0;
+ height: 0;
+ border: 6px solid transparent;
+ border-bottom: 9px solid var(--vt-c-green);
+ position: absolute;
+ top: -16px;
+ left: 18px;
+}
+.prefer-composition .arrow-top {
+ left: 130px;
+}
+@media (max-width: 1439px) {
+ .arrow-top {
+ left: 16px;
+ }
+ .prefer-composition .arrow-top {
+ left: 136px;
+ }
+}
+.arrow-top.inner {
+ border-bottom-color: var(--vt-c-bg-soft);
+ top: -14px;
+}
+.actions {
+ text-align: right;
+ margin-top: 14px;
+ margin-bottom: 0;
+}
+a {
+ color: var(--vt-c-green);
+ text-decoration: underline;
+ margin-right: 1.5em;
+}
+button {
+ color: var(--vt-c-bg-soft);
+ font-weight: 500;
+ box-shadow: var(--vt-shadow-2);
+ padding: 2px 8px;
+ border-radius: 6px;
+ background-color: var(--vt-c-green);
+}
+.fly-in-enter-active {
+ transition: all 0.2s ease-out;
+}
+.fly-in-leave-active {
+ transition: all 0.15s ease-in;
+}
+.fly-in-enter-from,
+.fly-in-leave-to {
+ opacity: 0;
+ transform: translateY(16px);
+}
+</style>

.vitepress/theme/components/preferences.ts

@@ -1,14 +1,14 @@
 import { ref } from 'vue'
 import { AugmentedHeader } from '../../headerMdPlugin'
 
-const hasStorage = typeof localStorage !== 'undefined'
+export const inBrowser = typeof window !== 'undefined'
 const get = (key: string, defaultValue = false): boolean =>
- hasStorage
+ inBrowser
  ? JSON.parse(localStorage.getItem(key) || String(defaultValue))
  : defaultValue
 
 export const preferCompositionKey = 'vue-docs-prefer-composition'
-export const preferComposition = ref(get(preferCompositionKey))
+export const preferComposition = ref(get(preferCompositionKey, true))
 
 export const preferSFCKey = 'vue-docs-prefer-sfc'
 export const preferSFC = ref(get(preferSFCKey, true))

package.json

@@ -9,7 +9,7 @@
  "preinstall": "npx only-allow pnpm"
  },
  "dependencies": {
- "@vue/repl": "^1.3.3",
+ "@vue/repl": "^1.4.1",
  "@vue/theme": "^2.2.3",
  "dynamics.js": "^1.1.5",
  "gsap": "^3.9.0",

src/api/composition-api-setup.md

@@ -8,7 +8,7 @@ El hook `setup()` sirve como el punto de entrada para el uso de Composition API,
 2. Cuando se integra código basado en Composition API en un componente que usa Options API.
 
 :::info Nota
-El uso de [`<script setup>`](/api/sfc-script-setup) está fuertemente recomendado si está utilizando Composition API (la API de Composición) con Componentes de un Solo Archivo (SFC), de esta manera se obtiene una sintaxis mas sucinta y ergonómica
+El uso de [`<script setup>`](/api/sfc-script-setup) está fuertemente recomendado si está utilizando Composition API (la Composition API) con Componentes de un Solo Archivo (SFC), de esta manera se obtiene una sintaxis mas sucinta y ergonómica
 :::
 
 Podemos declarar el estado reactivo usando [Reactivity APIs](./reactivity-core) y exponerlos a la plantilla devolviendo un objeto desde `setup()`. Las propiedades del objeto devuelto también estarán disponibles en la instancia del componente (si otras opciones son usadas):
@@ -63,7 +63,6 @@ Tenga en cuenta que si desestructura el objeto `props`, las variables desestruct
 
 Si realmente necesita desestructurar los props, o necesita pasar una propiedad a una función externa mientras conserva la reactividad, puede hacerlo con las APIs de utilidad [toRefs()](./reactivity-utilities#torefs) y [toRef()](/api/reactivity-utilities#toref):
 
-
 ```js
 import { toRefs, toRef } from 'vue'
 
@@ -111,6 +110,7 @@ export default {
  }
 }
 ```
+
 Las propiedades `attrs` y `slots` son objetos con estado que siempre son actualizados cuando el mismo componente es actualizado. Esto significa que debes evitar desestructurarlos y siempre referenciar las propiedades como `attrs.x` o `slots.x`. Ten en cuenta también que, a diferencia de `props`, las propiedades de `attrs` y `slots` **no** son reactivas. Si pretendes aplicar efectos secundarios basados en los cambios de `attrs` o `slots`, debes hacerlo dentro de un hook del ciclo de vida `onBeforeUpdate`.
 
 ### Exponiendo Propiedades Públicas {#exposing-public-properties}

src/api/options-composition.md

@@ -18,7 +18,6 @@ Proporcionar valores que puedan ser inyectados por los componentes descendientes
 
  La opción `provide` debe ser un objeto o una función que devuelva un objeto. Este objeto contiene las propiedades que están disponibles para ser inyectadas en sus descendientes. Puedes utilizar símbolos como claves en este objeto.
 
-
 - **Ejemplo**
 
  Uso básico:
@@ -189,7 +188,7 @@ Una matriz de objetos de opción que se mezclan en el componente actual.
  Los hooks del mixin se llaman en el orden en que se proporcionan, y se llaman antes que los hooks propios del componente.
 
  :::warning Ya no se recomienda
- En Vue 2, los mixins eran el mecanismo principal para crear trozos reutilizables de la lógica del componente. Aunque los mixins siguen siendo compatibles con Vue 3, la [API de composición] (/guide/reusability/composables) es ahora el método preferido para la reutilización de código entre componentes.
+ En Vue 2, los mixins eran el mecanismo principal para crear fragmentos reutilizables de lógica de componentes. Aunque los mixins siguen siendo compatibles en Vue 3, [los composables mediante la Composition API](/guide/reusability/composables) son ahora el enfoque preferido para la reutilización de código entre componentes.
  :::
 
 - **Ejemplo:**
@@ -232,7 +231,7 @@ Un componente de "clase base" para extender.
 
  Sin embargo, `extends` y `mixins` expresan intenciones diferentes. La opción `mixins` se utiliza principalmente para componer trozos de funcionalidad, mientras que `extends` se ocupa principalmente de la herencia.
 
- Al igual que con `mixins`, cualquier opción se fusionará utilizando la estrategia de fusión correspondiente.
+ Al igual que con `mixins`, cualquier opción (excepto `setup()`) se fusionará utilizando la estrategia de fusión correspondiente.
 
 - **Ejemplo:**
 
@@ -244,3 +243,25 @@ Un componente de "clase base" para extender.
  ...
  }
  ```
+
+:::warning No recomendado para la Composition API
+`extends` está diseñado para la Options API y no maneja la fusión del hook `setup()`.
+
+En la Composition API, el modelo mental preferido para la reutilización de lógica es "componer" en lugar de "heredar". Si tiene lógica de un componente que debe reutilizarse en otro, considera extraer la lógica relevante en un [Composable](/guide/reusability/composables#composables).
+
+Si aún tienes la intención de "extender" un componente utilizando la Composition API, puede llamar al `setup()` del componente base en el `setup()` del componente que lo extiende:
+
+```js
+import Base from './Base.js'
+export default {
+ extends: Base,
+ setup(props, ctx) {
+ return {
+ ...Base.setup(props, ctx)
+ // enlaces locales
+ }
+ }
+}
+```
+
+:::