From ccc2cbd9c2f9dee650257b51bd52eeb10e6d2e48 Mon Sep 17 00:00:00 2001 From: Vedansh Date: Thu, 17 Oct 2024 19:46:59 +0530 Subject: [PATCH] Improve Vue.js Roadmap (#7498) * Phase - 1 * Phase - 2 * Phase - 3 * Phase - 4 * Phase - 6 * Phase - 7 (Final) * Update src/data/roadmaps/vue/content/v-else-if@a9caVhderJaVo0v14w8WB.md * Update src/data/roadmaps/vue/content/v-else@0CtAZQcFJexMiJfZ-mofv.md --------- Co-authored-by: Kamran Ahmed --- .../vue/content/api-calls@ZLlz0Azfze-8k3z8HnVvE.md | 1 + .../vue/content/apollo@l2Rl6OQbL7kYvPlpYCZ0Z.md | 6 +++--- .../app-configurations@qRm08uDZW-D8QDc-9sPX8.md | 3 +-- .../content/async-components@Re7tv1U0LxYqE5ShFxQSf.md | 2 +- .../attribute-inheritance@4S5fVFsFDMbq05ld7n0sF.md | 2 +- .../vue/content/axios@n5IlN-wv4k0r16CvhoSpD.md | 6 ++---- .../content/binding-events@b7iXwtUnELg_ShbCyTrNA.md | 9 ++++++++- .../vue/content/capacitor@IsNzCdS05tbAK0D1zz0Sf.md | 2 +- .../component-registration@2HhKifjuDcP3eKpanRMEQ.md | 2 +- .../vue/content/components@0EevuyZiyty3X3Jzpjl4y.md | 4 ++-- .../content/composition-api@a0qwdQTunxEjQ9A5wpF-q.md | 6 +++--- .../computed-properties@Bx1Atxcf15AEaA1BiSIc6.md | 2 +- .../conditional-rendering@tU4Umtnfu01t9gLlnlK6b.md | 2 +- .../vue/content/create-vue@y9ToYDix-koRbR6FLydFw.md | 5 +++-- .../content/custom-directives@br1r8KIf5KInY5mk2xhA6.md | 6 ++++-- .../vue/content/cypress@JbMKUVDMUygjXXmhndHVs.md | 4 ++-- .../vue/content/debugging@dxwKfBxd5KYVkfEPMdHp-.md | 8 +++++++- .../vue/content/directives@CGdw3PqLRb9OqFU5SqmE1.md | 5 +++-- .../vue/content/element-ui@NMIh8rqLM5P-Uk65uHATn.md | 4 ++-- .../error--warn-handler@1oIt_5OK-t2WaCgaYt9A8.md | 8 +++++++- .../content/event-handling@4p6Gh2fMPA8hls_mWa5HR.md | 2 +- .../content/event-modifiers@Aaf7eA-5sbAD5Cs1MbdTQ.md | 8 +++++++- .../vue/content/events@X0J3ogH3W8EQe68tLfcGL.md | 4 ++-- .../vue/content/fetch@ufnt87swK61kxShLuVc1-.md | 6 +++--- .../vue/content/formkit@BXz1utB_2eYzFvzSbFKx0.md | 1 - .../content/forms-handling@PQu4TyJOfCEaafW5th0e4.md | 2 +- .../vue/content/forms@izGdctxP_OvQNvaMwVIrh.md | 2 +- .../content/global-properties@gihxGgt177BK_EYsAfpx9.md | 8 +++++++- .../inline--method-handlers@gVahaZNPktQuqdukFEbQH.md | 8 +++++++- .../content/input-bindings@NfB3HlZ3uwYK5xszvV50b.md | 8 +++++++- .../vue/content/key-modifiers@BXw36wqhmi3gExXwFCIBd.md | 8 +++++++- .../content/lifecycle-hooks@WiGG9_4G5y-AVA9byw6_g.md | 2 +- .../vue/content/modifiers@dSfrFLr8wKkLAOMJwtCTr.md | 8 +++++++- .../mouse-button-modifiers@x0wl2Qz2LTP4Q2tThKAt3.md | 8 +++++++- .../vue/content/nuxtjs@8xZxTLYq5m5_nkGh2lfUt.md | 2 +- .../optimizing-renders@RRPhAxIqvAcjZIcLe_N8-.md | 2 +- .../vue/content/options-api@PPUU3Rb73aCpT4zcyvlJE.md | 8 +++----- .../vue/content/pinia@NIvjyhtTFC1gomtGQT_2t.md | 2 +- .../vue/content/playwright@zqcE3bTnymdepV-Yc8qBl.md | 2 +- .../vue/content/plugins@_Nc8ivQrdpKuf8MwaV-K7.md | 2 +- .../vue/content/props@raEfI4GLMW2fOucka07VE.md | 4 ++-- .../content/provide--inject@xwVbhOpQMPPB4G-lhro0B.md | 2 +- .../vue/content/quasar@f2udJnT2q5eDmBZ_OKtmi.md | 2 +- .../content/rendering-lists@ftqDoGpwqqWQnu4NQSsMk.md | 2 +- .../vue/content/routing@ixRG0xfEp4BmyvCR0mtoR.md | 5 +++++ .../single-file-components@VNBRlJkdH6NOOzGXUrbZK.md | 2 +- .../vue/content/slots@jkX66izOHVWqtyd6KZ0K6.md | 2 +- .../roadmaps/vue/content/ssg@822tGnM9jOkYh9aNlosPr.md | 2 +- .../roadmaps/vue/content/ssr@Cm6mqXYp-G4mGfPxuU73_.md | 5 ++--- .../content/state-management@9AwVtwIv6TfP9F4ulz2F0.md | 1 + .../content/tanstack-query@WSq_cDKQPZa_qmQlIdGXg.md | 2 +- .../teleport-components@SGsd08ZTu4H76s8cfbCKe.md | 2 +- .../vue/content/templates@VlcYnTHW5d4J_zLYupvu5.md | 2 +- .../content/transition-group@HjzOYjS-7ZEBvElRJ8uN2.md | 2 +- .../vue/content/transition@SWpWg5J5N9ZfY_DaIigA5.md | 2 +- .../vue/content/v-bind@cuM9q9vYy8JpZPGeBffd1.md | 9 ++++----- .../vue/content/v-cloak@RrSekP8Ub01coegMwLP6a.md | 9 +++++---- .../vue/content/v-else-if@a9caVhderJaVo0v14w8WB.md | 1 + .../vue/content/v-else@0CtAZQcFJexMiJfZ-mofv.md | 3 ++- .../vue/content/v-for@3ftwRjQ9e1-qDT9BV53zr.md | 10 +++++----- .../vue/content/v-html@bZxtIBeIfeUcR32LZWrPW.md | 9 +++++---- .../roadmaps/vue/content/v-if@xHj3W9Ig3MVuVlGyXchaP.md | 10 +++++++--- .../vue/content/v-model@cxu2Wbt306SxM4JKQQqnL.md | 2 +- .../vue/content/v-model@gMFndBcrTC6FtGryqN6dX.md | 4 ++-- .../vue/content/v-model@swpyZFUO4UO3mW8Bvf1Te.md | 3 +-- .../roadmaps/vue/content/v-on@hVuRmhXVP65IPtuHTORjJ.md | 8 +++++++- .../vue/content/v-once@5k9CrbzhNy9iiS6ez2UE6.md | 8 +++++--- .../vue/content/v-pre@mlsrhioiEkqnRIL6O3hNa.md | 6 ++++-- .../vue/content/v-show@_TlbGTKFCMO0wdLbC6xHX.md | 6 ++---- .../vue/content/v-slot@m9pQ3daR3KiwRATcQysHA.md | 2 +- .../vue/content/v-text@NCIzs3jbQTv1xXhAaGfZN.md | 7 ++++--- .../vue/content/vee-validate@_Fmp8_z4SKWfKUE80_fqb.md | 2 +- .../vue/content/vitepress@_46COO0FGaFuCYwqaRRWy.md | 2 +- .../vue/content/vitest@LjEAviRMtPLwUUlfcof1h.md | 3 +-- .../vue/content/vue-router@COxkmvqe9jFtV9WtGjfbh.md | 2 +- .../vue-testing-library@p5bUvgr_3H-A55ZnEExk8.md | 2 +- .../vue/content/vuelidate@6U_CAhAY_jyj_4Mzj_HL_.md | 2 +- .../vue/content/vuetify@VNclt_QQthWb2u4xWI_uY.md | 4 ++-- .../vue/content/vueuse@Z9szBPFXfqK_KsvzkR-rf.md | 3 +-- .../vue/content/watchers@kdlXhbw_a81xdZtyK-pVa.md | 6 ++---- 80 files changed, 208 insertions(+), 132 deletions(-) diff --git a/src/data/roadmaps/vue/content/api-calls@ZLlz0Azfze-8k3z8HnVvE.md b/src/data/roadmaps/vue/content/api-calls@ZLlz0Azfze-8k3z8HnVvE.md index f1b45058b..c31a1b6f9 100644 --- a/src/data/roadmaps/vue/content/api-calls@ZLlz0Azfze-8k3z8HnVvE.md +++ b/src/data/roadmaps/vue/content/api-calls@ZLlz0Azfze-8k3z8HnVvE.md @@ -5,3 +5,4 @@ There are several options available to make API calls from your Vue.js applicati Visit the following resources to learn more: - [@article@How To Make API calls in Vue.JS Applications](https://medium.com/bb-tutorials-and-thoughts/how-to-make-api-calls-in-vue-js-applications-43e017d4dc86) +- [@article@How to Use RapidAPI Client with Vue.js](https://rapidapi.com/guides/fetch-api-with-vue) diff --git a/src/data/roadmaps/vue/content/apollo@l2Rl6OQbL7kYvPlpYCZ0Z.md b/src/data/roadmaps/vue/content/apollo@l2Rl6OQbL7kYvPlpYCZ0Z.md index 2998402db..4703c3bd5 100644 --- a/src/data/roadmaps/vue/content/apollo@l2Rl6OQbL7kYvPlpYCZ0Z.md +++ b/src/data/roadmaps/vue/content/apollo@l2Rl6OQbL7kYvPlpYCZ0Z.md @@ -4,8 +4,8 @@ Apollo is a platform for building a unified graph, a communication layer that he Visit the following resources to learn more: -- [@article@Apollo Website](https://www.apollographql.com) -- [@article@Official Docs](https://www.apollographql.com/docs/) -- [@video@Official YouTube Channel](https://www.youtube.com/c/ApolloGraphQL/) +- [@official@Apollo Website](https://www.apollographql.com) +- [@official@Apollo Docs](https://www.apollographql.com/docs/) +- [@video@Apollo's YouTube Channel](https://www.youtube.com/c/ApolloGraphQL/) - [@video@GraphQL With React Tutorial - Apollo Client](https://www.youtube.com/watch?v=YyUWW04HwKY) - [@feed@Explore top posts about Apollo](https://app.daily.dev/tags/apollo?ref=roadmapsh) diff --git a/src/data/roadmaps/vue/content/app-configurations@qRm08uDZW-D8QDc-9sPX8.md b/src/data/roadmaps/vue/content/app-configurations@qRm08uDZW-D8QDc-9sPX8.md index ece0d4291..157902d74 100644 --- a/src/data/roadmaps/vue/content/app-configurations@qRm08uDZW-D8QDc-9sPX8.md +++ b/src/data/roadmaps/vue/content/app-configurations@qRm08uDZW-D8QDc-9sPX8.md @@ -4,5 +4,4 @@ Every application instance exposes a `config` object that contains the configura Visit the following resources to learn more: -- [@article@Official Documentation](https://vuejs.org/api/application.html#app-config) -- [@article@official API Documentation](https://vuejs.org/api/application.html) +- [@official@Vue.js Documentation](https://vuejs.org/api/application.html#app-config) diff --git a/src/data/roadmaps/vue/content/async-components@Re7tv1U0LxYqE5ShFxQSf.md b/src/data/roadmaps/vue/content/async-components@Re7tv1U0LxYqE5ShFxQSf.md index 10d3d18e2..38cf9165b 100644 --- a/src/data/roadmaps/vue/content/async-components@Re7tv1U0LxYqE5ShFxQSf.md +++ b/src/data/roadmaps/vue/content/async-components@Re7tv1U0LxYqE5ShFxQSf.md @@ -4,4 +4,4 @@ In large applications, we may need to divide the app into smaller chunks and onl Visit the following resources to learn more: -- [@article@Async Components](https://vuejs.org/guide/components/async.html) +- [@official@Async Components](https://vuejs.org/guide/components/async.html) diff --git a/src/data/roadmaps/vue/content/attribute-inheritance@4S5fVFsFDMbq05ld7n0sF.md b/src/data/roadmaps/vue/content/attribute-inheritance@4S5fVFsFDMbq05ld7n0sF.md index 3db7e476f..4e0a65955 100644 --- a/src/data/roadmaps/vue/content/attribute-inheritance@4S5fVFsFDMbq05ld7n0sF.md +++ b/src/data/roadmaps/vue/content/attribute-inheritance@4S5fVFsFDMbq05ld7n0sF.md @@ -4,4 +4,4 @@ Attribute inheritance aka "fallthrough attributes" is a feature of Vue.js that a Visit the following resources to learn more: -- [@article@Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html) +- [@official@Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html) diff --git a/src/data/roadmaps/vue/content/axios@n5IlN-wv4k0r16CvhoSpD.md b/src/data/roadmaps/vue/content/axios@n5IlN-wv4k0r16CvhoSpD.md index 4a4577741..3a6a4442c 100644 --- a/src/data/roadmaps/vue/content/axios@n5IlN-wv4k0r16CvhoSpD.md +++ b/src/data/roadmaps/vue/content/axios@n5IlN-wv4k0r16CvhoSpD.md @@ -1,11 +1,9 @@ # Axios -The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests. - -Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers. +Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers. The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests. Visit the following resources to learn more: -- [@article@Axios Getting Started](https://axios-http.com/docs/intro) +- [@official@Getting Started with Axios](https://axios-http.com/docs/intro) - [@article@How to make HTTP requests with Axios](https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#why) - [@feed@Explore top posts about Axios](https://app.daily.dev/tags/axios?ref=roadmapsh) diff --git a/src/data/roadmaps/vue/content/binding-events@b7iXwtUnELg_ShbCyTrNA.md b/src/data/roadmaps/vue/content/binding-events@b7iXwtUnELg_ShbCyTrNA.md index 1f412e238..cefbe6931 100644 --- a/src/data/roadmaps/vue/content/binding-events@b7iXwtUnELg_ShbCyTrNA.md +++ b/src/data/roadmaps/vue/content/binding-events@b7iXwtUnELg_ShbCyTrNA.md @@ -1 +1,8 @@ -# Binding Events \ No newline at end of file +# Binding Events + +Vue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Vue.js has many own directives for DOM manipulation such as v-bind, v-on, v-model, etc. Binding events is an essential part of creating interactive applications. You can bind events using the v-on directive or its shorthand, the @ symbol. + +Visit the following resources to learn more: + +- [@official@Binding Events](https://vuejs.org/guide/essentials/event-handling) +- [@article@Vue.js Event Handling](https://www.geeksforgeeks.org/vue-js-event-handling/) diff --git a/src/data/roadmaps/vue/content/capacitor@IsNzCdS05tbAK0D1zz0Sf.md b/src/data/roadmaps/vue/content/capacitor@IsNzCdS05tbAK0D1zz0Sf.md index 2635d6972..ea01e874e 100644 --- a/src/data/roadmaps/vue/content/capacitor@IsNzCdS05tbAK0D1zz0Sf.md +++ b/src/data/roadmaps/vue/content/capacitor@IsNzCdS05tbAK0D1zz0Sf.md @@ -4,5 +4,5 @@ Since Vue.js is a web framework, it does not natively support mobile app develop Visit the following resources to learn more: -- [@article@Building cross-platform apps with Capacitor and Vue.js](https://blog.logrocket.com/building-cross-platform-apps-with-capacitor-and-vue-js/) +- [@article@Building Cross-Platform Apps with Capacitor and Vue.js](https://blog.logrocket.com/building-cross-platform-apps-with-capacitor-and-vue-js/) - [@article@Building Mobile Apps With Capacitor And Vue.js](https://www.smashingmagazine.com/2018/07/mobile-apps-capacitor-vue-js/) diff --git a/src/data/roadmaps/vue/content/component-registration@2HhKifjuDcP3eKpanRMEQ.md b/src/data/roadmaps/vue/content/component-registration@2HhKifjuDcP3eKpanRMEQ.md index ad8a58dce..67539675a 100644 --- a/src/data/roadmaps/vue/content/component-registration@2HhKifjuDcP3eKpanRMEQ.md +++ b/src/data/roadmaps/vue/content/component-registration@2HhKifjuDcP3eKpanRMEQ.md @@ -4,4 +4,4 @@ A Vue component needs to be "registered" so that Vue knows where to locate its i Visit the following resources to learn more: -- [@article@Component Registration](https://vuejs.org/guide/components/registration.html) +- [@official@Component Registration](https://vuejs.org/guide/components/registration.html) diff --git a/src/data/roadmaps/vue/content/components@0EevuyZiyty3X3Jzpjl4y.md b/src/data/roadmaps/vue/content/components@0EevuyZiyty3X3Jzpjl4y.md index 07875a127..fd1da3962 100644 --- a/src/data/roadmaps/vue/content/components@0EevuyZiyty3X3Jzpjl4y.md +++ b/src/data/roadmaps/vue/content/components@0EevuyZiyty3X3Jzpjl4y.md @@ -4,5 +4,5 @@ Components allow us to split the UI into independent and reusable pieces, and th Visit the following resources to learn more: -- [@article@Components Basics](https://vuejs.org/guide/essentials/component-basics.html) -- [@article@Components in Depth](https://vuejs.org/guide/components/registration.html) +- [@official@Components Basics](https://vuejs.org/guide/essentials/component-basics.html) +- [@official@Components in Depth](https://vuejs.org/guide/components/registration.html) diff --git a/src/data/roadmaps/vue/content/composition-api@a0qwdQTunxEjQ9A5wpF-q.md b/src/data/roadmaps/vue/content/composition-api@a0qwdQTunxEjQ9A5wpF-q.md index 6f94fa8c1..bee0186e5 100644 --- a/src/data/roadmaps/vue/content/composition-api@a0qwdQTunxEjQ9A5wpF-q.md +++ b/src/data/roadmaps/vue/content/composition-api@a0qwdQTunxEjQ9A5wpF-q.md @@ -4,8 +4,8 @@ With the release of Vue 3, developers now have access to the Composition API, a Visit the following resources to learn more: -- [@article@TypeScript with Composition API](https://vuejs.org/guide/typescript/composition-api.html) -- [@article@Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html) -- [@article@Composition API](https://vuejs.org/api/#composition-api) +- [@official@TypeScript with Composition API](https://vuejs.org/guide/typescript/composition-api.html) +- [@official@Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html) +- [@official@Composition API](https://vuejs.org/api/#composition-api) - [@article@Vue 3 Composition API](https://www.thisdot.co/blog/vue-3-composition-api-ref-and-reactive) - [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh) diff --git a/src/data/roadmaps/vue/content/computed-properties@Bx1Atxcf15AEaA1BiSIc6.md b/src/data/roadmaps/vue/content/computed-properties@Bx1Atxcf15AEaA1BiSIc6.md index 4459169c4..7d69dfa44 100644 --- a/src/data/roadmaps/vue/content/computed-properties@Bx1Atxcf15AEaA1BiSIc6.md +++ b/src/data/roadmaps/vue/content/computed-properties@Bx1Atxcf15AEaA1BiSIc6.md @@ -4,4 +4,4 @@ In-template expressions are very convenient, but they are meant for simple opera Visit the following resources to learn more: -- [@article@Computed Properties](https://vuejs.org/guide/essentials/computed.html#computed-properties) +- [@official@Computed Properties](https://vuejs.org/guide/essentials/computed.html#computed-properties) diff --git a/src/data/roadmaps/vue/content/conditional-rendering@tU4Umtnfu01t9gLlnlK6b.md b/src/data/roadmaps/vue/content/conditional-rendering@tU4Umtnfu01t9gLlnlK6b.md index 2622fd8c9..fdabe4a8e 100644 --- a/src/data/roadmaps/vue/content/conditional-rendering@tU4Umtnfu01t9gLlnlK6b.md +++ b/src/data/roadmaps/vue/content/conditional-rendering@tU4Umtnfu01t9gLlnlK6b.md @@ -4,4 +4,4 @@ The directive `v-if` is used to conditionally render a block. The block will onl Visit the following resources to learn more: -- [@article@Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html) +- [@official@Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html) diff --git a/src/data/roadmaps/vue/content/create-vue@y9ToYDix-koRbR6FLydFw.md b/src/data/roadmaps/vue/content/create-vue@y9ToYDix-koRbR6FLydFw.md index 8b3e6d679..4acc27edf 100644 --- a/src/data/roadmaps/vue/content/create-vue@y9ToYDix-koRbR6FLydFw.md +++ b/src/data/roadmaps/vue/content/create-vue@y9ToYDix-koRbR6FLydFw.md @@ -1,8 +1,9 @@ # create-vue -[create-vue](https://github.com/vuejs/create-vue) is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project. +create-vue is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project. Learn more using the following resources: -- [@article@Creating a Vue Project](https://cli.vuejs.org/guide/creating-a-project.html) +- [@opensource@vuejs/create-vue](https://github.com/vuejs/create-vue) +- [@official@Creating a Vue Project](https://cli.vuejs.org/guide/creating-a-project.html) - [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh) diff --git a/src/data/roadmaps/vue/content/custom-directives@br1r8KIf5KInY5mk2xhA6.md b/src/data/roadmaps/vue/content/custom-directives@br1r8KIf5KInY5mk2xhA6.md index 84fc043bf..7358ba1d8 100644 --- a/src/data/roadmaps/vue/content/custom-directives@br1r8KIf5KInY5mk2xhA6.md +++ b/src/data/roadmaps/vue/content/custom-directives@br1r8KIf5KInY5mk2xhA6.md @@ -1,7 +1,9 @@ # Custom Directives -So far you may have covered two forms of code reuse in Vue: [components](https://vuejs.org/guide/essentials/component-basics.html) and [composables](https://vuejs.org/guide/reusability/composables.html). Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements. +So far you may have covered two forms of code reuse in Vue: components and composables. Components are the main building blocks, while composables are focused on reusing stateful logic. Custom directives, on the other hand, are mainly intended for reusing logic that involves low-level DOM access on plain elements. Visit the following resources to learn more: -- [@article@Custom Directives](https://vuejs.org/guide/reusability/custom-directives.html) +- [@official@Custom Directives](https://vuejs.org/guide/reusability/custom-directives.html) +- [@official@Composables](https://vuejs.org/guide/reusability/composables.html) +- [@official@Components](https://vuejs.org/guide/essentials/component-basics.html) diff --git a/src/data/roadmaps/vue/content/cypress@JbMKUVDMUygjXXmhndHVs.md b/src/data/roadmaps/vue/content/cypress@JbMKUVDMUygjXXmhndHVs.md index 856442ed1..4f4b4813e 100644 --- a/src/data/roadmaps/vue/content/cypress@JbMKUVDMUygjXXmhndHVs.md +++ b/src/data/roadmaps/vue/content/cypress@JbMKUVDMUygjXXmhndHVs.md @@ -4,7 +4,7 @@ Cypress framework is a JavaScript-based end-to-end testing framework built on to Visit the following resources to learn more: -- [@official@Official Website](https://www.cypress.io/) -- [@article@Official Documentation](https://docs.cypress.io/guides/overview/why-cypress#Other) +- [@official@Cypress Website](https://www.cypress.io/) +- [@official@Cypress Documentation](https://docs.cypress.io/guides/overview/why-cypress#Other) - [@video@Cypress End-to-End Testing](https://www.youtube.com/watch?v=7N63cMKosIE) - [@feed@Explore top posts about Cypress](https://app.daily.dev/tags/cypress?ref=roadmapsh) diff --git a/src/data/roadmaps/vue/content/debugging@dxwKfBxd5KYVkfEPMdHp-.md b/src/data/roadmaps/vue/content/debugging@dxwKfBxd5KYVkfEPMdHp-.md index 948532978..bdf758af6 100644 --- a/src/data/roadmaps/vue/content/debugging@dxwKfBxd5KYVkfEPMdHp-.md +++ b/src/data/roadmaps/vue/content/debugging@dxwKfBxd5KYVkfEPMdHp-.md @@ -1 +1,7 @@ -# Debugging \ No newline at end of file +# Debugging + +Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code. + +Visit the following resources to learn more: + +- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html) diff --git a/src/data/roadmaps/vue/content/directives@CGdw3PqLRb9OqFU5SqmE1.md b/src/data/roadmaps/vue/content/directives@CGdw3PqLRb9OqFU5SqmE1.md index fb7ef9530..305adcf57 100644 --- a/src/data/roadmaps/vue/content/directives@CGdw3PqLRb9OqFU5SqmE1.md +++ b/src/data/roadmaps/vue/content/directives@CGdw3PqLRb9OqFU5SqmE1.md @@ -1,7 +1,8 @@ # Directives -Directives are special attributes with the `v-` prefix. Vue provides a number of [built-in directives](https://vuejs.org/api/built-in-directives.html). +Directives are special attributes with the `v-` prefix. Vue provides a number of built-in directives. Visit the following resources to learn more: -- [@article@Directives Documentation](https://vuejs.org/guide/essentials/template-syntax.html#directives) +- [@official@Directives Documentation](https://vuejs.org/guide/essentials/template-syntax.html#directives) +- [@official@Built-in Directives](https://vuejs.org/api/built-in-directives.html) diff --git a/src/data/roadmaps/vue/content/element-ui@NMIh8rqLM5P-Uk65uHATn.md b/src/data/roadmaps/vue/content/element-ui@NMIh8rqLM5P-Uk65uHATn.md index c08afddc6..a65e0dfeb 100644 --- a/src/data/roadmaps/vue/content/element-ui@NMIh8rqLM5P-Uk65uHATn.md +++ b/src/data/roadmaps/vue/content/element-ui@NMIh8rqLM5P-Uk65uHATn.md @@ -4,5 +4,5 @@ Element UI is another Vue.js component library with several built-in components Visit the following resources to learn more: -- [@article@Official Website](https://element-plus.org/en-US/) -- [@article@Official Getting Started](https://element-plus.org/en-US/guide/design.html) +- [@official@Element UI Website](https://element-plus.org/en-US/) +- [@official@Getting Started - Element UI](https://element-plus.org/en-US/guide/design.html) diff --git a/src/data/roadmaps/vue/content/error--warn-handler@1oIt_5OK-t2WaCgaYt9A8.md b/src/data/roadmaps/vue/content/error--warn-handler@1oIt_5OK-t2WaCgaYt9A8.md index 054279f68..c1d161c04 100644 --- a/src/data/roadmaps/vue/content/error--warn-handler@1oIt_5OK-t2WaCgaYt9A8.md +++ b/src/data/roadmaps/vue/content/error--warn-handler@1oIt_5OK-t2WaCgaYt9A8.md @@ -1 +1,7 @@ -# Error / Warn Handler \ No newline at end of file +# Error / Warn Handler + +Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code. + +Visit the following resources to learn more: + +- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html) diff --git a/src/data/roadmaps/vue/content/event-handling@4p6Gh2fMPA8hls_mWa5HR.md b/src/data/roadmaps/vue/content/event-handling@4p6Gh2fMPA8hls_mWa5HR.md index 946c5fa8f..be08f9e66 100644 --- a/src/data/roadmaps/vue/content/event-handling@4p6Gh2fMPA8hls_mWa5HR.md +++ b/src/data/roadmaps/vue/content/event-handling@4p6Gh2fMPA8hls_mWa5HR.md @@ -4,4 +4,4 @@ When you build a dynamic website with Vue you'll most likely want it to be able Visit the following resources to learn more: -- [@article@Event Handling in Vue.js](https://vuejs.org/guide/essentials/event-handling.html) +- [@official@Event Handling in Vue.js](https://vuejs.org/guide/essentials/event-handling.html) diff --git a/src/data/roadmaps/vue/content/event-modifiers@Aaf7eA-5sbAD5Cs1MbdTQ.md b/src/data/roadmaps/vue/content/event-modifiers@Aaf7eA-5sbAD5Cs1MbdTQ.md index 9b0a49522..a8d952059 100644 --- a/src/data/roadmaps/vue/content/event-modifiers@Aaf7eA-5sbAD5Cs1MbdTQ.md +++ b/src/data/roadmaps/vue/content/event-modifiers@Aaf7eA-5sbAD5Cs1MbdTQ.md @@ -1 +1,7 @@ -# Event Modifiers \ No newline at end of file +# Event Modifiers + +In Vue.js, event modifiers are special postfixes that you can add to event handlers to control the behavior of events more easily. They help simplify common tasks such as stopping propagation, preventing default actions, and ensuring that the event is triggered only under certain conditions. + +Visit the following resources to learn more: + +- [@article@Event Modifiers in Vue.js](https://www.freecodecamp.org/news/how-event-handling-works-in-vue-3-guide-for-devs/) diff --git a/src/data/roadmaps/vue/content/events@X0J3ogH3W8EQe68tLfcGL.md b/src/data/roadmaps/vue/content/events@X0J3ogH3W8EQe68tLfcGL.md index 040791bd2..fccd7a0ec 100644 --- a/src/data/roadmaps/vue/content/events@X0J3ogH3W8EQe68tLfcGL.md +++ b/src/data/roadmaps/vue/content/events@X0J3ogH3W8EQe68tLfcGL.md @@ -4,5 +4,5 @@ As we develop our applications we may need to communicate with the parent compon Visit the following resources to learn more: -- [@article@Listening to Events](https://vuejs.org/guide/essentials/component-basics.html#listening-to-events) -- [@article@Events in Detail](https://vuejs.org/guide/components/events.html) +- [@official@Listening to Events](https://vuejs.org/guide/essentials/component-basics.html#listening-to-events) +- [@official@Events in Detail](https://vuejs.org/guide/components/events.html) diff --git a/src/data/roadmaps/vue/content/fetch@ufnt87swK61kxShLuVc1-.md b/src/data/roadmaps/vue/content/fetch@ufnt87swK61kxShLuVc1-.md index 22efdf722..f857ce4a2 100644 --- a/src/data/roadmaps/vue/content/fetch@ufnt87swK61kxShLuVc1-.md +++ b/src/data/roadmaps/vue/content/fetch@ufnt87swK61kxShLuVc1-.md @@ -1,9 +1,9 @@ # Fetch -The fetch() method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise. +The `fetch()` method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise. Visit the following resources to learn more: -- [@article@Fetch MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) +- [@article@Fetch - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) - [@article@Fetch W3school Docs](https://www.w3schools.com/jsref/api_fetch.asp) -- [@article@Network request - Fetch](https://javascript.info/fetch) +- [@article@Network Request - Fetch](https://javascript.info/fetch) diff --git a/src/data/roadmaps/vue/content/formkit@BXz1utB_2eYzFvzSbFKx0.md b/src/data/roadmaps/vue/content/formkit@BXz1utB_2eYzFvzSbFKx0.md index e0bbae642..d6618e824 100644 --- a/src/data/roadmaps/vue/content/formkit@BXz1utB_2eYzFvzSbFKx0.md +++ b/src/data/roadmaps/vue/content/formkit@BXz1utB_2eYzFvzSbFKx0.md @@ -5,4 +5,3 @@ FormKit helps build forms faster by simplifying form structure, generation, vali Visit the following resources to learn more: - [@official@Formkit Documentation](https://formkit.com/) - diff --git a/src/data/roadmaps/vue/content/forms-handling@PQu4TyJOfCEaafW5th0e4.md b/src/data/roadmaps/vue/content/forms-handling@PQu4TyJOfCEaafW5th0e4.md index 93db8a48d..d9c221199 100644 --- a/src/data/roadmaps/vue/content/forms-handling@PQu4TyJOfCEaafW5th0e4.md +++ b/src/data/roadmaps/vue/content/forms-handling@PQu4TyJOfCEaafW5th0e4.md @@ -4,6 +4,6 @@ You can use the `v-model` directive to create two-way data bindings on form inpu Visit the following resources to learn more: -- [@article@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html) +- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html) - [@video@Vue JS 3 Tutorial - Form Handling](https://www.youtube.com/watch?v=T-AE-GtSlN4) - [@article@A complete guide to forms in Vue.js](https://blog.logrocket.com/an-imperative-guide-to-forms-in-vue-js-2/) diff --git a/src/data/roadmaps/vue/content/forms@izGdctxP_OvQNvaMwVIrh.md b/src/data/roadmaps/vue/content/forms@izGdctxP_OvQNvaMwVIrh.md index 1bf085e78..5f2a9d117 100644 --- a/src/data/roadmaps/vue/content/forms@izGdctxP_OvQNvaMwVIrh.md +++ b/src/data/roadmaps/vue/content/forms@izGdctxP_OvQNvaMwVIrh.md @@ -4,5 +4,5 @@ Apart from the built-in form-binding support, there are several options availabl Visit the following resources to learn more: -- [@article@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html) +- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html) - [@article@User Inputs in Vue 3](https://vueschool.io/lessons/user-inputs-vue-devtools-in-vue-3?friend=vuejs) diff --git a/src/data/roadmaps/vue/content/global-properties@gihxGgt177BK_EYsAfpx9.md b/src/data/roadmaps/vue/content/global-properties@gihxGgt177BK_EYsAfpx9.md index 7a7ed3b48..9f11783d9 100644 --- a/src/data/roadmaps/vue/content/global-properties@gihxGgt177BK_EYsAfpx9.md +++ b/src/data/roadmaps/vue/content/global-properties@gihxGgt177BK_EYsAfpx9.md @@ -1 +1,7 @@ -# Global Properties \ No newline at end of file +# Global Properties + +Global properties allows you to add properties or methods that can be accessed throughout your application. This is particularly useful for sharing functionality or data across components without the need to pass props explicitly. + +Visit the following resources to learn more: + +- [@article@Vue.js Global Properties](https://blog.logrocket.com/vue-js-globalproperties/) diff --git a/src/data/roadmaps/vue/content/inline--method-handlers@gVahaZNPktQuqdukFEbQH.md b/src/data/roadmaps/vue/content/inline--method-handlers@gVahaZNPktQuqdukFEbQH.md index c23dfd5d7..a54fe7e2b 100644 --- a/src/data/roadmaps/vue/content/inline--method-handlers@gVahaZNPktQuqdukFEbQH.md +++ b/src/data/roadmaps/vue/content/inline--method-handlers@gVahaZNPktQuqdukFEbQH.md @@ -1 +1,7 @@ -# Inline / Method Handlers \ No newline at end of file +# Inline / Method Handlers + +In Vue.js, **inline handlers** are defined directly in the template using expressions, making them suitable for simple tasks. For example, you might use an inline handler to increment a counter. **Method handlers**, on the other hand, are defined in the `methods` option and are better for more complex logic or when reusing functionality across multiple components. They improve code readability and maintainability. + +Visit the following resources to learn more: + +- [@official@Method Handlers](https://v1.vuejs.org/guide/events.html) diff --git a/src/data/roadmaps/vue/content/input-bindings@NfB3HlZ3uwYK5xszvV50b.md b/src/data/roadmaps/vue/content/input-bindings@NfB3HlZ3uwYK5xszvV50b.md index aebef9958..e1185f65d 100644 --- a/src/data/roadmaps/vue/content/input-bindings@NfB3HlZ3uwYK5xszvV50b.md +++ b/src/data/roadmaps/vue/content/input-bindings@NfB3HlZ3uwYK5xszvV50b.md @@ -1 +1,7 @@ -# Input Bindings \ No newline at end of file +# Input Bindings + +Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns. + +Visit the following resources to learn more: + +- [@official@Input Bindings](https://vuejs.org/guide/essentials/forms) diff --git a/src/data/roadmaps/vue/content/key-modifiers@BXw36wqhmi3gExXwFCIBd.md b/src/data/roadmaps/vue/content/key-modifiers@BXw36wqhmi3gExXwFCIBd.md index 00be7c3c7..62f315d22 100644 --- a/src/data/roadmaps/vue/content/key-modifiers@BXw36wqhmi3gExXwFCIBd.md +++ b/src/data/roadmaps/vue/content/key-modifiers@BXw36wqhmi3gExXwFCIBd.md @@ -1 +1,7 @@ -# Key Modifiers \ No newline at end of file +# Key Modifiers + +Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns. + +Visit the following resources to learn more: + +- [@official@Input Bindings](https://vuejs.org/guide/essentials/forms) diff --git a/src/data/roadmaps/vue/content/lifecycle-hooks@WiGG9_4G5y-AVA9byw6_g.md b/src/data/roadmaps/vue/content/lifecycle-hooks@WiGG9_4G5y-AVA9byw6_g.md index 84b74af9b..21973cb5e 100644 --- a/src/data/roadmaps/vue/content/lifecycle-hooks@WiGG9_4G5y-AVA9byw6_g.md +++ b/src/data/roadmaps/vue/content/lifecycle-hooks@WiGG9_4G5y-AVA9byw6_g.md @@ -4,6 +4,6 @@ Each Vue component instance goes through a series of initialization steps when i Visit the following resources to learn more: -- [@article@Life Cycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html) +- [@official@Life Cycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html) - [@article@The Lifecycles of Vue.js](https://dev.to/amolikvivian/the-lifecycles-of-vue-js-lhh) - [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh) diff --git a/src/data/roadmaps/vue/content/modifiers@dSfrFLr8wKkLAOMJwtCTr.md b/src/data/roadmaps/vue/content/modifiers@dSfrFLr8wKkLAOMJwtCTr.md index 4526d9635..c20baf2d1 100644 --- a/src/data/roadmaps/vue/content/modifiers@dSfrFLr8wKkLAOMJwtCTr.md +++ b/src/data/roadmaps/vue/content/modifiers@dSfrFLr8wKkLAOMJwtCTr.md @@ -1 +1,7 @@ -# Modifiers \ No newline at end of file +# Modifiers + +Modifiers are special suffixes that can be added to directives (such as v-model and v-bind) to alter their behavior. Modifiers allow you to specify additional functionality or constraints to the binding, making it more flexible and powerful. + +Visit the following resources to learn more: + +- [@official@Modifiers](https://v2.vuejs.org/v2/guide/components-custom-events.html) diff --git a/src/data/roadmaps/vue/content/mouse-button-modifiers@x0wl2Qz2LTP4Q2tThKAt3.md b/src/data/roadmaps/vue/content/mouse-button-modifiers@x0wl2Qz2LTP4Q2tThKAt3.md index ba68ba00c..a68b9fac8 100644 --- a/src/data/roadmaps/vue/content/mouse-button-modifiers@x0wl2Qz2LTP4Q2tThKAt3.md +++ b/src/data/roadmaps/vue/content/mouse-button-modifiers@x0wl2Qz2LTP4Q2tThKAt3.md @@ -1 +1,7 @@ -# Mouse Button Modifiers \ No newline at end of file +# Mouse Button Modifiers + +Mouse button modifiers are a type of modifier that can be used with event handlers to specify which mouse button or buttons should trigger the event. These modifiers allow you to customize the behavior of event handlers, such as v-on:click, to respond to specific mouse button clicks. + +Visit the following resources to learn more: + +- [@article@Button Modifiers](https://medium.com/evolve-you/vue-3-keyboard-and-mouse-a4866d7d0e8) diff --git a/src/data/roadmaps/vue/content/nuxtjs@8xZxTLYq5m5_nkGh2lfUt.md b/src/data/roadmaps/vue/content/nuxtjs@8xZxTLYq5m5_nkGh2lfUt.md index 49fe56822..896f797fc 100644 --- a/src/data/roadmaps/vue/content/nuxtjs@8xZxTLYq5m5_nkGh2lfUt.md +++ b/src/data/roadmaps/vue/content/nuxtjs@8xZxTLYq5m5_nkGh2lfUt.md @@ -6,7 +6,7 @@ Visit the following resources to learn more: - [@official@Nuxt Website](https://nuxt.com/) - [@official@Nuxt Docs](https://nuxt.com/docs/getting-started/introduction) +- [@official@Nuxt Examples](https://nuxt.com/docs/examples/essentials/hello-world) - [@article@Get Started with Nuxt](https://explorers.netlify.com/learn/get-started-with-nuxt) - [@article@Nuxt.js Fundamentals](https://vueschool.io/courses/nuxtjs-fundamentals) -- [@official@Nuxt Examples](https://nuxt.com/docs/examples/essentials/hello-world) - [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh) diff --git a/src/data/roadmaps/vue/content/optimizing-renders@RRPhAxIqvAcjZIcLe_N8-.md b/src/data/roadmaps/vue/content/optimizing-renders@RRPhAxIqvAcjZIcLe_N8-.md index 9dfbc0d07..2b404c514 100644 --- a/src/data/roadmaps/vue/content/optimizing-renders@RRPhAxIqvAcjZIcLe_N8-.md +++ b/src/data/roadmaps/vue/content/optimizing-renders@RRPhAxIqvAcjZIcLe_N8-.md @@ -4,4 +4,4 @@ Optimizing rendering is crucial for ensuring a smooth and efficient user experie Learn more from the following resources: -- [@article@Optimizing rendering in Vue](https://blog.logrocket.com/optimizing-rendering-vue/) +- [@article@Optimizing Rendering in Vue](https://blog.logrocket.com/optimizing-rendering-vue/) diff --git a/src/data/roadmaps/vue/content/options-api@PPUU3Rb73aCpT4zcyvlJE.md b/src/data/roadmaps/vue/content/options-api@PPUU3Rb73aCpT4zcyvlJE.md index fe8cd4137..7f06f2c5a 100644 --- a/src/data/roadmaps/vue/content/options-api@PPUU3Rb73aCpT4zcyvlJE.md +++ b/src/data/roadmaps/vue/content/options-api@PPUU3Rb73aCpT4zcyvlJE.md @@ -1,10 +1,8 @@ # Options API -We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted. - -To state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3. +We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted. To state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3. Visit the following resources to learn more: -- [@article@TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html) -- [@article@Options API Documentation](https://vuejs.org/api/#options-api) +- [@official@TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html) +- [@official@Options API Documentation](https://vuejs.org/api/#options-api) diff --git a/src/data/roadmaps/vue/content/pinia@NIvjyhtTFC1gomtGQT_2t.md b/src/data/roadmaps/vue/content/pinia@NIvjyhtTFC1gomtGQT_2t.md index 36c9d9b01..4724be837 100644 --- a/src/data/roadmaps/vue/content/pinia@NIvjyhtTFC1gomtGQT_2t.md +++ b/src/data/roadmaps/vue/content/pinia@NIvjyhtTFC1gomtGQT_2t.md @@ -4,5 +4,5 @@ Pinia is a store library for Vue.js, and can be used in Vue 2 and Vue 3, with th Visit the following resources to learn more: -- [@article@Official Documentation](https://pinia.vuejs.org/) +- [@official@Pinia Documentation](https://pinia.vuejs.org/) - [@video@Learn Pinia in 30Minutes](https://www.youtube.com/watch?v=JGC7aAC-3y8) diff --git a/src/data/roadmaps/vue/content/playwright@zqcE3bTnymdepV-Yc8qBl.md b/src/data/roadmaps/vue/content/playwright@zqcE3bTnymdepV-Yc8qBl.md index a397ca93b..8acdeb2ec 100644 --- a/src/data/roadmaps/vue/content/playwright@zqcE3bTnymdepV-Yc8qBl.md +++ b/src/data/roadmaps/vue/content/playwright@zqcE3bTnymdepV-Yc8qBl.md @@ -4,5 +4,5 @@ Playwright Test was created specifically to accommodate the needs of end-to-end Visit the following resources to learn more: -- [@official@Official Website: Playwright](https://playwright.dev/) +- [@official@Playwright Website](https://playwright.dev/) - [@article@Playwright Tutorial: Learn Basics and Setup](https://www.browserstack.com/guide/playwright-tutorial) diff --git a/src/data/roadmaps/vue/content/plugins@_Nc8ivQrdpKuf8MwaV-K7.md b/src/data/roadmaps/vue/content/plugins@_Nc8ivQrdpKuf8MwaV-K7.md index 47f7ab02a..cdbec1707 100644 --- a/src/data/roadmaps/vue/content/plugins@_Nc8ivQrdpKuf8MwaV-K7.md +++ b/src/data/roadmaps/vue/content/plugins@_Nc8ivQrdpKuf8MwaV-K7.md @@ -4,5 +4,5 @@ Plugins are self-contained code that usually add app-level functionality to Vue. Visit the following resources to learn more: -- [@article@Plugins in Vue.js](https://vuejs.org/guide/reusability/plugins.html) +- [@official@Plugins in Vue.js](https://vuejs.org/guide/reusability/plugins.html) - [@article@How to Write Your Own Vue.js Plugin](https://www.linode.com/docs/guides/how-to-write-vue-js-plugins/) diff --git a/src/data/roadmaps/vue/content/props@raEfI4GLMW2fOucka07VE.md b/src/data/roadmaps/vue/content/props@raEfI4GLMW2fOucka07VE.md index 3364e9697..a83a24460 100644 --- a/src/data/roadmaps/vue/content/props@raEfI4GLMW2fOucka07VE.md +++ b/src/data/roadmaps/vue/content/props@raEfI4GLMW2fOucka07VE.md @@ -6,5 +6,5 @@ Props are custom attributes you can register on a component. Visit the following resources to learn more: -- [@article@Props Basics](https://vuejs.org/guide/essentials/component-basics.html#passing-props) -- [@article@Props in Depth](https://vuejs.org/guide/components/props.html) +- [@official@Props Basics](https://vuejs.org/guide/essentials/component-basics.html#passing-props) +- [@official@Props in Depth](https://vuejs.org/guide/components/props.html) diff --git a/src/data/roadmaps/vue/content/provide--inject@xwVbhOpQMPPB4G-lhro0B.md b/src/data/roadmaps/vue/content/provide--inject@xwVbhOpQMPPB4G-lhro0B.md index baa057927..22298ea33 100644 --- a/src/data/roadmaps/vue/content/provide--inject@xwVbhOpQMPPB4G-lhro0B.md +++ b/src/data/roadmaps/vue/content/provide--inject@xwVbhOpQMPPB4G-lhro0B.md @@ -4,4 +4,4 @@ Usually, when we need to pass data from the parent to a child component, we use Visit the following resources to learn more: -- [@article@Provide / Inject in Vue.js](https://vuejs.org/guide/components/provide-inject.html) +- [@official@Provide / Inject in Vue.js](https://vuejs.org/guide/components/provide-inject.html) diff --git a/src/data/roadmaps/vue/content/quasar@f2udJnT2q5eDmBZ_OKtmi.md b/src/data/roadmaps/vue/content/quasar@f2udJnT2q5eDmBZ_OKtmi.md index af5e05de2..c2dd2e2fd 100644 --- a/src/data/roadmaps/vue/content/quasar@f2udJnT2q5eDmBZ_OKtmi.md +++ b/src/data/roadmaps/vue/content/quasar@f2udJnT2q5eDmBZ_OKtmi.md @@ -4,6 +4,6 @@ Quasar Framework is an open-source Vue.js based framework for building apps, wit Visit the following resources to learn more: -- [@official@Official Website: Quasar](https://quasar.dev/) +- [@official@Quasar](https://quasar.dev/) - [@video@Quasar Framework: Vue.js Cross Platform App](https://www.youtube.com/watch?v=opmng7llVJ0&list=PLAiDzIdBfy8iu_MZrq3IPuSFcRgCQ0iL0) - [@video@How to Build an App using Quasar Framework](https://www.youtube.com/watch?v=czJIuHyPPXo) diff --git a/src/data/roadmaps/vue/content/rendering-lists@ftqDoGpwqqWQnu4NQSsMk.md b/src/data/roadmaps/vue/content/rendering-lists@ftqDoGpwqqWQnu4NQSsMk.md index 8668ee4b9..d97871de5 100644 --- a/src/data/roadmaps/vue/content/rendering-lists@ftqDoGpwqqWQnu4NQSsMk.md +++ b/src/data/roadmaps/vue/content/rendering-lists@ftqDoGpwqqWQnu4NQSsMk.md @@ -4,4 +4,4 @@ We can use the `v-for` directive to render a list of items based on an array. Th Visit the following resources to learn more: -- [@article@Rendering Lists in Vue.js](https://vuejs.org/guide/essentials/list.html) +- [@official@Rendering Lists in Vue.js](https://vuejs.org/guide/essentials/list.html) diff --git a/src/data/roadmaps/vue/content/routing@ixRG0xfEp4BmyvCR0mtoR.md b/src/data/roadmaps/vue/content/routing@ixRG0xfEp4BmyvCR0mtoR.md index e05bc2c28..9e3f23444 100644 --- a/src/data/roadmaps/vue/content/routing@ixRG0xfEp4BmyvCR0mtoR.md +++ b/src/data/roadmaps/vue/content/routing@ixRG0xfEp4BmyvCR0mtoR.md @@ -1,3 +1,8 @@ # Routing Routing is an essential concept in Single Page Applications (SPA). When your application is divided into separated logical sections, and all of them are under their own URL, your users can easily share links among each other. + +Visit the following resources to learn more: + +- [@official@Routing in Vue.js](https://vuejs.org/guide/scaling-up/routing.html) +- [@official@The Vue Router](https://router.vuejs.org/) diff --git a/src/data/roadmaps/vue/content/single-file-components@VNBRlJkdH6NOOzGXUrbZK.md b/src/data/roadmaps/vue/content/single-file-components@VNBRlJkdH6NOOzGXUrbZK.md index 6de155699..628183e4c 100644 --- a/src/data/roadmaps/vue/content/single-file-components@VNBRlJkdH6NOOzGXUrbZK.md +++ b/src/data/roadmaps/vue/content/single-file-components@VNBRlJkdH6NOOzGXUrbZK.md @@ -4,4 +4,4 @@ Vue Single-File Components (a.k.a. `*.vue` files, abbreviated as SFC) is a speci Visit the following resources to learn more: -- [@article@Single File Components](https://vuejs.org/guide/scaling-up/sfc.html) +- [@official@Single File Components](https://vuejs.org/guide/scaling-up/sfc.html) diff --git a/src/data/roadmaps/vue/content/slots@jkX66izOHVWqtyd6KZ0K6.md b/src/data/roadmaps/vue/content/slots@jkX66izOHVWqtyd6KZ0K6.md index c8d4652d2..f07330fea 100644 --- a/src/data/roadmaps/vue/content/slots@jkX66izOHVWqtyd6KZ0K6.md +++ b/src/data/roadmaps/vue/content/slots@jkX66izOHVWqtyd6KZ0K6.md @@ -4,4 +4,4 @@ In some cases, we may want to pass a template fragment to a child component, and Visit the following resources to learn more: -- [@article@Slots in Vue.js](https://vuejs.org/guide/components/slots.html) +- [@official@Slots in Vue.js](https://vuejs.org/guide/components/slots.html) diff --git a/src/data/roadmaps/vue/content/ssg@822tGnM9jOkYh9aNlosPr.md b/src/data/roadmaps/vue/content/ssg@822tGnM9jOkYh9aNlosPr.md index cdb7765e5..10dbbb95a 100644 --- a/src/data/roadmaps/vue/content/ssg@822tGnM9jOkYh9aNlosPr.md +++ b/src/data/roadmaps/vue/content/ssg@822tGnM9jOkYh9aNlosPr.md @@ -4,7 +4,7 @@ A static site generator is a tool that generates a full static HTML website base Visit the following resources to learn more: -- [@article@What is a static site generator?](https://www.cloudflare.com/learning/performance/static-site-generator/) +- [@article@What is a Static Site Generator?](https://www.cloudflare.com/learning/performance/static-site-generator/) - [@article@Next.js SSG](https://nextjs.org/docs/advanced-features/static-html-export) - [@article@Gatsby SSG](https://www.gatsbyjs.com/docs/glossary/static-site-generator/) - [@article@SSG — An 11ty, Vite And JAM Sandwich](https://www.smashingmagazine.com/2021/10/building-ssg-11ty-vite-jam-sandwich/) diff --git a/src/data/roadmaps/vue/content/ssr@Cm6mqXYp-G4mGfPxuU73_.md b/src/data/roadmaps/vue/content/ssr@Cm6mqXYp-G4mGfPxuU73_.md index 27539c035..b1d63e88c 100644 --- a/src/data/roadmaps/vue/content/ssr@Cm6mqXYp-G4mGfPxuU73_.md +++ b/src/data/roadmaps/vue/content/ssr@Cm6mqXYp-G4mGfPxuU73_.md @@ -4,9 +4,8 @@ Server-side rendering refers to the process that the service side completes the Visit the following resources to learn more: -- [@article@what is server side rendering](https://www.educative.io/answers/what-is-server-side-rendering) +- [@article@What is Server Side Rendering (SSR)?](https://www.educative.io/answers/what-is-server-side-rendering) - [@article@When should I Server-Side Render?](https://medium.com/@mbleigh/when-should-i-server-side-render-c2a383ff2d0f) - [@article@Server-Side Rendering (SSR)](https://vuejs.org/guide/scaling-up/ssr.html) -- [@video@what is server side rendering?](https://www.youtube.com/watch?v=GQzn7XRdzxY) -- [@video@What is server-side rendering for web development?](https://www.youtube.com/watch?v=okvg3MRAPs0) +- [@video@What is Server Side Rendering (SSR) for Web Development?](https://www.youtube.com/watch?v=okvg3MRAPs0) - [@feed@Explore top posts about Web Development](https://app.daily.dev/tags/webdev?ref=roadmapsh) diff --git a/src/data/roadmaps/vue/content/state-management@9AwVtwIv6TfP9F4ulz2F0.md b/src/data/roadmaps/vue/content/state-management@9AwVtwIv6TfP9F4ulz2F0.md index 206929cf1..d4bff59cd 100644 --- a/src/data/roadmaps/vue/content/state-management@9AwVtwIv6TfP9F4ulz2F0.md +++ b/src/data/roadmaps/vue/content/state-management@9AwVtwIv6TfP9F4ulz2F0.md @@ -4,4 +4,5 @@ Application state management is the process of maintaining knowledge of an appli Visit the following resources to learn more: +- [@official@State Management](https://vuejs.org/guide/scaling-up/state-management.html) - [@article@What is State Management?](https://www.techtarget.com/searchapparchitecture/definition/state-management) diff --git a/src/data/roadmaps/vue/content/tanstack-query@WSq_cDKQPZa_qmQlIdGXg.md b/src/data/roadmaps/vue/content/tanstack-query@WSq_cDKQPZa_qmQlIdGXg.md index 3cf85ce3d..567f87421 100644 --- a/src/data/roadmaps/vue/content/tanstack-query@WSq_cDKQPZa_qmQlIdGXg.md +++ b/src/data/roadmaps/vue/content/tanstack-query@WSq_cDKQPZa_qmQlIdGXg.md @@ -4,4 +4,4 @@ TanStack Query is a data fetching and caching library for Vue.js and React. It i Visit the following resources to learn more: -- [@official@Official Website](https://tanstack.com/query) \ No newline at end of file +- [@official@Tanstack Query Website](https://tanstack.com/query) diff --git a/src/data/roadmaps/vue/content/teleport-components@SGsd08ZTu4H76s8cfbCKe.md b/src/data/roadmaps/vue/content/teleport-components@SGsd08ZTu4H76s8cfbCKe.md index 7ddda0235..e5872062b 100644 --- a/src/data/roadmaps/vue/content/teleport-components@SGsd08ZTu4H76s8cfbCKe.md +++ b/src/data/roadmaps/vue/content/teleport-components@SGsd08ZTu4H76s8cfbCKe.md @@ -4,4 +4,4 @@ Sometimes we may run into the following scenario: a part of a component's templa Visit the following resources to learn more: -- [@article@Teleport Components](https://vuejs.org/guide/built-ins/teleport.html) +- [@official@Teleport Components](https://vuejs.org/guide/built-ins/teleport.html) diff --git a/src/data/roadmaps/vue/content/templates@VlcYnTHW5d4J_zLYupvu5.md b/src/data/roadmaps/vue/content/templates@VlcYnTHW5d4J_zLYupvu5.md index 0e583f900..8454530b3 100644 --- a/src/data/roadmaps/vue/content/templates@VlcYnTHW5d4J_zLYupvu5.md +++ b/src/data/roadmaps/vue/content/templates@VlcYnTHW5d4J_zLYupvu5.md @@ -4,4 +4,4 @@ Vue uses an HTML-based template syntax that allows you to declaratively bind the Visit the following resources to learn more: -- [@article@Template Syntax](https://vuejs.org/guide/essentials/template-syntax.html) +- [@official@Template Syntax](https://vuejs.org/guide/essentials/template-syntax.html) diff --git a/src/data/roadmaps/vue/content/transition-group@HjzOYjS-7ZEBvElRJ8uN2.md b/src/data/roadmaps/vue/content/transition-group@HjzOYjS-7ZEBvElRJ8uN2.md index cc27fbd3f..66cb71b0d 100644 --- a/src/data/roadmaps/vue/content/transition-group@HjzOYjS-7ZEBvElRJ8uN2.md +++ b/src/data/roadmaps/vue/content/transition-group@HjzOYjS-7ZEBvElRJ8uN2.md @@ -4,4 +4,4 @@ Visit the following resources to learn more: -- [@article@TransitionGroup Component](https://vuejs.org/guide/built-ins/transition-group.html) +- [@official@TransitionGroup Component](https://vuejs.org/guide/built-ins/transition-group.html) diff --git a/src/data/roadmaps/vue/content/transition@SWpWg5J5N9ZfY_DaIigA5.md b/src/data/roadmaps/vue/content/transition@SWpWg5J5N9ZfY_DaIigA5.md index fea06dd9d..cd6888b0e 100644 --- a/src/data/roadmaps/vue/content/transition@SWpWg5J5N9ZfY_DaIigA5.md +++ b/src/data/roadmaps/vue/content/transition@SWpWg5J5N9ZfY_DaIigA5.md @@ -7,4 +7,4 @@ Vue offers two built-in components that can help work with transitions and anima Visit the following resources to learn more: -- [@article@Transition Component](https://vuejs.org/guide/built-ins/transition.html#transition) +- [@official@Transition Component](https://vuejs.org/guide/built-ins/transition.html#transition) diff --git a/src/data/roadmaps/vue/content/v-bind@cuM9q9vYy8JpZPGeBffd1.md b/src/data/roadmaps/vue/content/v-bind@cuM9q9vYy8JpZPGeBffd1.md index 0bbc2fe26..b7ce2b66f 100644 --- a/src/data/roadmaps/vue/content/v-bind@cuM9q9vYy8JpZPGeBffd1.md +++ b/src/data/roadmaps/vue/content/v-bind@cuM9q9vYy8JpZPGeBffd1.md @@ -1,11 +1,10 @@ # v-bind -The `v-bind` directive dynamically binds an HTML attribute to data. +The `v-bind` directive dynamically binds an HTML attribute to data. The shorthand for this directive is `:` -The shorthand for this directive is `:` +## Example -Example: -```vue +```html