From 5e911e4e7bcdce9853c8339c171c25c57ad57ef8 Mon Sep 17 00:00:00 2001
From: boussadjra <cb_boussadjra@esi.dz>
Date: Sun, 3 Dec 2023 21:22:01 +0100
Subject: [PATCH] translate #101  #102 #120

---
 .../theme/components/PreferenceTooltip.vue    | 28 ++++---
 glossary.md                                   |  2 +
 src/api/built-in-special-attributes.md        | 74 ++++++++---------
 src/api/built-in-special-elements.md          | 82 +++++++++----------
 src/api/sfc-spec.md                           | 74 ++++++++---------
 5 files changed, 132 insertions(+), 128 deletions(-)

diff --git a/.vitepress/theme/components/PreferenceTooltip.vue b/.vitepress/theme/components/PreferenceTooltip.vue
index 1c1ef5a9..85c03f68 100644
--- a/.vitepress/theme/components/PreferenceTooltip.vue
+++ b/.vitepress/theme/components/PreferenceTooltip.vue
@@ -97,32 +97,32 @@ function dismiss() {
 
 <template>
   <Transition name="fly-in">
-    <div class="preference-tooltip" v-if="show">
+    <div class="preference-tooltip" v-if="show" dir="rtl">
       <template v-if="source === 'default'">
-        <p>API style now defaults to Composition API.</p>
+        <p>الآن النمط البرمجي الافتراضي هو الواجهة التركيبية.</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
+          عرض المحتوى لـ
+          {{ preferComposition ? 'الواجهة التركيبية' : 'واجهة الخيارات' }}لأن
           {{
             source === 'url-query'
-              ? 'it is specified by the URL query.'
-              : 'the target section is only available for that API.'
+              ? 'تم تحديده في استعلام URL.'
+              : 'القسم المستهدف متاح فقط لهذه الواجهة.'
           }}
         </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>
+        <a href="/guide/introduction#api-styles">اطلع على المزيد</a>
+        <button @click="dismiss">مفهوم</button>
       </p>
       <div class="arrow-top"></div>
       <div class="arrow-top inner"></div>
@@ -191,9 +191,11 @@ p {
 }
 
 .actions {
-  text-align: right;
+  text-align: left;
   margin-top: 14px;
   margin-bottom: 0;
+  display: flex;
+  gap:16px;
 }
 
 a {
diff --git a/glossary.md b/glossary.md
index 89ffd576..91713f4d 100644
--- a/glossary.md
+++ b/glossary.md
@@ -61,6 +61,7 @@
 | list                   | قائمة                                          | ليس بعد   |
 | logic                  | شيفرة، منطق                                    | ليس بعد   |
 | macro                  | تعليمة عامة                                    | ليس بعد   |
+| meta                   | وصفي                                           | ليس بعد   |
 | method                 | التابع                                         | ليس بعد   |
 | migration              | الترقية                                        | ليس بعد   |
 | mixin                  | مخلوط                                          | ليس بعد   |
@@ -68,6 +69,7 @@
 | mount                  | وصل                                            | ليس بعد   |
 | mutation               | تغيير (في إدارة الحالة)                        | ليس بعد   |
 | Options API            | واجهة الخيارات لبرمجة التطبيقات                | ليس بعد   |
+| Outlet                | مَخرَج                                           | ليس بعد   |
 | parameter              | معامل                                          | ليس بعد   |
 | parent component       | مكوّن أب/أصلي                                  | ليس بعد   |
 | placeholder            | عنصر/محتوى نائب                                | ليس بعد   |
diff --git a/src/api/built-in-special-attributes.md b/src/api/built-in-special-attributes.md
index 3dfb7523..8bf372be 100644
--- a/src/api/built-in-special-attributes.md
+++ b/src/api/built-in-special-attributes.md
@@ -1,18 +1,18 @@
-# Built-in Special Attributes {#built-in-special-attributes}
+# سمات مدمجة خاصة {#built-in-special-attributes}
 
 ## key {#key}
 
-The `key` special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list.
+السمة الخاصة `key` تُستخدم أساسًا كتلميح لخوارزمية الـDOM الافتراضي في Vue لتحديد العقد الافتراضية عند المطابقة بين قائمة العقد الجديدة والقائمة القديمة.
 
-- **Expects:** `number | string | symbol`
+- **تتوقع قيمة من نوع:** `number | string | symbol`
 
-- **Details**
+- **التفاصيل**
 
-  Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed / destroyed.
+  بدون مفاتيح، تستخدم Vue خوارزمية تقلل من حركة العناصر وتحاول إصلاح/إعادة استخدام العناصر من نفس النوع في المكان قدر الإمكان. مع المفاتيح، ستعيد ترتيب العناصر بناءً على تغيير ترتيب المفاتيح، وستُزال/تُتلف العناصر التي لم تعد موجودة من الآن فصاعدا.
 
-  Children of the same common parent must have **unique keys**. Duplicate keys will cause render errors.
+  يجب أن تحتوي العناصر الأبناء لنفس الأب المشترك على **مفاتيح وحيدة**. ستتسبب المفاتيح المكررة في أخطاء تصييرية.
 
-  The most common use case is combined with `v-for`:
+  حالة الاستخدام الأكثر شيوعًا هي مع `v-for`:
 
   ```vue-html
   <ul>
@@ -20,12 +20,12 @@ The `key` special attribute is primarily used as a hint for Vue's virtual DOM al
   </ul>
   ```
 
-  It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:
+  يمكن أيضًا استخدامه لإجبار استبدال عنصر/مكون بدلاً من إعادة استخدامه. يمكن أن يكون ذلك مفيدًا عندما تريد:
 
-  - Properly trigger lifecycle hooks of a component
-  - Trigger transitions
+  - تشغيل بشكل صحيح خطافات دورة حياة مكون
+  - تشغيل الانتقالات
 
-  For example:
+  على سبيل المثال:
 
   ```vue-html
   <transition>
@@ -33,28 +33,28 @@ The `key` special attribute is primarily used as a hint for Vue's virtual DOM al
   </transition>
   ```
 
-  When `text` changes, the `<span>` will always be replaced instead of patched, so a transition will be triggered.
+  عندما يتغير `text`، سيستبدل `<span>` دائمًا بدلاً من إصلاحه، لذا سيشغل انتقال.
 
-- **See also** [Guide - List Rendering - Maintaining State with `key`](/guide/essentials/list#maintaining-state-with-key)
+- **اطلع أيضًا على** [الدليل - تصيير القوائم - الحفاظ على الحالة مع `key`](/guide/essentials/list#maintaining-state-with-key)
 
 ## ref {#ref}
 
-Denotes a [template ref](/guide/essentials/template-refs).
+يشير إلى [مرجع القالب](/guide/essentials/template-refs).
 
-- **Expects:** `string | Function`
+- **تتوقع قيمة من نوع:** `string | Function`
 
-- **Details**
+- **التفاصيل**
 
-  `ref` is used to register a reference to an element or a child component.
+  `ref` يستخدم لتسجيل مرجع إلى عنصر أو مكون ابن.
 
-  In Options API, the reference will be registered under the component's `this.$refs` object:
+  في واجهة الخيارات، سيسجل المرجع تحت كائن `this.$refs` للمكون:
 
   ```vue-html
-  <!-- stored as this.$refs.p -->
+  <!--  تُخزن كـ this.$refs.p -->
   <p ref="p">hello</p>
   ```
 
-  In Composition API, the reference will be stored in a ref with matching name:
+  في الواجهة التركيبية، سيخزن المرجع في ref بالاسم المطابق:
 
   ```vue
   <script setup>
@@ -64,38 +64,38 @@ Denotes a [template ref](/guide/essentials/template-refs).
   </script>
 
   <template>
-    <p ref="p">hello</p>
+    <p ref="p">السلام عليكم</p>
   </template>
   ```
 
-  If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be the child component instance.
+  إذا استخدمت على عنصر DOM عادي، سيكون المرجع هو هذا العنصر؛ إذا استخدمت على مكون ابن، سيكون المرجع هو نسخة المكون الابن.
 
-  Alternatively `ref` can accept a function value which provides full control over where to store the reference:
+  بدلاً من ذلك، يمكن لـ `ref` قبول دالة كقيمة توفر التحكم الكامل في مكان تخزين المرجع:
 
   ```vue-html
   <ChildComponent :ref="(el) => child = el" />
   ```
 
-  An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you must wait until the component is mounted before accessing them.
+  ملاحظة مهمة حول توقيت تسجيل المرجع: لأن المراجع تُنشأ بذاتها نتيجة لدالة التصيير، يجب عليك الانتظار حتى يُوصَّل المكون قبل الوصول إليها.
 
-  `this.$refs` is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
+  `this.$refs` أيضًا غير تفاعلي، لذا يجب ألا تحاول استخدامه في القوالب لربط البيانات.
 
-- **See also**
-  - [Guide - Template Refs](/guide/essentials/template-refs)
-  - [Guide - Typing Template Refs](/guide/typescript/composition-api#typing-template-refs) <sup class="vt-badge ts" />
-  - [Guide - Typing Component Template Refs](/guide/typescript/composition-api#typing-component-template-refs) <sup class="vt-badge ts" />
+- **اطلع أيضًا على**
+  - [الدليل - مراجع القوالب](/guide/essentials/template-refs)
+  - [الدليل - إضافة الأنواع إلى مراجع القوالب](/guide/typescript/composition-api#typing-template-refs) <sup class="vt-badge ts" />
+  - [الدليل - إضافة الأنواع إلى مراجع قوالب المكون](/guide/typescript/composition-api#typing-component-template-refs) <sup class="vt-badge ts" />
 
 ## is {#is}
 
-Used for binding [dynamic components](/guide/essentials/component-basics#dynamic-components).
+يستخدم لربط [المكونات الديناميكية](/guide/essentials/component-basics#dynamic-components).
 
-- **Expects:** `string | Component`
+- **يتوقع قيمة من نوع:** `string | Component`
 
-- **Usage on native elements** <sup class="vt-badge">3.1+</sup>
+- **الاستخدامعلى العناصر الأصلية** <sup class="vt-badge">3.1+</sup>
 
-  When the `is` attribute is used on a native HTML element, it will be interpreted as a [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), which is a native web platform feature.
+  عندما تستخدم السمة `is` على عنصر HTML أصلي، ستترجم على أنها [عنصر مدمج مخصص](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)، وهو ميزة أصلية لمنصة الويب.
 
-  There is, however, a use case where you may need Vue to replace a native element with a Vue component, as explained in [in-DOM Template Parsing Caveats](/guide/essentials/component-basics#in-dom-template-parsing-caveats). You can prefix the value of the `is` attribute with `vue:` so that Vue will render the element as a Vue component instead:
+  ومع ذلك، هناك حالة استخدام حيث قد تحتاج Vue إلى استبدال عنصر أصلي بمكون Vue، كما هو موضح في [تنبيهات تحليل القوالب في DOM](/guide/essentials/component-basics#in-dom-template-parsing-caveats). يمكنك إضافة بادئة لقيمة السمة `is` بـ `:vue` حتى يقوم Vue بدلاً من ذلك بتصيير العنصر كمكون Vue :
 
   ```vue-html
   <table>
@@ -103,7 +103,7 @@ Used for binding [dynamic components](/guide/essentials/component-basics#dynamic
   </table>
   ```
 
-- **See also**
+- **اطلع أيضًا على**
 
-  - [Built-in Special Element - `<component>`](/api/built-in-special-elements#component)
-  - [Dynamic Components](/guide/essentials/component-basics#dynamic-components)
+  - [العنصر الخاص المدمج - `<component>`](/api/built-in-special-elements#component)
+  - [المكونات الديناميكية](/guide/essentials/component-basics#dynamic-components)
diff --git a/src/api/built-in-special-elements.md b/src/api/built-in-special-elements.md
index 34787747..bc78ef4c 100644
--- a/src/api/built-in-special-elements.md
+++ b/src/api/built-in-special-elements.md
@@ -1,14 +1,14 @@
-# Built-in Special Elements {#built-in-special-elements}
+# عناصر خاصة مدمجة {#built-in-special-elements}
 
-:::info Not Components
-`<component>`, `<slot>` and `<template>` are component-like features and part of the template syntax. They are not true components and are compiled away during template compilation. As such, they are conventionally written with lowercase in templates.
+:::info ليسوا مكونات
+`<component>`، `<slot>` و `<template>` هي ميزات تشبه المكونات وجزء من صيغة القوالب. ولكن ليست مكونات حقيقية وتُزال أثناء تصريف القوالب. وبالتالي، تُكتب بشكل اعتيادي بأحرف صغيرة في القوالب.
 :::
 
 ## `<component>` {#component}
 
-A "meta component" for rendering dynamic components or elements.
+"مكون وصفي" لتصيير المكونات أو العناصر الديناميكية.
 
-- **Props**
+- **الخاصيات**
 
   ```ts
   interface DynamicComponentProps {
@@ -16,17 +16,17 @@ A "meta component" for rendering dynamic components or elements.
   }
   ```
 
-- **Details**
+- **التفاصيل**
 
-  The actual component to render is determined by the `is` prop.
+  المكون الفعلي الذي سيُصيَّر يُحدَّد بواسطة خاصية `is`.
 
-  - When `is` is a string, it could be either an HTML tag name or a component's registered name.
+  - عندما يكون `is` سلسلة نصية، فقد يكون اسم علامة HTML أو اسم مسجل لمكون.
 
-  - Alternatively, `is` can also be directly bound to the definition of a component.
+  - بدلاً من ذلك، يمكن ربط `is` مباشرةً بتعريف مكون.
 
-- **Example**
+- **مثال**
 
-  Rendering components by registered name (Options API):
+  تصيير المكونات بالاسم المسجل (واجهة الخيارات):
 
   ```vue
   <script>
@@ -48,7 +48,7 @@ A "meta component" for rendering dynamic components or elements.
   </template>
   ```
 
-  Rendering components by definition (Composition API with `<script setup>`):
+  تصيير المكونات بالتعريف (  الواجهة التركيبية مع`<script setup>`):
 
   ```vue
   <script setup>
@@ -61,13 +61,13 @@ A "meta component" for rendering dynamic components or elements.
   </template>
   ```
 
-  Rendering HTML elements:
+  تصيير عناصر HTML:
 
   ```vue-html
   <component :is="href ? 'a' : 'span'"></component>
   ```
 
-  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:
+  يمكن تمرير جميع المكونات المدمجة إلى `is`، ولكن يجب تسجيلها إذا كنت تريد تمريرها بالاسم. على سبيل المثال:
 
   ```vue
   <script>
@@ -88,9 +88,9 @@ A "meta component" for rendering dynamic components or elements.
   </template>
   ```
 
-  Registration is not required if you pass the component itself to `is` rather than its name, e.g. in `<script setup>`.
+  لا يلزم التسجيل إذا قمت بتمرير المكون نفسه إلى `is` بدلاً من اسمه، على سبيل المثال في `<script setup>`.
 
-  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:
+  إذا استخدم `v-model` على عنصر `<component>`، فسيقوم مُصرف القوالب بتوسيعه إلى خاصية `modelValue` ومستمع حدث `update:modelValue`، تمامًا كما سيفعل لأي مكون آخر. ومع ذلك، لن يكون ذلك متوافقًا مع عناصر HTML الأصلية، مثل `<input>` أو `<select>`، ونتيجة لذلك، لن يعمل استخدام `v-model` مع عنصر HTML أصلي يتم يُنشأ بشكل ديناميكي:
 
   ```vue
   <script setup>
@@ -101,64 +101,64 @@ A "meta component" for rendering dynamic components or elements.
   </script>
 
   <template>
-    <!-- This won't work as 'input' is a native HTML element -->
+    <!-- هذا لن يعمل لأن 'input' هو عنصر HTML أصلي -->
     <component :is="tag" v-model="username" />
   </template>
   ```
 
-  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.
+  في الواقع، هذه الحالة الحدية ليست شائعة لأن حقول النموذج الأصلية عادة ما تكون ملفوفة في مكونات في التطبيقات الحقيقية. إذا كنت بحاجة إلى استخدام عنصر أصلي مباشرةً، فيمكنك تقسيم `v-model` إلى سمة وحدث يدويًا.
 
-- **See also** [Dynamic Components](/guide/essentials/component-basics#dynamic-components)
+- **اطلع أيضًا على** [المكونات الديناميكية](/guide/essentials/component-basics#dynamic-components)
 
 ## `<slot>` {#slot}
 
-Denotes slot content outlets in templates.
+يُشير إلى مخارج محتوى المنافذ في القوالب.
 
-- **Props**
+- **التفاصيل**
 
   ```ts
   interface SlotProps {
     /**
-     * Any props passed to <slot> to passed as arguments
-     * for scoped slots
-     */
+     * أي خاصيات مررت إلى <slot> لتمريرها كوسائط
+     * للمنافذ المحددة
+    */
     [key: string]: any
     /**
-     * Reserved for specifying slot name.
+     * محجوز لتحديد اسم المنفذ.
      */
     name?: string
   }
   ```
 
-- **Details**
+- **التفاصيل**
 
-  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.
+   يمكن لعنصر `<slot>` استخدام الخاصية `name` لتحديد اسم المنفذ. عندما لا يُحدَّد `name`، فسيقوم بتصيير المنفذ الافتراضي. ستمرر السمات الإضافية الممررة إلى عنصر المنفذ كخاصيات المنفذ إلى المنفذ ذو النطاق المعرف في المكون الأب.
 
-  The element itself will be replaced by its matched slot content.
+  سيستبدل العنصر نفسه بمحتوى المنفذ المطابق له.
 
-  `<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).
+  تُصرَّف عناصر `<slot>` في قوالب Vue إلى JavaScript، لذلك لا ينبغي الخلط بينها وبين [عناصر `<slot>` الأصلية](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).
 
-- **See also** [Component - Slots](/guide/components/slots)
+- **اطلع أيضًا على** [المكونات - المنافذ](/guide/components/slots)
 
 ## `<template>` {#template}
 
-The `<template>` tag is used as a placeholder when we want to use a built-in directive without rendering an element in the DOM.
+يُستخدم عنصر `<template>` كعنصر نائب عندما نريد استخدام موجهة مدمجة دون تصيير عنصر في DOM.
 
-- **Details**
+- **التفاصيل**
 
-  The special handling for `<template>` is only triggered if it is used with one of these directives:
+  تُشغَّل المعالجة الخاصة لـ `<template>` فقط إذا استخدمت مع واحدة من هذه الموجهات:
 
-  - `v-if`, `v-else-if`, or `v-else`
+  - `v-if`, `v-else-if`, أو `v-else`
   - `v-for`
   - `v-slot`
 
-  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.
+  إذا لم تكن أي من تلك الموجهات موجودة، فستُصيَّر بدلاً من ذلك كعنصر `<template>` [الأصلي](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).
 
-  A `<template>` with a `v-for` can also have a [`key` attribute](/api/built-in-special-attributes#key). All other attributes and directives will be discarded, as they aren't meaningful without a corresponding element.
+  يمكن أن يحتوي `<template>` مع `v-for` أيضًا على [خاصية `key`](/api/built-in-special-attributes#key). سيتم تجاهل جميع السمات والموجهات الأخرى، لأنها ليست ذات معنى بدون عنصر مقابل.
 
-  Single-file components use a [top-level `<template>` tag](/api/sfc-spec#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.
+  تستخدم المكونات أحادية الملف [عنصر `<template>` على المستوى الأعلى](/api/sfc-spec#language-blocks) لتغليف القالب بأكمله. هذا الاستخدام منفصل عن استخدام `<template>` الموضح أعلاه. لا يشكل العنصر على المستوى الأعلى جزءًا من القالب نفسه ولا يدعم صيغة القالب، مثل الموجهات.
 
-- **See also**
-  - [Guide - `v-if` on `<template>`](/guide/essentials/conditional#v-if-on-template)
-  - [Guide - `v-for` on `<template>`](/guide/essentials/list#v-for-on-template)
-  - [Guide - Named slots](/guide/components/slots#named-slots)
+- **اطلع أيضًا على**
+  - [الدليل - `v-if` على `<template>`](/guide/essentials/conditional#v-if-on-template)
+  - [الدليل - `v-for` على `<template>`](/guide/essentials/list#v-for-on-template)
+  - [الدليل - المنافذ المسماة](/guide/components/slots#named-slots)
diff --git a/src/api/sfc-spec.md b/src/api/sfc-spec.md
index f163e010..e636120b 100644
--- a/src/api/sfc-spec.md
+++ b/src/api/sfc-spec.md
@@ -1,10 +1,10 @@
-# SFC Syntax Specification {#sfc-syntax-specification}
+# مواصفات صيغة المكونات أحادية الملف {#sfc-syntax-specification}
 
-## Overview {#overview}
+## نظرة عامة {#overview}
 
-A Vue Single-File Component (SFC), conventionally using the `*.vue` file extension, is a custom file format that uses an HTML-like syntax to describe a Vue component. A Vue SFC is syntactically compatible with HTML.
+المكونات أحادية الملف في Vue، يصطلح عليها باستخدام امتداد الملف `vue.*`، هي صيغة ملف مخصصة تستخدم صيغة على نحو شبيه بـ HTML لوصف مكون Vue. المكونات أحادية الملف في Vue تتوافق من حيث الصيغة مع HTML.
 
-Each `*.vue` file consists of three types of top-level language blocks: `<template>`, `<script>`, and `<style>`, and optionally additional custom blocks:
+كل ملف `*.vue` يتكون من ثلاثة أنواع من الكتل اللغوية ذات المستوى الأعلى: `<template>`، `<script>`، و `<style>`، واختياريًا كتل مخصصة إضافية:
 
 ```vue
 <template>
@@ -15,7 +15,7 @@ Each `*.vue` file consists of three types of top-level language blocks: `<templa
 export default {
   data() {
     return {
-      msg: 'Hello world!'
+      msg: 'مرحبًا'
     }
   }
 }
@@ -28,67 +28,67 @@ export default {
 </style>
 
 <custom1>
-  This could be e.g. documentation for the component.
+  يمكن أن يكون هذا على سبيل المثال توثيق للمكون.
 </custom1>
 ```
 
-## Language Blocks {#language-blocks}
+## الكتل اللغوية {#language-blocks}
 
 ### `<template>` {#template}
 
-- Each `*.vue` file can contain at most one top-level `<template>` block.
+- كل ملف `*.vue` يمكن أن يحتوي على كتلة `<template>` ذات مستوى أعلى واحد على الأكثر.
 
-- Contents will be extracted and passed on to `@vue/compiler-dom`, pre-compiled into JavaScript render functions, and attached to the exported component as its `render` option.
+- ستُستخرج المحتويات وتُمرر إلى `vue/compiler-dom@`، وتصييرها مسبقًا إلى دوال تصيير، وتعليقها على المكون المصدر داخل خيار `render`.
 
 ### `<script>` {#script}
 
-- Each `*.vue` file can contain at most one `<script>` block (excluding [`<script setup>`](/api/sfc-script-setup)).
+- كل ملف `*.vue` يمكن أن يحتوي على كتلة `<script>` ذات مستوى أعلى واحد على الأكثر (باستثناء [`<script setup>`](/api/sfc-script-setup)).
 
-- The script is executed as an ES Module.
+- تشغل الشيفرة كوحدة ES.
 
-- The **default export** should be a Vue component options object, either as a plain object or as the return value of [defineComponent](/api/general#definecomponent).
+- التصدير الافتراضي يجب أن يكون كائن خيارات مكون Vue، إما ككائن عادي أو كقيمة إرجاع من [defineComponent](/api/general#definecomponent).
 
 ### `<script setup>` {#script-setup}
 
-- Each `*.vue` file can contain at most one `<script setup>` block (excluding normal `<script>`).
+- كل ملف `*.vue` يمكن أن يحتوي على كتلة `<script setup>` ذات مستوى أعلى واحد على الأكثر (باستثناء `<script>` العادي).
 
-- The script is pre-processed and used as the component's `setup()` function, which means it will be executed **for each instance of the component**. Top-level bindings in `<script setup>` are automatically exposed to the template. For more details, see [dedicated documentation on `<script setup>`](/api/sfc-script-setup).
+- تعالج الشيفرة مسبقًا وتستخدم كدالة `()setup` للمكون، وهذا يعني أنها ستُشغل **في كل نسخة من المكون**. يُعرض الربط الأعلى مستوى في `<script setup>` تلقائيًا للقالب. لمزيد من التفاصيل، اطلع على [التوثيق المخصص لـ `<script setup>`](/api/sfc-script-setup).
 
 ### `<style>` {#style}
 
-- A single `*.vue` file can contain multiple `<style>` tags.
+- يمكن أن يحتوي ملف `*.vue` واحد على عدة عناصر `<style>`.
 
-- A `<style>` tag can have `scoped` or `module` attributes (see [SFC Style Features](/api/sfc-css-features) for more details) to help encapsulate the styles to the current component. Multiple `<style>` tags with different encapsulation modes can be mixed in the same component.
+- يمكن أن يحتوي عنصر `<style>` على سمات `scoped` أو `module` (انظر [ميزات صيغة المكونات أحادية الملف](/api/sfc-css-features) للمزيد من التفاصيل) للمساعدة في تغليف التنسيقات للمكون الحالي. يمكن مزج عدة عناصر `<style>` ذات أوضاع تغليف مختلفة في نفس المكون.
 
-### Custom Blocks {#custom-blocks}
+### كتل مخصصة {#custom-blocks}
 
-Additional custom blocks can be included in a `*.vue` file for any project-specific needs, for example a `<docs>` block. Some real-world examples of custom blocks include:
+يمكن تضمين كتل مخصصة إضافية في ملف `*.vue` لأي احتياجات محددة للمشروع، على سبيل المثال كتلة `<docs>`. بعض الأمثلة العملية للكتل المخصصة تشمل:
 
 - [Gridsome: `<page-query>`](https://gridsome.org/docs/querying-data/)
 - [vite-plugin-vue-gql: `<gql>`](https://github.com/wheatjs/vite-plugin-vue-gql)
 - [vue-i18n: `<i18n>`](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n#i18n-custom-block)
 
-Handling of Custom Blocks will depend on tooling - if you want to build your own custom block integrations, see the [SFC custom block integrations tooling section](/guide/scaling-up/tooling#sfc-custom-block-integrations) for more details.
+معالجة الكتل المخصصة ستعتمد على الأدوات - إذا كنت تريد بناء تكاملات كتل مخصصة خاصة بك، انظر [قسم أدوات تكاملات كتل المكونات أحادية الملف](/guide/scaling-up/tooling#sfc-custom-block-integrations) للمزيد من التفاصيل.
 
-## Automatic Name Inference {#automatic-name-inference}
+## الاستنباط التلقائي لإسم المكون {#automatic-name-inference}
 
-An SFC automatically infers the component's name from its **filename** in the following cases:
+يستنبط اسم المكون أحادي الملف من **اسم الملف** في الحالات التالية:
 
-- Dev warning formatting
-- DevTools inspection
-- Recursive self-reference, e.g. a file named `FooBar.vue` can refer to itself as `<FooBar/>` in its template. This has lower priority than explicitly registered/imported components.
+- تنسيق تحذيرات التطوير
+- فحص أدوات التطوير
+- الإشارة الذاتية التكرارية، على سبيل المثال ملف يسمى `FooBar.vue` يمكن أن يشير إلى نفسه كـ `<FooBar/>` في قالبه. وهذا له أولوية أقل من المكونات المسجلة/المستوردة بشكل صريح.
 
-## Pre-Processors {#pre-processors}
+## المعالجات المسبقة {#pre-processors}
 
-Blocks can declare pre-processor languages using the `lang` attribute. The most common case is using TypeScript for the `<script>` block:
+الكتل يمكنها التصريح بلغات المعالجة المسبقة باستخدام سمة `lang`. أكثر الحالات شيوعًا هي استخدام TypeScript مع كتلة `<script>`:
 
 ```vue-html
 <script lang="ts">
-  // use TypeScript
+  // استخدم TypeScript
 </script>
 ```
 
-`lang` can be applied to any block - for example we can use `<style>` with [Sass](https://sass-lang.com/) and `<template>` with [Pug](https://pugjs.org/api/getting-started.html):
+يمكن تطبيق `lang` على أي كتلة - على سبيل المثال يمكننا استخدام `<style>` مع [Sass](https://sass-lang.com/) و `<template>` مع [Pug](https://pugjs.org/api/getting-started.html):
 
 ```vue-html
 <template lang="pug">
@@ -103,15 +103,15 @@ p {{ msg }}
 </style>
 ```
 
-Note that integration with various pre-processors may differ by toolchain. Check out the respective documentation for examples:
+لاحظ أن الدمج مع معالجات مسبقة مختلفة قد يختلف حسب سلسلة الأدوات. تحقق من الوثائق المعنية للحصول على أمثلة:
 
 - [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)
 - [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)
 - [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)
 
-## `src` Imports {#src-imports}
+## استيرادات `src`  {#src-imports}
 
-If you prefer splitting up your `*.vue` components into multiple files, you can use the `src` attribute to import an external file for a language block:
+إذا كنت تفضل تقسيم مكونات `*.vue` إلى ملفات متعددة، يمكنك استخدام سمة `src` لاستيراد ملف خارجي لكتلة لغوية:
 
 ```vue
 <template src="./template.html"></template>
@@ -119,17 +119,17 @@ If you prefer splitting up your `*.vue` components into multiple files, you can
 <script src="./script.js"></script>
 ```
 
-Beware that `src` imports follow the same path resolution rules as webpack module requests, which means:
+انتبه إلى أن استيرادات `src` تتبع نفس قواعد تحديد المسارات كطلبات وحدة webpack، وهذا يعني:
 
-- Relative paths need to start with `./`
-- You can import resources from npm dependencies:
+- يجب أن تبدأ المسارات النسبية بـ `./`
+- يمكنك استيراد موارد من اعتماديات npm:
 
 ```vue
-<!-- import a file from the installed "todomvc-app-css" npm package -->
+<!--  استيراد ملف من حزمة npm المثبتة "todomvc-app-css" -->
 <style src="todomvc-app-css/index.css" />
 ```
 
-`src` imports also work with custom blocks, e.g.:
+استيرادات `src` تعمل أيضًا مع الكتل المخصصة، على سبيل المثال:
 
 ```vue
 <unit-test src="./unit-test.js">
@@ -138,4 +138,4 @@ Beware that `src` imports follow the same path resolution rules as webpack modul
 
 ## Comments {#comments}
 
-Inside each block you shall use the comment syntax of the language being used (HTML, CSS, JavaScript, Pug, etc.). For top-level comments, use HTML comment syntax: `<!-- comment contents here -->`
+داخل كل كتلة يجب أن تستخدم الصيغة التعليقية للغة المستخدمة (HTML، CSS، JavaScript، Pug، إلخ). للتعليقات ذات المستوى الأعلى، استخدم الصيغة  التعليقية لـ HTML: `<!-- محتويات التعليق هنا -->`