Redraw Vue roadmap using our editor

src/data/roadmaps/angular/angular.md

@@ -1,7 +1,7 @@
 ---
 jsonUrl: '/jsons/roadmaps/angular.json'
 pdfUrl: '/pdfs/roadmaps/angular.pdf'
-order: 3
+order: 4
 briefTitle: 'Angular'
 briefDescription: 'Step by step guide to become a Angular Developer in 2024'
 title: 'Angular Developer'

src/data/roadmaps/vue/content/100-fundamental-topics/index.md

@@ -1,8 +0,0 @@
-# Fundamental Topics
-
-Vue is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.
-
-Visit the following resources to learn more:
-
-- [@article@Vue.js Official Website](https://vuejs.org/)
-- [@article@Official Documentation](https://vuejs.org/guide/introduction.html)

src/data/roadmaps/vue/content/101-advanced-topics/100-ref.md

@@ -1,8 +0,0 @@
-# Ref
-
-`ref()` and `reactive()` are used to track changes of its argument. When using them to initialize variables you give Vue information: “Hey, I want you to re-build or re-evaluate everything that depends on those variables every time they change”.
-
-Visit the following resources to learn more:
-
-- [@article@Ref() vs Reactive() in Vue 3 — what’s the right choice?](https://medium.com/@bsalwiczek/ref-vs-reactive-in-vue-3-whats-the-right-choice-7c6f7265ce39)
-- [@article@Reactivity API — ref](https://vuejs.org/api/reactivity-core.html#ref)

src/data/roadmaps/vue/content/101-advanced-topics/101-torefs.md

@@ -1,8 +0,0 @@
-# toRefs
-
-`toRefs` converts a reactive object to a plain object where each property of the resulting object is a ref pointing to the corresponding property of the original object. Each individual ref is created using `toRef()`.
-
-Visit the following resources to learn more:
-
-- [@article@Reactivity API — toRefs](https://vuejs.org/api/reactivity-utilities.html#toref)
-- [@video@Vue 3: Reactivity Made Easy (ref, reactive, toRefs... oh my!)](https://www.youtube.com/watch?v=sAj6tdVS2cA)

src/data/roadmaps/vue/content/101-advanced-topics/102-reactive.md

@@ -1,9 +0,0 @@
-# reactive
-
-`reactive` allows us to create reactive data structures. Reactive objects are [JavaScript Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) and behave just like normal objects. The difference is that Vue is able to track the property access and mutations of a reactive object.
-
-Visit the following resources to learn more:
-
-- [@article@Reactivity API — reactive](https://vuejs.org/api/reactivity-core.html#reactive)
-- [@article@Diving into Vue 3 - The Reactivity API](https://developers.deepgram.com/blog/2022/02/diving-into-vue-3-reactivity-api/)
-- [@feed@Explore top posts about General Programming](https://app.daily.dev/tags/general-programming?ref=roadmapsh)

src/data/roadmaps/vue/content/101-advanced-topics/102-toref.md

@@ -1,9 +0,0 @@
-# toRef
-
-`toRef` just like `toRefs` converts a reactive object to a ref pointing to the corresponding property of the original object. The difference is that `toRef` converts a single property of the reactive object to a ref, while `toRefs` converts all properties of the reactive object to refs.
-
-
-Visit the following resources to learn more:
-
-- [@article@Reactivity API — toRef](https://vuejs.org/api/reactivity-utilities.html#toref)
-- [@video@Vue 3: Reactivity Made Easy (ref, reactive, toRefs... oh my!)](https://www.youtube.com/watch?v=sAj6tdVS2cA)

src/data/roadmaps/vue/content/101-advanced-topics/103-computed.md

@@ -1,7 +0,0 @@
-# computed
-
-`computed` takes a getter function and returns a readonly reactive `ref` object for the returned value from the getter. It can also take an object with `get` and `set` functions to create a writable ref object.
-
-Visit the following resources to learn more:
-
-- [@article@Reactivity Core — computed](https://vuejs.org/api/reactivity-core.html#computed)

src/data/roadmaps/vue/content/101-advanced-topics/104-watch.md

@@ -1,8 +0,0 @@
-# watch
-
-`watch` watches one or more reactive data sources and invokes a callback function when the sources change.
-
-Visit the following resources to learn more:
-
-- [@article@Reactivity API — watch](https://vuejs.org/api/reactivity-core.html#watch)
-- [@article@Understanding watchers in Vue](https://blog.logrocket.com/understanding-watchers-vue/)

src/data/roadmaps/vue/content/101-advanced-topics/105-next-tick.md

@@ -1,7 +0,0 @@
-# nextTick
-
-`nextTick` is a utility for waiting for the next DOM update flush.
-
-Visit the following resources to learn more:
-
-- [@article@Global API — nextTick](https://vuejs.org/api/general.html#nexttick)

src/data/roadmaps/vue/content/101-advanced-topics/106-composables.md

@@ -1,10 +0,0 @@
-# Composables
-
-In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.
-
-When building frontend applications, we often need to reuse logic for common tasks. For example, we may need to format dates in many places, so we extract a reusable function for that. This formatter function encapsulates stateless logic: it takes some input and immediately returns expected output. There are many libraries out there for reusing stateless logic - for example lodash and date-fns, which you may have heard of.
-
-Visit the following resources to learn more:
-
-- [@article@Vue.js Composables](https://vuejs.org/guide/reusability/composables.html)
-- [@video@What is a Composable? (Vue 3)](https://www.youtube.com/watch?v=h8yveYCbFQM)

src/data/roadmaps/vue/content/101-advanced-topics/111-custom-events.md

@@ -1,7 +0,0 @@
-# Custom Events
-
-Sometimes you may need to define custom events that can be used in your components. Vue.js allows you to do this by emitting custom event objects using `$emit`.
-
-Visit the following resources to learn more:
-
-- [@article@Custom Events in Vue](https://auth0.com/blog/custom-events-in-vue/)

src/data/roadmaps/vue/content/101-advanced-topics/index.md

@@ -1,3 +0,0 @@
-# Advanced Topics
-
-Now that you have covered the basics, next we have the advanced topics such as Async Components, Teleports, Provide/Inject, Custom Directives, Custom Events, Plugins, Watchers, Slots and more.

src/data/roadmaps/vue/content/102-ecosystem/106-api-calls/101-vue-relay.md

@@ -1,9 +0,0 @@
-# Relay Modern
-
-Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions.
-
-Visit the following resources to learn more:
-
-- [@official@Official Website](https://relay.dev/)
-- [@official@Introduction to Relay modern](https://relay.dev/docs/)
-- [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)

src/data/roadmaps/vue/content/102-ecosystem/index.md

@@ -1,7 +0,0 @@
-# Ecosystem
-
-Thanks to its popularity, Vue has been enriched by a vast ecosystem of plugins and tools. A (long) list is available here: [awesome-vue](https://github.com/vuejs/awesome-vue).
-
-Visit the following resources to learn more:
-
-- [@opensource@Awesome Vue.js](https://github.com/vuejs/awesome-vue)

src/data/roadmaps/vue/content/binding-events@b7iXwtUnELg_ShbCyTrNA.md

@@ -0,0 +1 @@
+# Binding Events

src/data/roadmaps/vue/content/debugging@dxwKfBxd5KYVkfEPMdHp-.md

@@ -0,0 +1 @@
+# Debugging

src/data/roadmaps/vue/content/error--warn-handler@1oIt_5OK-t2WaCgaYt9A8.md

@@ -0,0 +1 @@
+# Error / Warn Handler

src/data/roadmaps/vue/content/event-modifiers@Aaf7eA-5sbAD5Cs1MbdTQ.md

@@ -0,0 +1 @@
+# Event Modifiers

src/data/roadmaps/vue/content/global-properties@gihxGgt177BK_EYsAfpx9.md

@@ -0,0 +1 @@
+# Global Properties

src/data/roadmaps/vue/content/inline--method-handlers@gVahaZNPktQuqdukFEbQH.md

@@ -0,0 +1 @@
+# Inline / Method Handlers

src/data/roadmaps/vue/content/input-bindings@NfB3HlZ3uwYK5xszvV50b.md

@@ -0,0 +1 @@
+# Input Bindings

src/data/roadmaps/vue/content/key-modifiers@BXw36wqhmi3gExXwFCIBd.md

@@ -0,0 +1 @@
+# Key Modifiers

src/data/roadmaps/vue/content/modifiers@dSfrFLr8wKkLAOMJwtCTr.md

@@ -0,0 +1 @@
+# Modifiers

src/data/roadmaps/vue/content/mouse-button-modifiers@x0wl2Qz2LTP4Q2tThKAt3.md

@@ -0,0 +1 @@
+# Mouse Button Modifiers

src/data/roadmaps/vue/content/optimizing-renders@RRPhAxIqvAcjZIcLe_N8-.md

@@ -0,0 +1 @@
+# Optimizing Renders

src/data/roadmaps/vue/content/performance@f7N4pAp_jBlT8_8owAcbG.md

@@ -0,0 +1 @@
+# Performance

src/data/roadmaps/vue/content/topic-node@B36yB4jsgSbTrf8g-R5Z1.md

@@ -0,0 +1 @@
+# topic node

src/data/roadmaps/vue/content/v-bind@cuM9q9vYy8JpZPGeBffd1.md

@@ -0,0 +1 @@
+# v-bind

src/data/roadmaps/vue/content/v-cloak@RrSekP8Ub01coegMwLP6a.md

@@ -0,0 +1 @@
+# v-cloak

src/data/roadmaps/vue/content/v-else-if@a9caVhderJaVo0v14w8WB.md

@@ -0,0 +1 @@
+# v-else-if

src/data/roadmaps/vue/content/v-else@0CtAZQcFJexMiJfZ-mofv.md

@@ -0,0 +1 @@
+# v-else

src/data/roadmaps/vue/content/v-for@3ftwRjQ9e1-qDT9BV53zr.md

@@ -0,0 +1 @@
+# v-for

src/data/roadmaps/vue/content/v-html@bZxtIBeIfeUcR32LZWrPW.md

@@ -0,0 +1 @@
+# v-html

src/data/roadmaps/vue/content/v-if@xHj3W9Ig3MVuVlGyXchaP.md

@@ -0,0 +1 @@
+# v-if

src/data/roadmaps/vue/content/v-model@cxu2Wbt306SxM4JKQQqnL.md

@@ -0,0 +1 @@
+# v-model

src/data/roadmaps/vue/content/v-model@gMFndBcrTC6FtGryqN6dX.md

@@ -0,0 +1 @@
+# v-model

src/data/roadmaps/vue/content/v-on@hVuRmhXVP65IPtuHTORjJ.md

@@ -0,0 +1 @@
+# v-on

src/data/roadmaps/vue/content/v-once@5k9CrbzhNy9iiS6ez2UE6.md

@@ -0,0 +1 @@
+# v-once

src/data/roadmaps/vue/content/v-pre@mlsrhioiEkqnRIL6O3hNa.md

@@ -0,0 +1 @@
+# v-pre

src/data/roadmaps/vue/content/v-show@_TlbGTKFCMO0wdLbC6xHX.md

@@ -0,0 +1 @@
+# v-show

src/data/roadmaps/vue/content/v-slot@m9pQ3daR3KiwRATcQysHA.md

@@ -0,0 +1 @@
+# v-slot

src/data/roadmaps/vue/content/v-text@NCIzs3jbQTv1xXhAaGfZN.md

@@ -0,0 +1 @@
+# v-text

src/data/roadmaps/vue/migration-mapping.json

@@ -0,0 +1,59 @@
+{
+  "fundamental-topics:create-vue": "y9ToYDix-koRbR6FLydFw",
+  "fundamental-topics:components": "0EevuyZiyty3X3Jzpjl4y",
+  "fundamental-topics:components:single-file-components": "VNBRlJkdH6NOOzGXUrbZK",
+  "fundamental-topics:components:component-registration": "2HhKifjuDcP3eKpanRMEQ",
+  "fundamental-topics:components:props": "raEfI4GLMW2fOucka07VE",
+  "fundamental-topics:components:events": "X0J3ogH3W8EQe68tLfcGL",
+  "fundamental-topics:components:v-model": "swpyZFUO4UO3mW8Bvf1Te",
+  "fundamental-topics:components:attribute-inheritance": "4S5fVFsFDMbq05ld7n0sF",
+  "fundamental-topics:templates": "VlcYnTHW5d4J_zLYupvu5",
+  "fundamental-topics:directives": "CGdw3PqLRb9OqFU5SqmE1",
+  "fundamental-topics:api-styles": "OpJ2NMKCGXQezpzURE45R",
+  "fundamental-topics:api-styles:options-api": "PPUU3Rb73aCpT4zcyvlJE",
+  "fundamental-topics:api-styles:composition-api": "a0qwdQTunxEjQ9A5wpF-q",
+  "fundamental-topics:app-configurations": "qRm08uDZW-D8QDc-9sPX8",
+  "fundamental-topics:rendering-lists": "ftqDoGpwqqWQnu4NQSsMk",
+  "fundamental-topics:conditional-rendering": "tU4Umtnfu01t9gLlnlK6b",
+  "fundamental-topics:lifecycle-hooks": "WiGG9_4G5y-AVA9byw6_g",
+  "fundamental-topics:forms-handling": "PQu4TyJOfCEaafW5th0e4",
+  "fundamental-topics:events-handling": "4p6Gh2fMPA8hls_mWa5HR",
+  "fundamental-topics:computed-properties": "Bx1Atxcf15AEaA1BiSIc6",
+  "advanced-topics:async-components": "Re7tv1U0LxYqE5ShFxQSf",
+  "advanced-topics:teleport-components": "SGsd08ZTu4H76s8cfbCKe",
+  "advanced-topics:provide-inject": "xwVbhOpQMPPB4G-lhro0B",
+  "advanced-topics:custom-directives": "br1r8KIf5KInY5mk2xhA6",
+  "advanced-topics:plugins": "_Nc8ivQrdpKuf8MwaV-K7",
+  "advanced-topics:watchers": "kdlXhbw_a81xdZtyK-pVa",
+  "advanced-topics:slots": "jkX66izOHVWqtyd6KZ0K6",
+  "advanced-topics:transition": "SWpWg5J5N9ZfY_DaIigA5",
+  "advanced-topics:transition-group": "HjzOYjS-7ZEBvElRJ8uN2",
+  "ecosystem:vueuse": "Z9szBPFXfqK_KsvzkR-rf",
+  "ecosystem:routing:vue-router": "COxkmvqe9jFtV9WtGjfbh",
+  "ecosystem:routing": "ixRG0xfEp4BmyvCR0mtoR",
+  "ecosystem:forms": "izGdctxP_OvQNvaMwVIrh",
+  "ecosystem:forms:formkit": "BXz1utB_2eYzFvzSbFKx0",
+  "ecosystem:forms:vee-validate": "_Fmp8_z4SKWfKUE80_fqb",
+  "ecosystem:forms:vuelidate": "6U_CAhAY_jyj_4Mzj_HL_",
+  "ecosystem:ssr": "Cm6mqXYp-G4mGfPxuU73_",
+  "ecosystem:ssg": "822tGnM9jOkYh9aNlosPr",
+  "ecosystem:ssr:quasar": "f2udJnT2q5eDmBZ_OKtmi",
+  "ecosystem:ssr:nuxt-js": "8xZxTLYq5m5_nkGh2lfUt",
+  "ecosystem:ssg:vitepress": "_46COO0FGaFuCYwqaRRWy",
+  "ecosystem:vitest": "LjEAviRMtPLwUUlfcof1h",
+  "ecosystem:vue-testing-library": "p5bUvgr_3H-A55ZnEExk8",
+  "ecosystem:cypress": "JbMKUVDMUygjXXmhndHVs",
+  "ecosystem:playwright": "zqcE3bTnymdepV-Yc8qBl",
+  "ecosystem:tailwind-css": "TkzlmJ85O-e-KfMhTBwry",
+  "ecosystem:vuetify": "VNclt_QQthWb2u4xWI_uY",
+  "ecosystem:element-ui": "NMIh8rqLM5P-Uk65uHATn",
+  "ecosystem:state-management": "9AwVtwIv6TfP9F4ulz2F0",
+  "ecosystem:state-management:pinia": "NIvjyhtTFC1gomtGQT_2t",
+  "ecosystem:mobile-apps": "3RwIO-S8-xOYKNmfwk0pf",
+  "ecosystem:mobile-apps:capacitor": "IsNzCdS05tbAK0D1zz0Sf",
+  "ecosystem:api-calls": "ZLlz0Azfze-8k3z8HnVvE",
+  "ecosystem:api-calls:apollo": "l2Rl6OQbL7kYvPlpYCZ0Z",
+  "ecosystem:api-calls:axios": "n5IlN-wv4k0r16CvhoSpD",
+  "ecosystem:api-calls:fetch": "ufnt87swK61kxShLuVc1-",
+  "ecosystem:api-calls:tanstack-query": "WSq_cDKQPZa_qmQlIdGXg"
+}