@vue/language-service 1.7.7 → 1.7.9

package/data/template/en.json

@@ -7,6 +7,7 @@
         "kind": "markdown",
         "value": "\nProvides animated transition effects to a **single** element or component.\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * Used to automatically generate transition CSS class names.\n     * e.g. `name: 'fade'` will auto expand to `.fade-enter`,\n     * `.fade-enter-active`, etc.\n     */\n    name?: string\n    /**\n     * Whether to apply CSS transition classes.\n     * Default: true\n     */\n    css?: boolean\n    /**\n     * Specifies the type of transition events to wait for to\n     * determine transition end timing.\n     * Default behavior is auto detecting the type that has\n     * longer duration.\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * Specifies explicit durations of the transition.\n     * Default behavior is wait for the first `transitionend`\n     * or `animationend` event on the root transition element.\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * Controls the timing sequence of leaving/entering transitions.\n     * Default behavior is simultaneous.\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * Whether to apply transition on initial render.\n     * Default: false\n     */\n    appear?: boolean\n\n    /**\n     * Props for customizing transition classes.\n     * Use kebab-case in templates, e.g. enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **Events**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show` only)\n  - `@appear-cancelled`\n\n- **Example**\n\n  Simple element:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n  Forcing a transition by changing the `key` attribute:\n  \n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  Dynamic component, with transition mode + animate on appear:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  Listening to transition events:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n- **See also:** [`<Transition>` Guide](https://vuejs.org/guide/built-ins/transition.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -40,6 +41,7 @@
         "kind": "markdown",
         "value": "\nProvides transition effects for **multiple** elements or components in a list.\n\n- **Props**\n\n  `<TransitionGroup>` accepts the same props as `<Transition>` except `mode`, plus two additional props:\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * If not defined, renders as a fragment.\n     */\n    tag?: string\n    /**\n     * For customizing the CSS class applied during move transitions.\n     * Use kebab-case in templates, e.g. move-class=\"xxx\"\n     */\n    moveClass?: string\n  }\n  ```\n\n- **Events**\n\n  `<TransitionGroup>` emits the same events as `<Transition>`.\n\n- **Details**\n\n  By default, `<TransitionGroup>` doesn't render a wrapper DOM element, but one can be defined via the `tag` prop.\n\n  Note that every child in a `<transition-group>` must be [**uniquely keyed**](https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key) for the animations to work properly.\n\n  `<TransitionGroup>` supports moving transitions via CSS transform. When a child's position on screen has changed after an update, it will get applied a moving CSS class (auto generated from the `name` attribute or configured with the `move-class` prop). If the CSS `transform` property is \"transition-able\" when the moving class is applied, the element will be smoothly animated to its destination using the [FLIP technique](https://aerotwist.com/blog/flip-your-animations/).\n\n- **Example**\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **See also:** [Guide - TransitionGroup](https://vuejs.org/guide/built-ins/transition-group.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -73,6 +75,7 @@
         "kind": "markdown",
         "value": "\nCaches dynamically toggled components wrapped inside.\n\n- **Props**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * If specified, only components with names matched by\n     * `include` will be cached.\n     */\n    include?: MatchPattern\n    /**\n     * Any component with a name matched by `exclude` will\n     * not be cached.\n     */\n    exclude?: MatchPattern\n    /**\n     * The maximum number of component instances to cache.\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **Details**\n\n  When wrapped around a dynamic component, `<KeepAlive>` caches the inactive component instances without destroying them.\n\n  There can only be one active component instance as the direct child of `<KeepAlive>` at any time.\n\n  When a component is toggled inside `<KeepAlive>`, its `activated` and `deactivated` lifecycle hooks will be invoked accordingly, providing an alternative to `mounted` and `unmounted`, which are not called. This applies to the direct child of `<KeepAlive>` as well as to all of its descendants.\n\n- **Example**\n\n  Basic usage:\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  When used with `v-if` / `v-else` branches, there must be only one component rendered at a time:\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n\n  Used together with `<Transition>`:\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n\n  Using `include` / `exclude`:\n\n  ```html\n  <!-- comma-delimited string -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- regex (use `v-bind`) -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- Array (use `v-bind`) -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  Usage with `max`:\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **See also:** [Guide - KeepAlive](https://vuejs.org/guide/built-ins/keep-alive.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -106,6 +109,7 @@
         "kind": "markdown",
         "value": "\nRenders its slot content to another part of the DOM.\n\n- **Props**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * Required. Specify target container.\n     * Can either be a selector or an actual element.\n     */\n    to: string | HTMLElement\n    /**\n     * When `true`, the content will remain in its original\n     * location instead of moved into the target container.\n     * Can be changed dynamically.\n     */\n    disabled?: boolean\n  }\n  ```\n\n- **Example**\n\n  Specifying target container:\n\n  ```html\n  <teleport to=\"#some-id\" />\n  <teleport to=\".some-class\" />\n  <teleport to=\"[data-teleport]\" />\n  ```\n\n  Conditionally disabling:\n\n  ```html\n  <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </teleport>\n  ```\n\n- **See also:** [Guide - Teleport](https://vuejs.org/guide/built-ins/teleport.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -139,6 +143,7 @@
         "kind": "markdown",
         "value": "\nUsed for orchestrating nested async dependencies in a component tree.\n\n- **Props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n  }\n  ```\n\n- **Events**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **Details**\n\n  `<Suspense>` accepts two slots: the `#default` slot and the `#fallback` slot. It will display the content of the fallback slot while rendering the default slot in memory.\n\n  If it encounters async dependencies ([Async Components](https://vuejs.org/guide/components/async.html) and components with [`async setup()`](https://vuejs.org/guide/built-ins/suspense.html#async-setup)) while rendering the default slot, it will wait until all of them are resolved before displaying the default slot.\n\n- **See also:** [Guide - Suspense](https://vuejs.org/guide/built-ins/suspense.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -172,6 +177,7 @@
         "kind": "markdown",
         "value": "\nA \"meta component\" for rendering dynamic components or elements.\n\n- **Props**\n\n  ```ts\n  interface DynamicComponentProps {\n    is: string | Component\n  }\n  ```\n\n- **Details**\n\n  The actual component to render is determined by the `is` prop.\n\n  - When `is` is a string, it could be either an HTML tag name or a component's registered name.\n\n  - Alternatively, `is` can also be directly bound to the definition of a component.\n\n- **Example**\n\n  Rendering components by registered name (Options API):\n\n  ```vue\n  <script>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n\n  export default {\n    components: { Foo, Bar },\n    data() {\n      return {\n        view: 'Foo'\n      }\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"view\" />\n  </template>\n  ```\n\n  Rendering components by definition (Composition API with `<script setup>`):\n\n  ```vue\n  <script setup>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n  </script>\n\n  <template>\n    <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n  </template>\n  ```\n\n  Rendering HTML elements:\n\n  ```html\n  <component :is=\"href ? 'a' : 'span'\"></component>\n  ```\n\n  The [built-in components](./built-in-components) can all be passed to `is`, but you must register them if you want to pass them by name. For example:\n\n  ```vue\n  <script>\n  import { Transition, TransitionGroup } from 'vue'\n\n  export default {\n    components: {\n      Transition,\n      TransitionGroup\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n      ...\n    </component>\n  </template>\n  ```\n\n  Registration is not required if you pass the component itself to `is` rather than its name, e.g. in `<script setup>`.\n\n  If `v-model` is used on a `<component>` tag, the template compiler will expand it to a `modelValue` prop and `update:modelValue` event listener, much like it would for any other component. However, this won't be compatible with native HTML elements, such as `<input>` or `<select>`. As a result, using `v-model` with a dynamically created native element won't work:\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n\n  const tag = ref('input')\n  const username = ref('')\n  </script>\n\n  <template>\n    <!-- This won't work as 'input' is a native HTML element -->\n    <component :is=\"tag\" v-model=\"username\" />\n  </template>\n  ```\n\n  In practice, this edge case isn't common as native form fields are typically wrapped in components in real applications. If you do need to use a native element directly then you can split the `v-model` into an attribute and event manually.\n\n- **See also:** [Dynamic Components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -205,6 +211,7 @@
         "kind": "markdown",
         "value": "\nDenotes slot content outlets in templates.\n\n- **Props**\n\n  ```ts\n  interface SlotProps {\n    /**\n     * Any props passed to <slot> to passed as arguments\n     * for scoped slots\n     */\n    [key: string]: any\n    /**\n     * Reserved for specifying slot name.\n     */\n    name?: string\n  }\n  ```\n\n- **Details**\n\n  The `<slot>` element can use the `name` attribute to specify a slot name. When no `name` is specified, it will render the default slot. Additional attributes passed to the slot element will be passed as slot props to the scoped slot defined in the parent.\n\n  The element itself will be replaced by its matched slot content.\n\n  `<slot>` elements in Vue templates are compiled into JavaScript, so they are not to be confused with [native `<slot>` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).\n\n- **See also:** [Component - Slots](https://vuejs.org/guide/components/slots.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -238,6 +245,7 @@
         "kind": "markdown",
         "value": "\nThe `<template>` tag is used as a placeholder when we want to use a built-in directive without rendering an element in the DOM.\n\n- **Details:**\n\n  The special handling for `<template>` is only triggered if it is used with one of these directives:\n\n  - `v-if`, `v-else-if`, or `v-else`\n  - `v-for`\n  - `v-slot`\n\n  If none of those directives are present then it will be rendered as a [native `<template>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) instead.\n\n  A `<template>` with a `v-for` can also have a [`key` attribute](https://vuejs.org/api/built-in-special-attributes.html#key). All other attributes and directives will be discarded, as they aren't meaningful without a corresponding element.\n\n  Single-file components use a [top-level `<template>` tag](https://vuejs.org/api/sfc-spec.html#language-blocks) to wrap the entire template. That usage is separate from the use of `<template>` described above. That top-level tag is not part of the template itself and doesn't support template syntax, such as directives.\n\n- **See also:**\n  - [Guide - `v-if` on `<template>`](https://vuejs.org/guide/essentials/conditional.html#v-if-on-template)\n  - [Guide - `v-for` on `<template>`](https://vuejs.org/guide/essentials/list.html#v-for-on-template)\n  - [Guide - Named slots](https://vuejs.org/guide/components/slots.html#named-slots)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",

package/data/template/fr.json

@@ -7,6 +7,7 @@
         "kind": "markdown",
         "value": "\nFournit des effets de transition animés à **un seul** élément ou composant.\n\n- **Props :**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * Utilisé pour générer automatiquement des noms de classe pour les transitions CSS\n     * par exemple `name: 'fade'` s'étendra automatiquement à `.fade-enter`,\n     * `.fade-enter-active`, etc.\n     */\n    name?: string\n    /**\n     * S'il faut appliquer les classes de transition CSS ou non\n     * Default: true\n     */\n    css?: boolean\n    /**\n     * Spécifie le type d'événements de transition à attendre pour\n     * déterminer le moment de la fin de la transition.\n     * Le comportement par défaut consiste à détecter automatiquement le type qui a\n     * la plus longue durée.\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * Spécifie les durées explicites de la transition.\n     * Le comportement par défaut consiste à attendre le premier événement `transitionend`.\n     * ou `animationend` sur l'élément de transition racine.\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * Contrôle la séquence temporelle des transitions de sortie/entrée.\n     * Simultané par défaut.\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * Si la transition doit être appliquée au rendu initial ou non.\n     * Default: false\n     */\n    appear?: boolean\n\n    /**\n     * Props pour la personnaliser les classes de transition.\n     * Utilisez kebab-case dans les templates, par exemple enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **Événements :**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show` only)\n  - `@appear-cancelled`\n\n- **Exemple :**\n\n  Élément simple :\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n  Transition forcée en modifiant l'attribut `key` :\n  \n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  Composant dynamique, avec mode de transition + animation à l'apparition :\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  Écoute des événements de transition :\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n- **Voir aussi :** [Guide sur `<Transition>`](https://fr.vuejs.org/guide/built-ins/transition.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -40,6 +41,7 @@
         "kind": "markdown",
         "value": "\nFournit des effets de transition pour de **multiples** éléments ou composants dans une liste.\n\n- **Props :**\n\n  `<TransitionGroup>` accepte les mêmes props que `<Transition>` à l'exception de `mode`, plus deux props additionnelles :\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * S'il n'est pas défini, le rendu sera un fragment.\n     */\n    tag?: string\n    /**\n     * Pour personnaliser la classe CSS appliquée lors des transitions de mouvement.\n     * Utilisez kebab-case dans les templates, par exemple move-class=\"xxx\"\n     */\n    moveClass?: string\n  }\n  ```\n\n- **Événements :**\n\n  `<TransitionGroup>` émet les mêmes événements que `<Transition>`.\n\n- **Détails :**\n\n  Par défaut, `<TransitionGroup>` ne rend pas d'élément du DOM en enveloppant d'autres, mais on peut en définir un via la prop `tag`.\n\n  Notez que chaque enfant d'un `<transition-group>` doit avoir une [**clé unique**](https://fr.vuejs.org/guide/essentials/list.html#maintaining-state-with-key) pour que les animations fonctionnent correctement.\n\n  `<TransitionGroup>` prend en charge les transitions de mouvement via une transformation CSS. Lorsque la position d'un enfant à l'écran a changé après une mise à jour, il se verra appliquer une classe CSS de mouvement (générée automatiquement à partir de l'attribut `name` ou configurée avec la prop `move-class`). Si la propriété CSS `transform` est \"transition-able\" lorsque la classe de mouvement est appliquée, l'élément sera animé en douceur vers sa destination en utilisant la [technique FLIP](https://aerotwist.com/blog/flip-your-animations/).\n\n- **Exemple :**\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **Voir aussi :** [Guide - TransitionGroup](https://fr.vuejs.org/guide/built-ins/transition-group.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -73,6 +75,7 @@
         "kind": "markdown",
         "value": "\nMet en cache les composants activés dynamiquement qui y sont imbriqués.\n\n- **Props :**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * Si spécifié, seuls les composants dont les noms correspondent à \n     * `include` seront mis en cache.\n     */\n    include?: MatchPattern\n    /**\n     * Un composant avec un nom ne correspondant pas à  `exclude` ne sera\n     * pas mis en cache.\n     */\n    exclude?: MatchPattern\n    /**\n     * Le nombre maximum d'instances de composant à mettre en cache.\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **Détails :**\n\n  Lorsqu'il enveloppe un composant dynamique, `<KeepAlive>` met en cache les instances inactives du composant sans les détruire.\n\n  Il ne peut y avoir qu'une seule instance de composant active comme enfant direct de `<KeepAlive>` à un moment donné.\n\nLorsqu'un composant est activé/désactivé à l'intérieur de `<KeepAlive>`, ses hooks de cycle de vie `activated` et `deactivated` seront invoqués en conséquence, fournissant une alternative à `mounted` et `unmounted`, qui ne sont pas appelés. Ceci s'applique à l'enfant direct de `<KeepAlive>` ainsi qu'à tous ses descendants.\n\n- **Exemple :**\n\n  Utilisation basique :\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  Lorsqu'il est utilisé avec les branches `v-if` / `v-else`, il ne doit y avoir qu'un seul composant rendu à la fois :\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n\n  Utilisé en combinaison avec `<Transition>` :\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n\n  En utilisant `include` / `exclude` :\n\n  ```html\n  <!-- chaîne de caractères délimitée par des virgules -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- regex (utilisez `v-bind`) -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- Tableau (utilisez `v-bind`) -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  Utilisation avec `max` :\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **Voir aussi :** [Guide - KeepAlive](https://fr.vuejs.org/guide/built-ins/keep-alive.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -106,6 +109,7 @@
         "kind": "markdown",
         "value": "\nRend le contenu de son slot à une autre partie du DOM.\n\n- **Props :**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * Requis. Spécifie le conteneur cible.\n     * Peut être un sélecteur ou un élément.\n     */\n    to: string | HTMLElement\n    /**\n     * S'il vaut `true`, le contenu restera à son emplacement\n     * original au lieu d'être déplacé dans le conteneur cible.\n     * Peut être changé de manière dynamique.\n     */\n    disabled?: boolean\n  }\n  ```\n\n- **Exemple :**\n\n  En spécifiant le conteneur cible :\n\n  ```html\n  <teleport to=\"#some-id\" />\n  <teleport to=\".some-class\" />\n  <teleport to=\"[data-teleport]\" />\n  ```\n\n  En le désactivant de manière conditionnelle :\n\n  ```html\n  <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </teleport>\n  ```\n\n- **Voir aussi :** [Guide - Teleport](https://fr.vuejs.org/guide/built-ins/teleport.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -139,6 +143,7 @@
         "kind": "markdown",
         "value": "\nUtilisé pour orchestrer des dépendances asynchrones imbriquées dans un arbre de composants.\n\n- **Props :**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n  }\n  ```\n\n- **Événements :**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **Détails :**\n\n  `<Suspense>` accepte deux slots : le slot `#default` et le slot `#fallback`. Il affichera le contenu du slot de secours tout en rendant le slot par défaut en mémoire.\n\n  S'il rencontre des dépendances asynchrones ([Composants asynchrones](https://fr.vuejs.org/guide/components/async.html) et des composants avec [`async setup()`](https://fr.vuejs.org/guide/built-ins/suspense.html#async-setup)) lors du rendu du slot par défaut, il attendra qu'elles soient toutes résolues avant d'afficher le slot par défaut.\n\n- **Voir aussi :** [Guide - Suspense](https://fr.vuejs.org/guide/built-ins/suspense.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -172,6 +177,7 @@
         "kind": "markdown",
         "value": "\nUn \"méta-composant\" pour rendre des composants ou éléments dynamiques.\n\n- **Props :**\n\n  ```ts\n  interface DynamicComponentProps {\n    is: string | Component\n  }\n  ```\n\n- **Détails :**\n\n  Le composant à rendre est déterminé par la propriété \"is\".\n\n  - Lorsque `is` est une chaîne de caractères, il peut s'agir du nom d'une balise HTML ou du nom d'un composant enregistré.\n\n  - De manière alternative, `is` peut également être directement lié à la définition d'un composant.\n\n- **Exemple :**\n\n  Rendu des composants par nom d'enregistrement (Options API) :\n\n  ```vue\n  <script>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n\n  export default {\n    components: { Foo, Bar },\n    data() {\n      return {\n        view: 'Foo'\n      }\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"view\" />\n  </template>\n  ```\n\n  Rendu de composants par définition (Composition API avec `<script setup>`) :\n\n  ```vue\n  <script setup>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n  </script>\n\n  <template>\n    <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n  </template>\n  ```\n\n  Rendu d'éléments HTML :\n\n  ```html\n  <component :is=\"href ? 'a' : 'span'\"></component>\n  ```\n\n  Les [composants natifs](./built-in-components) peuvent tous être passés à `is`, mais vous devez les enregistrer si vous voulez les passer par leur nom. Par exemple :\n\n  ```vue\n  <script>\n  import { Transition, TransitionGroup } from 'vue'\n\n  export default {\n    components: {\n      Transition,\n      TransitionGroup\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n      ...\n    </component>\n  </template>\n  ```\n\n  L'enregistrement n'est pas nécessaire si vous passez directement le composant à `is` plutôt que son nom, par exemple dans `<script setup>`.\n\n  Si `v-model` est utilisée sur une balise `<component>`, le compilateur de templates le transformera en une prop `modelValue` et un écouteur d'événements `update:modelValue`, comme il le ferait pour tout autre composant. Cependant, cela ne sera pas compatible avec les éléments HTML natifs, tels que `<input>` ou `<select>`. Par conséquent, l'utilisation de `v-model` avec un élément natif créé dynamiquement ne fonctionnera pas :\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n\n  const tag = ref('input')\n  const username = ref('')\n  </script>\n\n  <template>\n    <!-- Cela ne fonctionnera pas car \"input\" est un élément HTML natif. -->\n    <component :is=\"tag\" v-model=\"username\" />\n  </template>\n  ```\n\n  En pratique, ce cas de figure n'est pas courant car les champs de formulaire natifs sont généralement enveloppés dans des composants dans les applications réelles. Si vous avez besoin d'utiliser directement un élément natif, vous pouvez diviser manuellement le \"v-model\" en un attribut et un événement.\n\n- **Voir aussi :** [Composants dynamiques](https://fr.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -205,6 +211,7 @@
         "kind": "markdown",
         "value": "\nIndique l'emplacement du contenu d'un slot dans les templates.\n\n- **Props :**\n\n  ```ts\n  interface SlotProps {\n    /**\n     * Toutes les props passées à <slot> à passer comme arguments\n     * aux slots scopés\n     */\n    [key: string]: any\n    /**\n     * Réservé pour spécifier le nom du slot.\n     */\n    name?: string\n  }\n  ```\n\n- **Détails :**\n\n  L'élément `<slot>` peut utiliser l'attribut `name` pour spécifier un nom de slot. Si aucun `name` n'est spécifié, l'élément rendra le slot par défaut. Les attributs supplémentaires passés à l'élément slot seront passés comme des props de slot au slot scopé défini dans le parent.\n\n  L'élément lui-même sera remplacé par le contenu du slot correspondant.\n\n  Les éléments `<slot>` dans les templates Vue sont compilés en JavaScript, ils ne doivent donc pas être confondus avec les [éléments `<slot>` natifs](https://developer.mozilla.org/fr/docs/Web/HTML/Element/slot).\n\n- **Voir aussi :** [Composant - Slots](https://fr.vuejs.org/guide/components/slots.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -238,6 +245,7 @@
         "kind": "markdown",
         "value": "\nLa balise `<template>` est utilisée comme placeholder lorsque nous voulons utiliser une directive native sans rendre un élément dans le DOM.\n\n- **Détails :**\n\n  Le traitement spécial de `<template>` n'est déclenché que s'il est utilisé avec l'une de ces directives :\n\n  - `v-if`, `v-else-if`, or `v-else`\n  - `v-for`\n  - `v-slot`\n  \n  Si aucune de ces directives n'est présente, il sera rendu comme un [élément natif `<template>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/template) à la place.\n\n  Un `<template>` avec un `v-for` peut aussi avoir un attribut [`key`](https://fr.vuejs.org/api/built-in-special-attributes.html#key). Tous les autres attributs et directives seront rejetés, car ils n'ont pas de sens sans l'élément correspondant.\n\n  Les composants monofichiers utilisent une [top-level `<template>` tag](https://fr.vuejs.org/api/sfc-spec.html#language-blocks) pour envelopper l'ensemble du template. Cette utilisation est distincte de l'utilisation de `<template>` décrite ci-dessus. Cette balise de haut niveau ne fait pas partie du modèle lui-même et ne supporte pas la syntaxe template, comme les directives.\n\n- **Voir aussi :**\n  - [Guide - `v-if` avec `<template>`](https://fr.vuejs.org/guide/essentials/conditional.html#v-if-on-template) \n  - [Guide - `v-for` avec `<template>`](https://fr.vuejs.org/guide/essentials/list.html#v-for-on-template) \n  - [Guide - Slots nommés](https://fr.vuejs.org/guide/components/slots.html#named-slots) \n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",

package/data/template/ja.json

@@ -7,6 +7,7 @@
         "kind": "markdown",
         "value": "\n**単一の**要素またはコンポーネントにアニメーションのトランジションを提供します。\n\n- **プロパティ**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * トランジションの CSS クラス名を自動生成するために使用します。\n     * 例: `name: 'fade'` は `.fade-enter` や `.fade-enter-active`\n     * などに自動展開されます。\n     */\n    name?: string\n    /**\n     * CSS のトランジションクラスを適用するかどうか。\n     * デフォルト: true\n     */\n    css?: boolean\n    /**\n     * トランジション終了タイミングを決定するために待機する、\n     * トランジションイベントの種類を指定します。\n     * デフォルトの動作は、持続時間がより長い方のタイプを\n     * 自動検出します。\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * トランジションの持続時間を明示的に指定します。\n     * デフォルトの動作は、ルートトランジション要素の最初の\n     * `transitionend` または `animationend` イベントを待ちます。\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * leaving/entering トランジションのタイミングシーケンスを制御。\n     * デフォルトの動作は同時です。\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 初回レンダリング時にトランジションを適用するかどうか。\n     * デフォルト: false\n     */\n    appear?: boolean\n\n    /**\n     * トランジションクラスをカスタマイズするためのプロパティ。\n     * テンプレートでは kebab-case を使用（例: enter-from-class=\"xxx\"）\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **イベント**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled`（`v-show` のみ）\n  - `@appear-cancelled`\n\n- **例**\n\n  シンプルな要素:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n  `key` 属性を変更することで強制的にトランジションさせる:\n  \n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  トランジションモードと出現時のアニメーションを備えているダイナミックコンポーネント:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  トランジションイベントを購読する:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n- **参照:** [`<Transition>` ガイド](https://ja.vuejs.org/guide/built-ins/transition.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -40,6 +41,7 @@
         "kind": "markdown",
         "value": "\nリスト内の**複数**の要素またはコンポーネントにトランジション効果を提供する。\n\n- **プロパティ**\n\n  `<TransitionGroup>` は `<Transition>` と同じプロパティ（`mode` 以外）と追加の 2 つのプロパティを受け取ります:\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * 未定義の場合はフラグメントとしてレンダリングされます。\n     */\n    tag?: string\n    /**\n     * 移動のトランジション中に適用される CSS クラスのカスタマイズ。\n     * テンプレートでは kebab-case を使用（例: move-class=\"xxx\"）\n     */\n    moveClass?: string\n  }\n  ```\n\n- **イベント**\n\n  `<TransitionGroup>` は `<Transition>` と同じイベントを発行します。\n\n- **詳細**\n\n  デフォルトでは、`<TransitionGroup>` はラッパー DOM 要素をレンダリングしませんが、 `tag` プロパティによって定義できます。\n\n  アニメーションが正しく動作するためには、`<transition-group>` 内のすべての子に[**一意なキーを指定**](https://ja.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)する必要があることに注意してください。\n\n  `<TransitionGroup>` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス（`name` 属性から自動生成されるか、`move-class` プロパティで設定）が適用されます。移動用のクラスが適用されたときに、CSS の `transform` プロパティが「トランジション可能」であれば、その要素は [FLIP テクニック](https://aerotwist.com/blog/flip-your-animations/)を使って移動先までスムーズにアニメーションします。\n\n- **例**\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **参照:** [ガイド - TransitionGroup](https://ja.vuejs.org/guide/built-ins/transition-group.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -73,6 +75,7 @@
         "kind": "markdown",
         "value": "\n動的に切り替えられる、内側のコンポーネントをキャッシュします。\n\n- **プロパティ**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * 指定された場合、`include` でマッチした名前の\n     * コンポーネントのみがキャッシュされます。\n     */\n    include?: MatchPattern\n    /**\n     * `exclude` でマッチした名前のコンポーネントは\n     * キャッシュされません。\n     */\n    exclude?: MatchPattern\n    /**\n     * キャッシュするコンポーネントインスタンスの最大数。\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **詳細**\n\n  動的コンポーネントをラップすると、`<KeepAlive>` は非アクティブなコンポーネントインスタンスを破棄せずにキャッシュします。\n\n  `<KeepAlive>` の直接の子として、アクティブなコンポーネントのインスタンスは常に 1 つだけです。\n\n  `<KeepAlive>` の内部でコンポーネントが切り替えられると、その `activated` と `deactivated` ライフサイクルフックが呼び出されます（`mounted` と `unmounted` は呼び出されず、その代わりとして提供されています）。これは `<KeepAlive>` の直接の子だけでなく、そのすべての子孫にも適用されます。\n\n- **例**\n\n  基本的な使い方:\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `v-if` / `v-else` の分岐を使用する場合、一度にレンダリングされるコンポーネントは 1 つだけである必要があります:\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n\n  `<Transition>` と共に使用:\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n\n  `include` / `exclude` の使用:\n\n  ```html\n  <!-- カンマ区切りの文字列 -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 正規表現（`v-bind` を使用） -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 配列（`v-bind` を使用） -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `max` の使用:\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **参照:** [ガイド - KeepAlive](https://ja.vuejs.org/guide/built-ins/keep-alive.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -106,6 +109,7 @@
         "kind": "markdown",
         "value": "\nスロットの内容を DOM の別の場所にレンダリングします。\n\n- **プロパティ**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * 必須。ターゲットコンテナーを指定します。\n     * セレクターまたは実際の要素のいずれかを指定できます。\n     */\n    to: string | HTMLElement\n    /**\n     * `true` の場合、コンテンツはターゲットコンテナーに\n     * 移動せずに元の場所に残ります。\n     * 動的に変更できます。\n     */\n    disabled?: boolean\n  }\n  ```\n\n- **例**\n\n  ターゲットコンテナーの指定:\n\n  ```html\n  <teleport to=\"#some-id\" />\n  <teleport to=\".some-class\" />\n  <teleport to=\"[data-teleport]\" />\n  ```\n\n  条件によって無効化:\n\n  ```html\n  <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </teleport>\n  ```\n\n- **参照:** [ガイド - Teleport](https://ja.vuejs.org/guide/built-ins/teleport.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -139,6 +143,7 @@
         "kind": "markdown",
         "value": "\nコンポーネントツリー内のネストした非同期な依存関係を管理するために使用します。\n\n- **プロパティ**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n  }\n  ```\n\n- **イベント**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **詳細**\n\n  `<Suspense>` は `#default` スロットと `#fallback` スロットの 2 つのスロットを受け付けます。default スロットをメモリー内にレンダリングする間、fallback スロットの内容を表示します。\n\n  デフォルトスロットのレンダリング中に非同期な依存関係（[非同期コンポーネント](https://ja.vuejs.org/guide/components/async.html)や [`async setup()`](https://ja.vuejs.org/guide/built-ins/suspense.html#async-setup) のコンポーネント）が発生すると、それらが全て解決するまで待ってからデフォルトスロットを表示します。\n\n- **参照:** [ガイド - Suspense](https://ja.vuejs.org/guide/built-ins/suspense.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -172,6 +177,7 @@
         "kind": "markdown",
         "value": "\n動的コンポーネントや動的な要素をレンダリングするための「メタ・コンポーネント」です。\n\n- **プロパティ**\n\n  ```ts\n  interface DynamicComponentProps {\n    is: string | Component\n  }\n  ```\n\n- **詳細**\n\n  実際にレンダリングするコンポーネントは `is` プロパティによって決定されます。\n\n  - `is` が文字列の場合、HTML タグ名か、コンポーネントの登録名となります。\n\n  - また、`is` はコンポーネントの定義に直接バインドもできます。\n\n- **例**\n\n  登録名によるコンポーネントのレンダリング（Options API）:\n\n  ```vue\n  <script>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n\n  export default {\n    components: { Foo, Bar },\n    data() {\n      return {\n        view: 'Foo'\n      }\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"view\" />\n  </template>\n  ```\n\n  定義によるコンポーネントのレンダリング（`<script setup>` の Composition API）:\n\n  ```vue\n  <script setup>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n  </script>\n\n  <template>\n    <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n  </template>\n  ```\n\n  HTML 要素のレンダリング:\n\n  ```html\n  <component :is=\"href ? 'a' : 'span'\"></component>\n  ```\n\n  [ビルトインのコンポーネント](./built-in-components)はすべて `is` に渡すことができますが、名前で渡したい場合は登録しなければなりません。例えば:\n\n  ```vue\n  <script>\n  import { Transition, TransitionGroup } from 'vue'\n\n  export default {\n    components: {\n      Transition,\n      TransitionGroup\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n      ...\n    </component>\n  </template>\n  ```\n\n  例えば `<script setup>` などで、コンポーネント名ではなく、コンポーネント自体を `is` に渡す場合は、登録は必要ありません。\n\n  もし `v-model` が `<component>` タグで使用された場合、テンプレートコンパイラーは他のコンポーネントと同じように、`modelValue` プロパティと `update:modelValue` イベントリスナーに展開されます。しかし、これは `<input>` や `<select>` のようなネイティブ HTML 要素とは互換性がありません。そのため、動的に生成されるネイティブ要素に対して `v-model` を使用しても動作しません:\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n  \n  const tag = ref('input')\n  const username = ref('')\n  </script>\n\n  <template>\n    <!-- 'input' はネイティブ HTML 要素なので、動作しません -->\n    <component :is=\"tag\" v-model=\"username\" />\n  </template>\n  ```\n\n  実際のアプリケーションでは、ネイティブのフォームフィールドはコンポーネントでラップされるのが一般的なので、このようなエッジケースはあまりありません。もし、ネイティブ要素を直接使用する必要がある場合は、 `v-model` を属性とイベントに手動で分割できます。\n\n- **参照:** [動的コンポーネント](https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -205,6 +211,7 @@
         "kind": "markdown",
         "value": "\nテンプレート内でスロットコンテンツのアウトレットを表します。\n\n- **プロパティ**\n\n  ```ts\n  interface SlotProps {\n    /**\n     * <slot> に渡されたすべてのプロパティは、スコープ付き\n     * スロットの引数として渡されます\n     */\n    [key: string]: any\n    /**\n     * スロット名を指定するために予約済み。\n     */\n    name?: string\n  }\n  ```\n\n- **詳細**\n\n  `<slot>` 要素では `name` 属性を使用してスロット名を指定できます。`name` が指定されない場合は、デフォルトのスロットがレンダリングされます。slot 要素に渡された追加の属性は、親で定義されたスコープ付きスロットにスロットプロパティとして渡されます。\n\n  この要素そのものは、一致したスロットの内容に置き換えられます。\n\n  Vue テンプレートの `<slot>` 要素は JavaScript にコンパイルされているので、[ネイティブの `<slot>` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot)と混同しないように注意してください。\n\n- **参照:** [コンポーネント - スロット](https://ja.vuejs.org/guide/components/slots.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -238,6 +245,7 @@
         "kind": "markdown",
         "value": "\nDOM に要素をレンダリングせずに組み込みディレクティブを使用したい場合、`<template>` タグをプレースホルダーとして使用します。\n\n- **詳細:**\n\n  `<template>` の特別な処理は、以下のディレクティブと一緒に使われた場合のみ発生します:\n\n  - `v-if`、`v-else-if`、または `v-else`\n  - `v-for`\n  - `v-slot`\n\n  これらのディレクティブが存在しない場合は、代わりに[ネイティブの `<template>` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/template)としてレンダリングされます。\n\n  `v-for` を持つ `<template>` は [`key` 属性](https://ja.vuejs.org/api/built-in-special-attributes.html#key)を持たせることができます。それ以外の属性やディレクティブは、対応する要素がなければ意味をなさないので、すべて破棄されます。\n\n  単一ファイルコンポーネントは、テンプレート全体をラップするために[トップレベルの `<template>` タグ](https://ja.vuejs.org/api/sfc-spec.html#language-blocks)を使用します。この使い方は、上記で説明した `<template>` の使い方とは別のものです。このトップレベルタグはテンプレート自体の一部ではなく、ディレクティブのようなテンプレートの構文もサポートしていません。 \n\n- **参照:**\n  - [ガイド - `<template>` に `v-if` を適用する](https://ja.vuejs.org/guide/essentials/conditional.html#v-if-on-template) \n  - [ガイド - `<template>` に `v-for` を適用する](https://ja.vuejs.org/guide/essentials/list.html#v-for-on-template) \n  - [ガイド - 名前付きスロット](https://ja.vuejs.org/guide/components/slots.html#named-slots) \n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",

package/data/template/ko.json

@@ -7,6 +7,7 @@
         "kind": "markdown",
         "value": "\n**싱글** 엘리먼트 또는 컴포넌트에 애니메이션 트랜지션 효과를 제공합니다.\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 트랜지션 CSS 클래스 이름 자동 생성에 사용.\n     * 예를 들어 `name: 'fade'`는 `.fade-enter`,\n     * `.fade-enter-active` 등으로 자동 확장됨.\n     */\n    name?: string\n    /**\n     * CSS 트랜지션 클래스를 적용할지 여부입니다.\n     * 기본 값: true\n     */\n    css?: boolean\n    /**\n     * 트랜지션 종료 타이밍을 결정하기 위해,\n     * 대기할 트랜지션 이벤트의 유형을 지정.\n     * 기본 동작은 지속 시간이 더 긴 유형을\n     * 자동으로 감지.\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * 명시적으로 트랜지션의 지속 시간을 지정.\n     * 기본 동작은 루트 트랜지션 엘리먼트의 첫 번째\n     * `transitionend` 또는 `animationend` 이벤트를 기다리는 것.\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * 진입/진출 트랜지션의 타이밍 순서를 제어.\n     * 기본 동작은 동시.\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 최초 렌더링에 트랜지션을 적용할지 여부.\n     * 기본 값: false\n     */\n    appear?: boolean\n\n    /**\n     * 트랜지션 클래스를 커스텀하기 위한 props.\n     * 템플릿에서 kebab-case를 사용해야 함.\n     * 예: enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **이벤트**:\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show`에서만)\n  - `@appear-cancelled`\n\n- **예제**:\n\n  간단한 엘리먼트:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">토글된 컨텐츠</div>\n  </Transition>\n  ```\n\n  `key` 속성을 변경하여 강제로 트랜지션(전환):\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n  \n  트랜지션 모드 + 등장 애니메이션을 가진 동적 컴포넌트:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  트랜지션 이벤트 수신:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">토글된 컨텐츠</div>\n  </Transition>\n  ```\n\n- **참고**: [가이드 - `<Transition>`](https://ko.vuejs.org/guide/built-ins/transition.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -40,6 +41,7 @@
         "kind": "markdown",
         "value": "\n리스트의 **여러** 엘리먼트 또는 컴포넌트에 트랜지션 효과를 제공합니다.\n\n- **Props**\n\n  `<TransitionGroup>`은 `<Transition>`과 동일한 props에서 `mode`를 제외하고 두 개의 추가 props를 허용합니다:\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * 정의하지 않으면, 렌더는 프래그먼트처럼 취급함.\n     */\n    tag?: string\n    /**\n     * 이동중 트랜지션에 적용될 CSS 클래스를 커스텀.\n     * 템플릿에서 kebab-case를 사용해야 함.\n     * 예: enter-from-class=\"xxx\"\n     */\n    moveClass?: string\n  }\n  ```\n\n- **이벤트**:\n\n  `<TransitionGroup>`은 `<Transition>`과 동일한 이벤트를 발생시킵니다.\n\n- **세부 사항**:\n\n  기본적으로 `<TransitionGroup>`은 래퍼 DOM 엘리먼트를 렌더링하지 않지만 `tag` prop을 통해 정의할 수 있습니다.\n\n  애니메이션이 제대로 작동하려면 `<transition-group>`의 모든 자식이 [**고유 키**](https://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)를 가져야 합니다.\n\n  `<TransitionGroup>`은 CSS `transform`으로 이동 트랜지션을 지원합니다.\n  업데이트 후 화면에서 자식의 위치가 변경되면,\n  움직이는 CSS 클래스가 적용됩니다(`name` 속성에서 자동 생성되거나 `move-class` prop으로 구성됨).\n  이동 클래스가 적용될 때 CSS의 `transform` 속성이 \"트랜지션 가능\"이면,\n  [FLIP 기술](https://aerotwist.com/blog/flip-your-animations/)을 사용하여 엘리먼트가 목적지까지 부드럽게 애니메이션됩니다.\n\n- **예제**:\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **참고**: [가이드 - TransitionGroup](https://ko.vuejs.org/guide/built-ins/transition-group.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -73,6 +75,7 @@
         "kind": "markdown",
         "value": "\n내부에 래핑된 동적으로 토글되는 컴포넌트를 캐시합니다.\n\n- **Props**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * `include`와 이름이 일치하는 컴포넌트만 캐시됨.\n     */\n    include?: MatchPattern\n    /**\n     * `exclude`와 이름이 일치하는 컴포넌트는 캐시되지 않음.\n     */\n    exclude?: MatchPattern\n    /**\n     * 캐시할 컴포넌트 인스턴스의 최대 수.\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **세부 사항**:\n\n  `<KeepAlive>`로 래핑된 동적 컴포넌트는 비활성화 되면,\n  컴포넌트 인스턴스가 파괴되지 않고 캐시됩니다.\n\n  `<KeepAlive>`에는 언제나 활성화된 직계 자식의 컴포넌트 인스턴스가 하나만 있을 수 있습니다.\n\n  컴포넌트가 `<KeepAlive>` 내에서 토글되면,\n  `mounted` 및 `unmounted` 대신 `activated` 및 `deactivated` 생명 주기 훅이 호출됩니다.\n  이는 `<KeepAlive>`의 직계 자식과 모든 하위 항목에 적용됩니다.\n\n- **예제**:\n\n  기본 사용법:\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `v-if` / `v-else`를 사용할 때,\n  한 번에 하나의 컴포넌트만 렌더링되어야 합니다:\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n\n  `<Transition>`과 함께 사용:\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n\n  `include` / `exclude` 사용:\n\n  ```html\n  <!-- 쉼표로 구분된 문자열 -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 정규식 사용(`v-bind` 포함) -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 배열 사용(`v-bind` 포함) -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `max`를 활용한 사용:\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **참고**: [가이드 - KeepAlive](https://ko.vuejs.org/guide/built-ins/keep-alive.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -106,6 +109,7 @@
         "kind": "markdown",
         "value": "\n슬롯 컨텐츠를 DOM 내 다른 위치에서 렌더링합니다.\n\n- **Props**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * 필수. 대상이 될 컨테이너를 지정.\n     * 셀렉터 또는 실제 엘리먼트일 수 있음.\n     */\n    to: string | HTMLElement\n    /**\n     * `true`이면 컨텐츠가 대상이 될 컨테이너로\n     * 이동하지 않고 원래 위치에 남아 있음.\n     * 동적으로 변경할 수 있음.\n     */\n    disabled?: boolean\n  }\n  ```\n\n- **예제**:\n\n  대상이 될 컨테이너 지정:\n\n  ```html\n  <teleport to=\"#some-id\" />\n  <teleport to=\".some-class\" />\n  <teleport to=\"[data-teleport]\" />\n  ```\n\n  조건부 비활성화:\n\n  ```html\n  <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </teleport>\n  ```\n\n- **참고**: [가이드 - Teleport](https://ko.vuejs.org/guide/built-ins/teleport.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -139,6 +143,7 @@
         "kind": "markdown",
         "value": "\n컴포넌트 트리에서 중첩된 비동기 의존성을 조정하는 데 사용됩니다.\n\n- **Props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n  }\n  ```\n\n- **이벤트**:\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **세부 사항**:\n\n  `<Suspense>`는 `#default` 슬롯과 `#fallback` 슬롯이라는 두 개의 슬롯을 사용합니다.\n  메모리에서 기본 슬롯을 렌더링하는 동안,\n  폴백 슬롯의 대체 컨텐츠를 노출합니다.\n\n  기본 슬롯을 렌더링하는 동안 비동기 의존성([비동기 컴포넌트](https://ko.vuejs.org/guide/components/async.html) 및 [`async setup()`](https://ko.vuejs.org/guide/built-ins/suspense.html#async-setup)이 있는 컴포넌트)을 만나면,\n  기본 슬롯을 표시하기 전에 모든 것이 해결될 때까지 대기합니다.\n\n- **참고**: [가이드 - Suspense](https://ko.vuejs.org/guide/built-ins/suspense.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -172,6 +177,7 @@
         "kind": "markdown",
         "value": "\n동적 컴포넌트 또는 엘리먼트를 렌더링하기 위한 \"메타 컴포넌트\"입니다.\n\n- **Props**\n\n  ```ts\n  interface DynamicComponentProps {\n    is: string | Component\n  }\n  ```\n\n- **세부 사항**:\n\n  `is`라는 prop의 값으로 렌더링할 실제 컴포넌트가 결정됩니다:\n\n  - 문자열인 경우, HTML 태그 이름 또는 컴포넌트로 등록된 이름일 수 있음.\n\n  - 컴포넌트의 정의에 직접 바인딩될 수도 있음.\n\n- **예제**:\n\n  등록된 이름으로 컴포넌트 렌더링(옵션 API):\n\n  ```vue\n  <script>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n\n  export default {\n    components: { Foo, Bar },\n    data() {\n      return {\n        view: 'Foo'\n      }\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"view\" />\n  </template>\n  ```\n\n  정의에 따른 컴포넌트 렌더링(`<script setup>`이 있는 컴포지션 API):\n\n  ```vue\n  <script setup>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n  </script>\n\n  <template>\n    <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n  </template>\n  ```\n\n  HTML 엘리먼트 렌더링:\n\n  ```html\n  <component :is=\"href ? 'a' : 'span'\"></component>\n  ```\n\n  [빌트인 컴포넌트](./built-in-components)는 모두 `is`에 전달할 수 있지만,\n  이름으로 전달하려면 등록해야 합니다.\n  예를 들어:\n\n  ```vue\n  <script>\n  import { Transition, TransitionGroup } from 'vue'\n\n  export default {\n    components: {\n      Transition,\n      TransitionGroup\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n      ...\n    </component>\n  </template>\n  ```\n\n  이름이 아닌 컴포넌트 자체를 `is`에 전달하는 경우,\n  등록이 필요하지 않습니다(예를 들어 `<script setup>`에서).\n\n  `v-model`이 `<component>` 태그에 사용되면, 템플릿 컴파일러는 다른 컴포넌트와 마찬가지로 이를 `modelValue` prop 및 `update:modelValue` 이벤트 리스너로 확장합니다.\n  그러나 이것은 `<input>` 또는 `<select>`와 같은 기본 HTML 엘리먼트와 호환되지 않습니다.\n  결과적으로 동적으로 생성된 기본 엘리먼트와 함께 `v-model`을 사용하면 작동하지 않습니다:\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n  \n  const tag = ref('input')\n  const username = ref('')\n  </script>\n\n  <template>\n    <!-- 'input'이 기본 HTML 엘리먼트이므로 작동하지 않음 -->\n    <component :is=\"tag\" v-model=\"username\" />\n  </template>\n  ```\n\n  실제로는 기본 양식(form) 필드가 일반적으로 실제 앱의 컴포넌트에 래핑되기 때문에 이러한 예외적인 경우는 일반적이지 않습니다.\n  네이티브 엘리먼트를 직접 사용해야 하는 경우, `v-model`을 속성과 이벤트로 수동으로 분할할 수 있습니다.\n\n- **참고**: [가이드 - 컴포넌트 기초: 동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -205,6 +211,7 @@
         "kind": "markdown",
         "value": "\n템플릿의 슬롯 컨텐츠를 내보낼 지점을 나타냅니다.\n\n- **Props**\n\n  ```ts\n  interface SlotProps {\n    /**\n     * 범위가 지정된 슬롯의 인자로 전달하기 위해\n     * <slot>에 전달된 모든 props\n     */\n    [key: string]: any\n    /**\n     * 슬롯 이름을 지정.\n     */\n    name?: string\n  }\n  ```\n\n- **세부 사항**:\n\n  `<slot>` 엘리먼트는 `name` 속성을 사용하여 슬롯 이름을 지정할 수 있습니다.\n  `name`을 지정하지 않으면 기본 슬롯으로 렌더링됩니다.\n  슬롯 엘리먼트에 전달된 추가 속성은 부모 내부에서 범위가 정의된 슬롯에 슬롯 props로 전달됩니다.\n\n  엘리먼트는 일치하는 슬롯의 컨텐츠로 대체됩니다.\n\n  Vue 템플릿의 `<slot>` 엘리먼트는 JavaScript로 컴파일되므로 [네이티브 `<slot>` 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)와 혼동하면 안됩니다.\n\n- **참고**: [가이드 - 슬롯](https://ko.vuejs.org/guide/components/slots.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -238,6 +245,7 @@
         "kind": "markdown",
         "value": "\n`<template>` 태그는 DOM에 렌더링없이 사용할 앨리먼트들에 대한 위치기술을 위해(placeholder)로 사용할수 있습니다. \nThe `<template>` tag is used as a placeholder when we want to use a built-in directive without rendering an element in the DOM.\n\n- **세부 사항:**\n  `<template>` 의 이런 특수한 취급은 다음 디렉티브들과 함께 사용될때만 적용됩니다. \n  \n  - `v-if`, `v-else-if`, or `v-else`\n  - `v-for`\n  - `v-slot`\n  \n  만약 이런 디렉티브가 없다면, [네이티브 `<template>` 앨리먼트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)로 렌더링됩니다. \n  \n  `v-for`가 있는 `<template>`은 [`key` 속성](https://ko.vuejs.org/api/built-in-special-attributes.html#key)도 가질 수 있습니다. 다른 모든 속성과 디렉티브는 해당 엘리먼트가가 없으면 의미가 없으므로 버려집니다.\n\n  \n  싱글 파일 컴포넌트는 [최상위 `<template>` 태그](https://ko.vuejs.org/api/sfc-spec.html#language-blocks)를 사용하여 전체 템플릿을 래핑합니다. 그 사용법은 위에서 설명한 `<template>`의 사용과는 별개입니다. 해당 최상위 태그는 템플릿 자체의 일부가 아니며 지시문과 같은 템플릿 문법을 지원하지 않습니다.\n\n- **See also:**\n  - [가이드 - `v-if` on `<template>`](https://ko.vuejs.org/guide/essentials/conditional.html#v-if-on-template) \n  - [가이드 - `v-for` on `<template>`](https://ko.vuejs.org/guide/essentials/list.html#v-for-on-template) \n  - [가이드 - Named slots](https://ko.vuejs.org/guide/components/slots.html#named-slots) \n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",

package/data/template/zh-cn.json

@@ -7,6 +7,7 @@
         "kind": "markdown",
         "value": "\n为**单个**元素或组件提供动画过渡效果。\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 用于自动生成过渡 CSS class 名。\n     * 例如 `name: 'fade'` 将自动扩展为 `.fade-enter`、\n     * `.fade-enter-active` 等。\n     */\n    name?: string\n    /**\n     * 是否应用 CSS 过渡 class。\n     * 默认：true\n     */\n    css?: boolean\n    /**\n     * 指定要等待的过渡事件类型\n     * 来确定过渡结束的时间。\n     * 默认情况下会自动检测\n     * 持续时间较长的类型。\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * 显式指定过渡的持续时间。\n     * 默认情况下是等待过渡效果的根元素的第一个 `transitionend`\n     * 或`animationend`事件。\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * 控制离开/进入过渡的时序。\n     * 默认情况下是同时的。\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 是否对初始渲染使用过渡。\n     * 默认：false\n     */\n    appear?: boolean\n\n    /**\n     * 用于自定义过渡 class 的 prop。\n     * 在模板中使用短横线命名，例如：enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **事件**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show` only)\n  - `@appear-cancelled`\n\n- **示例**\n\n  简单元素：\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n  通过改变 `key` 属性来强制过度执行：\n  \n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  动态组件，初始渲染时带有过渡模式 + 动画出现：\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  监听过渡事件：\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n- **参考**：[`<Transition>` 指南](https://cn.vuejs.org/guide/built-ins/transition.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -40,6 +41,7 @@
         "kind": "markdown",
         "value": "\n为列表中的**多个**元素或组件提供过渡效果。\n\n- **Props**\n\n  `<TransitionGroup>` 拥有与 `<Transition>` 除了 `mode` 以外所有的 props，并增加了两个额外的 props：\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * 如果未定义，则渲染为片段 (fragment)。\n     */\n    tag?: string\n    /**\n     * 用于自定义过渡期间被应用的 CSS class。\n     * 在模板中使用 kebab-case，例如 move-class=\"xxx\"\n     */\n    moveClass?: string\n  }\n  ```\n\n- **事件**\n\n  `<TransitionGroup>` 抛出与 `<Transition>` 相同的事件。\n\n- **详细信息**\n\n  默认情况下，`<TransitionGroup>` 不会渲染一个容器 DOM 元素，但是可以通过 `tag` prop 启用。\n\n  注意，每个 `<transition-group>` 的子节点必须有[**独立的 key**](https://cn.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)，动画才能正常工作。\n\n  `<TransitionGroup>` 支持通过 CSS transform 控制移动效果。当一个子节点在屏幕上的位置在更新之后发生变化时，它会被添加一个使其位移的 CSS class (基于 `name` attribute 推导，或使用 `move-class` prop 显式配置)。如果使其位移的 class 被添加时 CSS 的 `transform` 属性是“可过渡的”，那么该元素会基于 [FLIP 技巧](https://aerotwist.com/blog/flip-your-animations/)平滑地到达动画终点。\n\n- **示例**\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **参考**：[指南 - TransitionGroup](https://cn.vuejs.org/guide/built-ins/transition-group.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -73,6 +75,7 @@
         "kind": "markdown",
         "value": "\n缓存包裹在其中的动态切换组件。\n\n- **Props**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * 如果指定，则只有与 `include` 名称\n     * 匹配的组件才会被缓存。\n     */\n    include?: MatchPattern\n    /**\n     * 任何名称与 `exclude`\n     * 匹配的组件都不会被缓存。\n     */\n    exclude?: MatchPattern\n    /**\n     * 最多可以缓存多少组件实例。\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **详细信息**\n\n  `<KeepAlive>` 包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。\n\n  任何时候都只能有一个活跃组件实例作为 `<KeepAlive>` 的直接子节点。\n\n  当一个组件在 `<KeepAlive>` 中被切换时，它的 `activated` 和 `deactivated` 生命周期钩子将被调用，用来替代 `mounted` 和 `unmounted`。这适用于 `<KeepAlive>` 的直接子节点及其所有子孙节点。\n\n- **示例**\n\n  基本用法：\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  与 `v-if` / `v-else` 分支一起使用时，同一时间只能有一个组件被渲染：\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n\n  与 `<Transition>` 一起使用：\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n\n  使用 `include` / `exclude`：\n\n  ```html\n  <!-- 用逗号分隔的字符串 -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 正则表达式 (使用 `v-bind`) -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 数组 (使用 `v-bind`) -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  使用 `max`：\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **参考**：[指南 - KeepAlive](https://cn.vuejs.org/guide/built-ins/keep-alive.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -106,6 +109,7 @@
         "kind": "markdown",
         "value": "\n将其插槽内容渲染到 DOM 中的另一个位置。\n\n- **Props**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * 必填项。指定目标容器。\n     * 可以是选择器或实际元素。\n     */\n    to: string | HTMLElement\n    /**\n     * 当值为 `true` 时，内容将保留在其原始位置\n     * 而不是移动到目标容器中。\n     * 可以动态更改。\n     */\n    disabled?: boolean\n  }\n  ```\n\n- **示例**\n\n  指定目标容器：\n\n  ```html\n  <teleport to=\"#some-id\" />\n  <teleport to=\".some-class\" />\n  <teleport to=\"[data-teleport]\" />\n  ```\n\n  有条件地禁用：\n\n  ```html\n  <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </teleport>\n  ```\n\n- **参考**：[指南 - Teleport](https://cn.vuejs.org/guide/built-ins/teleport.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -139,6 +143,7 @@
         "kind": "markdown",
         "value": "\n用于协调对组件树中嵌套的异步依赖的处理。\n\n- **Props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n  }\n  ```\n\n- **事件**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **详细信息**\n\n  `<Suspense>` 接受两个插槽：`#default` 和 `#fallback`。它将在内存中渲染默认插槽的同时展示后备插槽内容。\n\n  如果在渲染时遇到异步依赖项 ([异步组件](https://cn.vuejs.org/guide/components/async.html)和具有 [`async setup()`](https://cn.vuejs.org/guide/built-ins/suspense.html#async-setup) 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。\n\n- **参考**：[指南 - Suspense](https://cn.vuejs.org/guide/built-ins/suspense.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -172,6 +177,7 @@
         "kind": "markdown",
         "value": "\n一个用于渲染动态组件或元素的“元组件”。\n\n- **Props**\n\n  ```ts\n  interface DynamicComponentProps {\n    is: string | Component\n  }\n  ```\n\n- **详细信息**\n\n  要渲染的实际组件由 `is` prop 决定。\n\n  - 当 `is` 是字符串，它既可以是 HTML 标签名也可以是组件的注册名。\n\n  - 或者，`is` 也可以直接绑定到组件的定义。\n\n- **示例**\n\n  按注册名渲染组件 (选项式 API)：\n\n  ```vue\n  <script>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n\n  export default {\n    components: { Foo, Bar },\n    data() {\n      return {\n        view: 'Foo'\n      }\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"view\" />\n  </template>\n  ```\n\n  按定义渲染组件 (`<script setup>` 组合式 API)：\n\n  ```vue\n  <script setup>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n  </script>\n\n  <template>\n    <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n  </template>\n  ```\n\n  渲染 HTML 元素：\n\n  ```html\n  <component :is=\"href ? 'a' : 'span'\"></component>\n  ```\n\n  [内置组件](./built-in-components)都可以传递给 `is`，但是如果想通过名称传递则必须先对其进行注册。举例来说：\n\n  ```vue\n  <script>\n  import { Transition, TransitionGroup } from 'vue'\n\n  export default {\n    components: {\n      Transition,\n      TransitionGroup\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n      ...\n    </component>\n  </template>\n  ```\n\n  如果将组件本身传递给 `is` 而不是其名称，则不需要注册，例如在 `<script setup>` 中。\n\n  如果在 `<component>` 标签上使用 `v-model`，模板编译器会将其扩展为 `modelValue` prop 和 `update:modelValue` 事件监听器，就像对任何其他组件一样。但是，这与原生 HTML 元素不兼容，例如 `<input>` 或 `<select>`。因此，在动态创建的原生元素上使用 `v-model` 将不起作用：\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n\n  const tag = ref('input')\n  const username = ref('')\n  </script>\n\n  <template>\n    <!-- 由于 'input' 是原生 HTML 元素，因此这个 v-model 不起作用 -->\n    <component :is=\"tag\" v-model=\"username\" />\n  </template>\n  ```\n\n  在实践中，这种极端情况并不常见，因为原生表单字段通常包裹在实际应用的组件中。如果确实需要直接使用原生元素，那么你可以手动将 `v-model` 拆分为 attribute 和事件。\n\n- **参考**：[动态组件](https://cn.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -205,6 +211,7 @@
         "kind": "markdown",
         "value": "\n表示模板中的插槽内容出口。\n\n- **Props**\n\n  ```ts\n  interface SlotProps {\n    /**\n     * 任何传递给 <slot> 的 prop 都可以作为作用域插槽\n     * 的参数传递\n     */\n    [key: string]: any\n    /**\n     * 保留，用于指定插槽名。\n     */\n    name?: string\n  }\n  ```\n\n- **详细信息**\n\n  `<slot>` 元素可以使用 `name` attribute 来指定插槽名。当没有指定 `name` 时，将会渲染默认插槽。传递给插槽元素的附加 attributes 将作为插槽 props，传递给父级中定义的作用域插槽。\n\n  元素本身将被其所匹配的插槽内容替换。\n\n  Vue 模板里的 `<slot>` 元素会被编译到 JavaScript，因此不要与[原生 `<slot>` 元素](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)进行混淆。\n\n- **参考**：[组件 - 插槽](https://cn.vuejs.org/guide/components/slots.html)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",
@@ -238,6 +245,7 @@
         "kind": "markdown",
         "value": "\n当我们想要使用内置指令而不在 DOM 中渲染元素时，`<template>` 标签可以作为占位符使用。\n\n- **详细信息**：\n\n  对 `<template>` 的特殊处理只有在它与以下任一指令一起使用时才会被触发：\n\n  - `v-if`、`v-else-if` 或 `v-else`\n  - `v-for`\n  - `v-slot`\n\n  如果这些指令都不存在，那么它将被渲染成一个[原生的 `<template>` 元素](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)。\n\n  带有 `v-for` 的 `<template>` 也可以有一个 [`key` 属性](https://cn.vuejs.org/api/built-in-special-attributes.html#key)。所有其他的属性和指令都将被丢弃，因为没有相应的元素，它们就没有意义。\n\n  单文件组件使用[顶层的 `<template>` 标签](https://cn.vuejs.org/api/sfc-spec.html#language-blocks)来包裹整个模板。这种用法与上面描述的 `<template>` 使用方式是有区别的。该顶层标签不是模板本身的一部分，不支持指令等模板语法。\n\n- **参考**：\n  - [指南 - `<template>` 上的 `v-if`](https://cn.vuejs.org/guide/essentials/conditional.html#v-if-on-template)\n  - [指南 - `<template>` 上的 `v-for`](https://cn.vuejs.org/guide/essentials/list.html#v-for-on-template)\n  - [指南 - 具名插槽](https://cn.vuejs.org/guide/components/slots.html#named-slots)\n"
       },
+      "attributes": [],
       "references": [
         {
           "name": "en",

package/out/ideFeatures/nameCasing.d.ts

@@ -1,7 +1,8 @@
 import { ServiceContext } from '@volar/language-service';
 import type * as vscode from 'vscode-languageserver-protocol';
 import { AttrNameCasing, TagNameCasing } from '../types';
-export declare function convertTagName(ts: typeof import('typescript/lib/tsserverlibrary'), context: ServiceContext, uri: string, casing: TagNameCasing): Promise<vscode.TextEdit[] | undefined>;
+import type { Provide } from 'volar-service-typescript';
+export declare function convertTagName(ts: typeof import('typescript/lib/tsserverlibrary'), context: ServiceContext<Provide>, uri: string, casing: TagNameCasing): Promise<vscode.TextEdit[] | undefined>;
 export declare function convertAttrName(ts: typeof import('typescript/lib/tsserverlibrary'), context: ServiceContext, uri: string, casing: AttrNameCasing): Promise<vscode.TextEdit[] | undefined>;
 export declare function getNameCasing(ts: typeof import('typescript/lib/tsserverlibrary'), context: ServiceContext, uri: string): Promise<{
     tag: TagNameCasing;

package/out/ideFeatures/nameCasing.js

@@ -6,19 +6,19 @@ const helpers_1 = require("../helpers");
 const vue = require("@vue/language-core");
 const types_1 = require("../types");
 async function convertTagName(ts, context, uri, casing) {
-    if (!context.typescript)
-        return;
     const rootFile = context.documents.getSourceByUri(uri)?.root;
     if (!(rootFile instanceof vue.VueFile))
         return;
     const desc = rootFile.sfc;
     if (!desc.template)
         return;
+    const languageService = context.inject('typescript/languageService');
+    const languageServiceHost = context.inject('typescript/languageServiceHost');
     const template = desc.template;
     const document = context.documents.getDocumentByFileName(rootFile.snapshot, rootFile.fileName);
     const edits = [];
-    const nativeTags = (0, helpers_1.checkNativeTags)(ts, context.typescript.languageService, context.typescript.languageServiceHost);
-    const components = (0, helpers_1.checkComponentNames)(ts, context.typescript.languageService, rootFile, nativeTags);
+    const nativeTags = (0, helpers_1.checkNativeTags)(ts, languageService, languageServiceHost);
+    const components = (0, helpers_1.checkComponentNames)(ts, languageService, rootFile, nativeTags);
     const tags = (0, helpers_1.getTemplateTagsAndAttrs)(rootFile);
     for (const [tagName, { offsets }] of tags) {
         const componentName = components.find(component => component === tagName || (0, shared_1.hyphenate)(component) === tagName);
@@ -40,24 +40,24 @@ async function convertTagName(ts, context, uri, casing) {
 }
 exports.convertTagName = convertTagName;
 async function convertAttrName(ts, context, uri, casing) {
-    if (!context.typescript)
-        return;
     const rootFile = context.documents.getSourceByUri(uri)?.root;
     if (!(rootFile instanceof vue.VueFile))
         return;
     const desc = rootFile.sfc;
     if (!desc.template)
         return;
+    const languageService = context.inject('typescript/languageService');
+    const languageServiceHost = context.inject('typescript/languageServiceHost');
     const template = desc.template;
     const document = context.documents.getDocumentByFileName(rootFile.snapshot, rootFile.fileName);
     const edits = [];
-    const nativeTags = (0, helpers_1.checkNativeTags)(ts, context.typescript.languageService, context.typescript.languageServiceHost);
-    const components = (0, helpers_1.checkComponentNames)(ts, context.typescript.languageService, rootFile, nativeTags);
+    const nativeTags = (0, helpers_1.checkNativeTags)(ts, languageService, languageServiceHost);
+    const components = (0, helpers_1.checkComponentNames)(ts, languageService, rootFile, nativeTags);
     const tags = (0, helpers_1.getTemplateTagsAndAttrs)(rootFile);
     for (const [tagName, { attrs }] of tags) {
         const componentName = components.find(component => component === tagName || (0, shared_1.hyphenate)(component) === tagName);
         if (componentName) {
-            const props = (0, helpers_1.checkPropsOfTag)(ts, context.typescript.languageService, rootFile, componentName, nativeTags);
+            const props = (0, helpers_1.checkPropsOfTag)(ts, languageService, rootFile, componentName, nativeTags);
             for (const [attrName, { offsets }] of attrs) {
                 const propName = props.find(prop => prop === attrName || (0, shared_1.hyphenate)(prop) === attrName);
                 if (propName) {
@@ -94,12 +94,6 @@ async function getNameCasing(ts, context, uri) {
 }
 exports.getNameCasing = getNameCasing;
 function detect(ts, context, uri) {
-    if (!context.typescript) {
-        return {
-            tag: [],
-            attr: [],
-        };
-    }
     const rootFile = context.documents.getSourceByUri(uri)?.root;
     if (!(rootFile instanceof vue.VueFile)) {
         return {
@@ -107,6 +101,8 @@ function detect(ts, context, uri) {
             attr: [],
         };
     }
+    const languageService = context.inject('typescript/languageService');
+    const languageServiceHost = context.inject('typescript/languageServiceHost');
     return {
         tag: getTagNameCase(rootFile),
         attr: getAttrNameCase(rootFile),
@@ -133,11 +129,8 @@ function detect(ts, context, uri) {
         return result;
     }
     function getTagNameCase(file) {
-        if (!context.typescript) {
-            return [];
-        }
-        const nativeTags = (0, helpers_1.checkNativeTags)(ts, context.typescript.languageService, context.typescript.languageServiceHost);
-        const components = (0, helpers_1.checkComponentNames)(ts, context.typescript.languageService, file, nativeTags);
+        const nativeTags = (0, helpers_1.checkNativeTags)(ts, languageService, languageServiceHost);
+        const components = (0, helpers_1.checkComponentNames)(ts, languageService, file, nativeTags);
         const tagNames = (0, helpers_1.getTemplateTagsAndAttrs)(file);
         const result = [];
         let anyComponentUsed = false;