vuejs-translations · Abdelaziz18003 · Jan 15, 2023 · Jan 6, 2023 · Jan 6, 2023 · Jan 6, 2023
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -215,14 +215,14 @@ export const sidebar: ThemeConfig['sidebar'] = {
       text: 'إعادة الإستخدام',
       items: [
         {
-          text: 'التركيبات',
+          text: 'المُركَّبات',
           link: '/guide/reusability/composables'
         },
         {
           text: 'سمات مُوجهة مخصصة',
           link: '/guide/reusability/custom-directives'
         },
-        { text: 'الإضافات', link: '/guide/reusability/plugins' }
+        { text: 'الملحقات', link: '/guide/reusability/plugins' }
       ]
     },
     {
@@ -242,7 +242,7 @@ export const sidebar: ThemeConfig['sidebar'] = {
       text: 'الإرتقاء و التدرج',
       items: [
         {
-          text: '(SFC) المكونات أحادية المستند',
+          text: '(SFC) المكونات أحادية الملف',
           link: '/guide/scaling-up/sfc'
         },
         { text: 'الأدوات', link: '/guide/scaling-up/tooling' },
@@ -284,11 +284,11 @@ export const sidebar: ThemeConfig['sidebar'] = {
       items: [
         { text: 'نظرة شاملة', link: '/guide/typescript/overview' },
         {
-          text: 'و واجهة برمجة التطبيقات بالتكوين TS',
+          text: 'و الواجهة التركيبية لبرمجة التطبيقات TS',
           link: '/guide/typescript/composition-api'
         },
         {
-          text: 'و واجهة برمجة التطبيقات بالخيارات TS',
+          text: 'و واجهة الخيارات لبرمجة التطبيقات TS',
           link: '/guide/typescript/options-api'
         }
       ]
@@ -301,7 +301,7 @@ export const sidebar: ThemeConfig['sidebar'] = {
           link: '/guide/extras/ways-of-using-vue'
         },
         {
-          text: 'الأسئلة الشائعة عن برمجة واجهة التطبيقات بالتكوين',
+          text: 'الأسئلة الشائعة عن الواجهة التركيبية لبرمجة التطبيقات',
           link: '/guide/extras/composition-api-faq'
         },
         {
@@ -352,7 +352,7 @@ export const sidebar: ThemeConfig['sidebar'] = {
       ]
     },
     {
-      text: 'واجهة برمجة التطبيقات بالتكوين',
+      text: 'الواجهة التركيبية لبرمجة التطبيقات',
       items: [
         { text: 'setup()دالةال', link: '/api/composition-api-setup' },
         {
@@ -378,7 +378,7 @@ export const sidebar: ThemeConfig['sidebar'] = {
       ]
     },
     {
-      text: 'واجهة برمجة التطبيقات بالخيارات',
+      text: 'واجهة الخيارات لبرمجة التطبيقات',
       items: [
         { text: 'الخيارات : الحالة', link: '/api/options-state' },
         { text: 'الخيارات : التصيير', link: '/api/options-rendering' },
@@ -413,7 +413,7 @@ export const sidebar: ThemeConfig['sidebar'] = {
       ]
     },
     {
-      text: 'المكونات أحادية المستند',
+      text: 'المكونات أحادية الملف',
       items: [
         { text: 'مواصفات الصيغة', link: '/api/sfc-spec' },
         { text: '<script setup>', link: '/api/sfc-script-setup' },

diff --git a/.vitepress/theme/components/VueMasteryModal.vue b/.vitepress/theme/components/VueMasteryModal.vue
@@ -98,7 +98,7 @@ watch(
   font-weight: 600;
   background-color: var(--vt-c-green);
   color: #fff;
-  margin-right: 18px;
+  margin-left: 18px;
   padding: 8px 1em 8px 3em;
 }
 

diff --git a/.vitepress/theme/styles/index.css b/.vitepress/theme/styles/index.css
@@ -4,3 +4,4 @@
 @import './inline-demo.css';
 @import './utilities.css';
 @import './style-guide.css';
+@import './overrides.css';
diff --git a/.vitepress/theme/styles/overrides.css b/.vitepress/theme/styles/overrides.css
@@ -0,0 +1,49 @@
+.VPSidebar,
+.vt-doc.guide,
+.VPContentDocOutline,
+.edit-link {
+  direction: rtl;
+}
+
+pre {
+  direction: ltr;
+}
+.vt-doc .custom-block {
+  padding: 22px 24px 4px 20px !important;
+}
+.vt-doc .custom-block:before {
+  content: 'ⓘ';
+  position: absolute;
+  font-weight: 600;
+  font-size: 15px;
+  top: 28px;
+  right: 12px;
+}
+
+.vt-doc .custom-block-title {
+  margin-right: 14px;
+}
+
+.vt-doc ul {
+  padding-left: auto;
+  padding-right: 1.25rem;
+}
+
+.vt-doc ul > li:before {
+  content: '•';
+  right: -1.25rem;
+}
+
+.ar.vue-mastery-link .description {
+  margin-right: 16px;
+}
+
+.vt-doc a[href^="https://sfc.vuejs.org"]:before
+{
+  padding-right: 2.5px;
+}
+
+.vt-doc .header-anchor {
+  position: absolute;
+  right: -24px;
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": false
+}
diff --git a/glossary.md b/glossary.md
@@ -2,6 +2,58 @@
 
 هذه قائمة ترجمات المصطلحات التقنية التي اتفق عليها فريق الترجمة. تعتبر هذه القائمة المرجع الأساسي للمصطلحات في هذا الموقع.
 
-| English   | العربية |
-| :-------- | ------: |
-| Component |   مكوّن |
+| English               |                            العربية |
+| :-------------------- | ---------------------------------: |
+| Component             |                              مكوّن |
+| Composition API       | الواجهة التركيبية لبرمجة التطبيقات |
+| Options API           |    واجهة الخيارات لبرمجة التطبيقات |
+| Lifecycle Hooks       |                خطافات مراحل الحياة |
+| Single file component |                   مكون أحادي الملف |
+| instance              |                               نسخة |
+| template              |                               قالب |
+| render function       |                       دالة التصيير |
+| data                  |                           البيانات |
+| props                 |                           الخاصيات |
+| computed              |                    الخاصيةالمحسوبة |
+| method                |                             التابع |
+| function              |                             الدالة |
+| watch                 |                     خاصية مُراقِبة |
+| logic                 |                        شيفرة، منطق |
+| state                 |                               حالة |
+| event                 |                                حدث |
+| lifecycle             |                       مرحلة الحياة |
+| hook                  |                               خطاف |
+| migration             |                            الترقية |
+| plugin                |                               ملحق |
+| mixin                 |                               مزيج |
+| tag                   |                                وسم |
+| directive             |               مُوجِّه/سمة مُوجِّهة |
+| attribute             |                                سمة |
+| class                 |                                صنف |
+| style                 |             (في حالة الـCSS) تنسيق |
+| style                 |                         نمط/ اسلوب |
+| binding               |                                ربط |
+| interpolation         |                              اقحام |
+| expression            |                              تعبير |
+| conditional           |                               شرطي |
+| list                  |                              قائمة |
+| key                   |                              مفتاح |
+| slot                  |                               مدخل |
+| ref                   |                               مرجع |
+| dependency            |                           اعتمادية |
+| reactivity            |             (كإسم للمفهوم) تفاعلية |
+| reactive              |              (كصفة للمتغير) تفاعلي |
+| effect                |                              تأثير |
+| getter                |                            مُحصِّل |
+| setter                |                            مُعيِّن |
+| shallow               |                               سطحي |
+| deep                  |                               عميق |
+| raw                   |                                خام |
+| composable function   |                      دالة مُركَّبة |
+| parent component      |                      مكوّن أب/أصلي |
+| child component       |                     مكوّن فرعي/ابن |
+| mount                 |                                وصل |
+| unmount               |                                فصل |
+| container             |                           مُستوعِب |
+| CSS selector          |                        مُحدِّد CSS |
+| assets                |                             ملحقات |
diff --git a/src/guide/essentials/application.md b/src/guide/essentials/application.md
@@ -1,35 +1,35 @@
-# Creating a Vue Application {#creating-a-vue-application}
+# إنشاء تطبيق باستخدام Vue {#creating-a-vue-application}
 
-## The application instance {#the-application-instance}
+## نسخة التطبيق {#the-application-instance}
 
-Every Vue application starts by creating a new **application instance** with the [`createApp`](/api/application#createapp) function:
+ كل تطبيق Vue ينشأ باستحداث **نسخة تطبيق** جديد عن طريق استخدام دالة  [`createApp`](/api/application#createapp) : 
 
 ```js
 import { createApp } from 'vue'
 
 const app = createApp({
-  /* root component options */
+  /* التوابع الجذرية للمكون */
 })
 ```
 
 ## The Root Component {#the-root-component}
 
-The object we are passing into `createApp` is in fact a component. Every app requires a "root component" that can contain other components as its children.
+الكائن الذي نمرره إلى دالة `createApp` هو في الأصل مكون. يتطلب كل تطبيق "مكوِّنًا جذريًا" الذي بدوره يمكن أن يحتوي على مكونات أخرى مثل مكوناته الفرعية.
 
-If you are using Single-File Components, we typically import the root component from another file:
+إذا كنت تستخدم المكونات أحادية الملف، فعادة ما نستورد المكون الجذر من ملف آخر:
 
 ```js
 import { createApp } from 'vue'
-// import the root component App from a single-file component.
+// استيراد  المكون الجذر App كمكون أحادي الملف. 
 import App from './App.vue'
 
 const app = createApp(App)
 ```
 
-While many examples in this guide only need a single component, most real applications are organized into a tree of nested, reusable components. For example, a Todo application's component tree might look like this:
+في حين نحتاج في العديد من الأمثلة عبر هذا الدليل إلى مكون واحد فقط، فإن معظم التطبيقات الحقيقية منظمة عبر ملفات بشكل شجري تحتوي على العديد من المكونات المتداخلة والقابلة لإعادة الاستخدام. على سبيل المثال ، قد تبدو مكونات تطبيق Todo  (تطبيق قائمة المهام) كما يلي:
 
 ```
-App (root component)
+App (المكون الجذر)
 ├─ TodoList
 │  └─ TodoItem
 │     ├─ TodoDeleteButton
@@ -39,11 +39,11 @@ App (root component)
    └─ TodoStatistics
 ```
 
-In later sections of the guide, we will discuss how to define and compose multiple components together. Before that, we will focus on what happens inside a single component.
+في أجزاء قادمة من الدليل، سنناقش كيفية تعريف مكونات متعددة وتركيبها مع بعض. لكن قبل ذلك، سنركز على ما يحدث داخل مكون واحد.
 
-## Mounting the App {#mounting-the-app}
+## وصل التطبيق {#mounting-the-app}
 
-An application instance won't render anything until its `.mount()` method is called. It expects a "container" argument, which can either be an actual DOM element or a selector string:
+لا تُصيَّر نسخة التطبيق أي شيء حتى يتم استدعاء الدالة `()mount.`. و التي تأخذ عنصر "مُستوعِب" كوسيط و الذي يكون إما عنصر من عقد الـDOM أو أيِّ مُحدِّد CSS :
 
 ```html
 <div id="app"></div>
@@ -52,14 +52,12 @@ An application instance won't render anything until its `.mount()` method is cal
 ```js
 app.mount('#app')
 ```
+سيُصيَّر محتوى المكون الجذر للتطبيق داخل العنصر المُستوعِب الذي بدوره لا يُعتبر جزءًا من التطبيق.
 
-The content of the app's root component will be rendered inside the container element. The container element itself is not considered part of the app.
+لا يجب استدعاء دالة `()mount.`. إلا بعد الانتهاء من جميع اعدادات التطبيق وتسجيل الملحقات. كما نلاحظ أيضًا أن قيمة إرجاع هذه الدالة، هي نسخة المكون الجذر بدلاً من نسخة التطبيق التي تكون من دالة تسجيل الملحقات.
+### قالب المكون الجذر في عنصر الـDOM المُستوعِب {#in-dom-root-component-template}
 
-The `.mount()` method should always be called after all app configurations and asset registrations are done. Also note that its return value, unlike the asset registration methods, is the root component instance instead of the application instance.
-
-### In-DOM Root Component Template {#in-dom-root-component-template}
-
-When using Vue without a build step, we can write our root component's template directly inside the mount container:
+عند استخدام Vue دون عملية بناء ، يمكننا كتابة قالب المكون الجذر مباشرة داخل العنصر المُستوعِب:
 
 ```html
 <div id="app">
@@ -81,31 +79,34 @@ const app = createApp({
 app.mount('#app')
 ```
 
-Vue will automatically use the container's `innerHTML` as the template if the root component does not already have a `template` option.
+سيستخدم Vue تلقائيًا التابع `innerHTML` من المستوعب كقالب إذا لم يكن المكون الجذر للتطبيق يحتوي بالفعل على خيار القالب ( `template`).
+
 
-## App Configurations {#app-configurations}
+## تهيئة التطبيق {#app-configurations}
+
+تعرض نسخة التطبيق  الكائن  `config.` كخاصية التي تسمح لنا بتهيئة بعض الخيارات على مستوى جذر التطبيق، على سبيل المثال، التصريح بـ"معالج الأخطاء" على مستوى جذر التطبيق الذي يلتقط الأخطاء من جميع المكونات الفرعية :
 
-The application instance exposes a `.config` object that allows us to configure a few app-level options, for example, defining an app-level error handler that captures errors from all descendant components:
 
 ```js
 app.config.errorHandler = (err) => {
-  /* handle error */
+  /* هنا يُعالج الخطأ */
 }
 ```
 
-The application instance also provides a few methods for registering app-scoped assets. For example, registering a component:
+نسخة التطبيق توفر لنا أيضًا بعض التوابع لتسجيل الملحقات على مستوى جذر التطبيق. على سبيل المثال، تسجيل مكون:
 
 ```js
 app.component('TodoDeleteButton', TodoDeleteButton)
 ```
 
-This makes the `TodoDeleteButton` available for use anywhere in our app. We will discuss registration for components and other types of assets in later sections of the guide. You can also browse the full list of application instance APIs in its [API reference](/api/application).
+تسجيل مكون `TodoDeleteButton` بهذه الطريقة يجعله متاحًا للاستخدام في أي مكان في التطبيق. سنناقش تسجيل المكونات وباقي الملحقات في أجزاء قادمة من الدليل. يمكنك أيضًا استعراض قائمة كاملة من واجهات نسخة التطبيق في [مرجع واجهة برمجة التطبيقات](/api/application).
+
 
-Make sure to apply all app configurations before mounting the app!
+تأكد من تطبيق جميع تهيئات التطبيق قبل توصيله!
 
-## Multiple application instances {#multiple-application-instances}
+## نسخ متعددة من التطبيق {#multiple-application-instances}
 
-You are not limited to a single application instance on the same page. The `createApp` API allows multiple Vue applications to co-exist on the same page, each with its own scope for configuration and global assets:
+لا يقتصر التطبيق على نسخة واحدة فقط في نفس الصفحة. تسمح الواجهة البرمجية للدالة `createApp` بوجود تطبيقات Vue متعددة في نفس الصفحة، كل تطبيق له نطاقه الخاص للتهيئة والملحقات العامة :
 
 ```js
 const app1 = createApp({
@@ -119,4 +120,5 @@ const app2 = createApp({
 app2.mount('#container-2')
 ```
 
-If you are using Vue to enhance server-rendered HTML and only need Vue to control specific parts of a large page, avoid mounting a single Vue application instance on the entire page. Instead, create multiple small application instances and mount them on the elements they are responsible for.
+
+إذا كنت تستخدم Vue لتحسين  HTML مُصيَّر من الخادم وتحتاجها فقط للتحكم في أجزاء معينة من الصفحة الكبيرة، فتجنب توصيل نسخة واحدة من تطبيق Vue على الصفحة بأكملها. بدلاً من ذلك، قم بإنشاء تطبيقات صغيرة متعددة وتوصيلها على العناصر المسؤولة عنها.