docs(i18n-id): Provide Indonesian translation for migration - Part 2

.gitignore

@@ -101,3 +101,6 @@ dist/
 # Temporary folders
 tmp/
 temp/
+
+# NPM Lockfile
+package-lock.json

src/guide/migration/attrs-includes-class-style.md

@@ -1,23 +1,23 @@
 ---
-title: $attrs includes class & style
+title: $attrs memuat class dan style
 badges:
   - breaking
 ---
 
-# `$attrs` includes `class` & `style` <MigrationBadges :badges="$frontmatter.badges" />
+# `$attrs` memuat `class` dan `style` <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## Gambaran Umum
 
-`$attrs` now contains _all_ attributes passed to a component, including `class` and `style`.
+`$attrs` sekarang memuat seluruh atribut yang diteruskan pada sebuah komponen, termasuk `class` dan `style`.
 
-## 2.x Behavior
+## Perilaku pada Vue versi 2.x
 
-`class` and `style` attributes get some special handling in the Vue 2 virtual DOM implementation. For that reason, they are _not_ included in `$attrs`, while all other attributes are.
+Atribut `class` dan `style` ditangani secara khusus pada implementasi DOM virtual milik Vue versi 2. Oleh karena itu, kedua atribut tersebut tidak dimuat dalam `$attrs`, sementara atribut lainnya dimuat.
 
-A side effect of this manifests when using `inheritAttrs: false`:
+Sebuah efek samping dari penanganan tersebut muncul ketika menggunakan `inheritAttrs: false`:
 
-- Attributes in `$attrs` are no longer automatically added to the root element, leaving it to the developer to decide where to add them.
-- But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element:
+- Atribut dalam `$attrs` tidak lagi dimuat pada elemen utama secara otomatis, keputusan dikembalikan pada pengembang untuk menentukan tempat atribut dimuat.
+- Namun `class` dan `style`, yang bukan merupakan bagian dari `$attrs`, akan tetap dimuat dalam elemen utama dari komponen:
 
 ```vue
 <template>
@@ -32,38 +32,38 @@ export default {
 </script>
 ```
 
-when used like this:
+Ketika digunakan seperti berikut:
 
 ```html
-<my-component id="my-id" class="my-class"></my-component>
+<my-component id="id-ku" class="kelas-ku"></my-component>
 ```
 
-...will generate this HTML:
+...maka Vue akan menghasilkan HTML berikut:
 
 ```html
-<label class="my-class">
-  <input type="text" id="my-id" />
+<label class="kelas-ku">
+  <input type="text" id="id-ku" />
 </label>
 ```
 
-## 3.x Behavior
+## Perilaku pada Vue versi 3.x
 
-`$attrs` contains _all_ attributes, which makes it easier to apply all of them to a different element. The example from above now generates the following HTML:
+`$attrs` memuat seluruh atribut, dimana hal tersebut mempermudah cara penanganan atribut pada elemen-elemen yang berbeda. Pada Vue versi 3.x, contoh di atas akan menghasilkan HTML berikut:
 
 ```html
 <label>
-  <input type="text" id="my-id" class="my-class" />
+  <input type="text" id="id-ku" class="kelas-ku" />
 </label>
 ```
 
-## Migration Strategy
+## Strategi Migrasi
 
-In components that use `inheritAttrs: false`, make sure that styling still works as intended. If you previously relied on the special behavior of `class` and `style`, some visuals might be broken as these attributes might now be applied to another element.
+Pada komponen-komponen yang menggunakan `inheritAttrs: false`, pastikan bahwa _styling_ tetap berjalan sesuai keinginan Anda. Jika Anda sebelumnya bergantung pada penanganan khusus pada `class` dan `style`, beberapa tampilan mungkin saja akan rusak karena atribut-atribut tersebut mungkin saja sekarang diterapkan pada elemen lain.
 
-## See also
+## Lihat Juga
 
-- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
-- [Migration guide - `$listeners` removed](./listeners-removed.md)
-- [Migration guide - New Emits Option](./emits-option.md)
-- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
-- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
+- [RFC Relevan](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [Strategi Migrasi - `$listeners` dihapus](./listeners-removed.md)
+- [Strategi Migrasi - Opsi Emit Baru](./emits-option.md)
+- [Strategi Migrasi - Pengubah `.native` dihapus](./v-on-native-modifier-removed.md)
+- [Strategi Migrasi - Perubahan dalam API _render functions_](./render-function-api.md)

src/guide/migration/children.md

@@ -5,28 +5,28 @@ badges:
 
 # $children <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## Gambaran Umum
 
-The `$children` instance property has been removed from Vue 3.0 and is no longer supported.
+Properti `$children` telah dihapus dari Vue versi 3.0 dan tidak didukung lagi.
 
-## 2.x Syntax
+## Sintaks Vue versi 2.x
 
-In 2.x, developers could access direct child components of the current instance with `this.$children`:
+Pada Vue versi 2.x, pengembang dapat mengakses komponen turunan langsung dari sebuah objek menggunakan `this.$children`:
 
 ```vue
 <template>
   <div>
-    <img alt="Vue logo" src="./assets/logo.png">
-    <my-button>Change logo</my-button>
+    <img alt="Logo Vue" src="./assets/logo.png">
+    <tombol-ku>Ubah logo</tombol-ku>
   </div>
 </template>
 
 <script>
-import MyButton from './MyButton'
+import TombolKu from './MyButton'
 
 export default {
   components: {
-    MyButton
+    TombolKu
   },
   mounted() {
     console.log(this.$children) // [VueComponent]
@@ -35,6 +35,6 @@ export default {
 </script>
 ```
 
-## 3.x Update
+## Perubahan pada Vue versi 3.x
 
-In 3.x, the `$children` property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using [$refs](/guide/component-template-refs.html#template-refs).
+Pada Vue versi 3.x, properti `$children` telah dihapus dan tidak didukung lagi. Sebagai gantinya, jika Anda butuh akses pada sebuah komponen turunan, kami menyarankan Anda untuk menggunakan [$refs](/guide/component-template-refs.html#template-refs).

src/guide/migration/custom-directives.md

@@ -5,30 +5,28 @@ badges:
 
 # Custom Directives <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## Gambaran Umum
 
-The hook functions for directives have been renamed to better align with the component lifecycle.
-Here is a quick summary of what has changed:
+Fungsi _hook_ pada _directives_ telah berganti nama agar lebih selaras dengan siklus hidup komponen. Berikut merupakan gambaran singkat mengenai apa yang telah berubah:
 
-- API has been renamed to better align with component lifecycle
+- API telah berganti nama agar lebih selaras dengan siklus hidup komponen
 
-For more information, read on!
+Lanjutkan membaca untuk penjelasan lebih lanjut.
 
+## Sintaks Vue versi 2.x
 
-## 2.x Syntax
+Pada Vue versi 2, _custom directives_ dibuat menggunakan _hook-hook_ berikut untuk mengacu pada salah satu bagian dari siklus hidup komponen, dimana semuanya opsional:
 
-In Vue 2, custom directives were created by using the hooks listed below to target an element’s lifecycle, all of which are optional:
+- **bind** - Dipanggil saat _directive_ terikat dengan elemen. Hanya diapnggil sekali.
+- **inserted** - Dipanggil sesudah elemen ditambahkan pada DOM induk.
+- **update** - _Hook_ ini dipanggil ketika elemen diperbarui, namun turunannya belum diperbarui.
+- **componentUpdated** - _Hook_ ini dipanggil sesudah komponen dan turunannya selesai diperbarui.
+- **unbind** - _Hook_ ini dipanggil sesudah _directive_ dihapus. Hanya dipanggil sekali.
 
-- **bind** - Occurs once the directive is bound to the element. Occurs only once.
-- **inserted** - Occurs once the element is inserted into the parent DOM.
-- **update** - This hook is called when the element updates, but children haven't been updated yet.
-- **componentUpdated** - This hook is called once the component and the children have been updated.
-- **unbind** - This hook is called once the directive is removed. Also called only once.
-
-Here’s an example of this:
+Berikut merupakan contoh dari _directives_:
 
 ```html
-<p v-highlight="'yellow'">Highlight this text bright yellow</p>
+<p v-highlight="'yellow'">Sorot elemen ini supaya berlatar kuning cerah</p>
 ```
 
 ```js
@@ -39,37 +37,37 @@ Vue.directive('highlight', {
 })
 ```
 
-Here, in the initial setup for this element, the directive binds a style by passing in a value, that can be updated to different values through the application.
+Pada penyetelan awal untuk komponen di atas, _directive_ mengikat sebuah _style_ dengan meneruskan sebuah nilai yang dapat diperbarui menjadi nilai lain pada aplikasi.
 
-## 3.x Syntax
+## Sintaks Vue versi 3.x
 
-In Vue 3, however, we’ve created a more cohesive API for custom directives. As you can see, they differ greatly from our component lifecycle methods even though we’re hooking into similar events. We’ve now unified them like so:
+Namun pada Vue versi 3, kami telah membuat API yang lebih kohesif untuk _custom directives_. Seperti yang dapat Anda lihat, API pada versi sebelumnya berbeda jauh dengan siklus hidup komponen Vue walaupun sama-sama dihubungkan pada kejadian yang sejenis. Sekarang kami telah menyatukan kedua hal tersebut menjadi:
 
 - bind → **beforeMount**
 - inserted → **mounted**
-- **beforeUpdate**: new! This is called before the element itself is updated, much like the component lifecycle hooks.
-- update → removed! There were too many similarities to updated, so this is redundant. Please use updated instead.
+- **beforeUpdate**: Baru! _Hook_ ini akan dipanggil sebelum elemen diperbarui, mirip dengan _hook_ pada siklus hidup komponen.
+- update → Dihapus! Ada terlalu banyak persamaan dengan `updated`, sehingga _hook_ ini berlebihan. Mohon gunakan `updated`.
 - componentUpdated → **updated**
-- **beforeUnmount**: new! Similar to component lifecycle hooks, this will be called right before an element is unmounted.
+- **beforeUnmount**: Baru! Mirip dengan _hook_ pada siklus hidup komponen, _hook_ ini akan dipanggil sebelum elemen dilepaskan dari DOM.
 - unbind -> **unmounted**
 
-The final API is as follows:
+API akhir akan menjadi seperti berikut:
 
 ```js
-const MyDirective = {
+const DirectiveKu = {
   beforeMount(el, binding, vnode, prevVnode) {},
   mounted() {},
-  beforeUpdate() {}, // new
+  beforeUpdate() {}, // baru
   updated() {},
-  beforeUnmount() {}, // new
+  beforeUnmount() {}, // baru
   unmounted() {}
 }
 ```
 
-The resulting API could be used like this, mirroring the example from earlier:
+API yang dihasilkan dapat digunakan seperti berikut, mengikuti contoh sebelumnya:
 
 ```html
-<p v-highlight="'yellow'">Highlight this text bright yellow</p>
+<p v-highlight="'yellow'">Sorot elemen ini supaya berlatar kuning cerah</p>
 ```
 
 ```js
@@ -82,21 +80,21 @@ app.directive('highlight', {
 })
 ```
 
-Now that the custom directive lifecycle hooks mirror those of the components themselves, they become easier to reason about and remember!
+Sekarang _hook_ siklus hidup pada _custom directive_ telah mengikuti _hook_ siklus hidup pada komponen, sehingga _hook_ tersebut dapat lebih mudah diingat dan dibuat!
 
-### Edge Case: Accessing the component instance
+### Kasus Tepi: Mengakses Komponen
 
-It's generally recommended to keep directives independent of the component instance they are used in. Accessing the instance from within a custom directive is often a sign that the directive should rather be a component itself. However, there are situations where this actually makes sense.
+Umumnya, Anda dianjurkan untuk memisahkan _directive_ dengan komponen tempat _directive_ tersebut digunakan. Mengakses komponen melalui sebuah _custom directive_ menunjukkan sebuah tanda bahwa _directive_ tersebut seharusnya merupakan sebuah komponen. Namun, ada beberapa kasus dimana hal tersebut menjadi masuk akal.
 
-In Vue 2, the component instance had to be accessed through the `vnode` argument:
+Pada Vue versi 2, komponen harus diakses melalui argumen `vnode`:
 
 ```javascript
 bind(el, binding, vnode) {
   const vm = vnode.context
 }
 ```
 
-In Vue 3, the instance is now part of the `binding`:
+Pada Vue versi 3, komponen tersebut merupakan bagian dari argumen `binding`:
 
 ```javascript
 mounted(el, binding, vnode) {
@@ -105,5 +103,5 @@ mounted(el, binding, vnode) {
 ```
 
 :::warning
-With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root node. When applied to a multi-root component, a directive will be ignored and a warning will be logged.
+Dengan dukungan [fragments](/guide/migration/fragments.html#overview), komponen dapat memiliki lebih dari satu _node_ utama. Ketika digunakan pada komponen yang memiliki lebih dari satu _node_ inti, sebuah _directive_ akan dihiraukan dan sebuah peringatan akan dicatat.
 :::