mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2026-09-19 09:32:03 +08:00
chore: sync content to repo (#10289)
Co-authored-by: nilbuild <4921183+nilbuild@users.noreply.github.com>
This commit is contained in:
github-actions[bot]
co-authored by
nilbuild
nilbuild
parent
3031197f64
commit
904c9d2743
@@ -5,4 +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)
|
||||
- [@article@How to Use RapidAPI Client with Vue.js](https://rapidapi.com/guides/fetch-api-with-vue)
|
||||
@@ -1,7 +1,7 @@
|
||||
# API Styles
|
||||
|
||||
Though Vue 2 supported many approaches to writing components, only one approach, the "Options API", was built in and accessible without plugins. Vue 3, retains the Options API (OAPI), and adds in the Composition API (CAPI). Composition API itself is actually a part of the Options API, but moves most of the component logic into a setup function. This led to a 3rd approach to writing components being built in called "script/setup", which removes much of the boilerplate from Composition API. These approaches are not mutually exclusive. Each component in your project can use any of these approaches, however for consistency it is recommended to stick primarily to one, and only deviate to one of the others when you have a good reason.
|
||||
API styles refer to the two different ways you can write Vue components: Options API and Composition API. The Options API uses a structured object with predefined properties like `data`, `methods`, and `mounted` to organize component logic. The Composition API, on the other hand, allows you to group related code using functions, providing more flexibility and better reuse of logic across larger applications.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@The Difference Between the Composition API and Options API in Vue](https://fjolt.com/article/vue-composition-api-vs-options-api)
|
||||
- [@article@The Difference Between the Composition API and Options API in Vue](https://fjolt.com/article/vue-composition-api-vs-options-api)
|
||||
@@ -7,5 +7,4 @@ Visit the following resources to learn more:
|
||||
- [@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)
|
||||
- [@video@GraphQL With React Tutorial - Apollo Client](https://www.youtube.com/watch?v=YyUWW04HwKY)
|
||||
@@ -4,4 +4,4 @@ Every application instance exposes a `config` object that contains the configura
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Vue.js Documentation](https://vuejs.org/api/application.html#app-config)
|
||||
- [@official@Vue.js Documentation](https://vuejs.org/api/application.html#app-config)
|
||||
@@ -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:
|
||||
|
||||
- [@official@Async Components](https://vuejs.org/guide/components/async.html)
|
||||
- [@official@Async Components](https://vuejs.org/guide/components/async.html)
|
||||
@@ -4,4 +4,4 @@ Attribute inheritance aka "fallthrough attributes" is a feature of Vue.js that a
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
|
||||
- [@official@Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
|
||||
@@ -5,5 +5,4 @@ Axios is a client HTTP API based on the XMLHttpRequest interface provided by bro
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
- [@article@How to make HTTP requests with Axios](https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#why)
|
||||
@@ -5,4 +5,4 @@ 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 Mobile Apps With Capacitor And Vue.js](https://www.smashingmagazine.com/2018/07/mobile-apps-capacitor-vue-js/)
|
||||
- [@article@Building Mobile Apps With Capacitor And Vue.js](https://www.smashingmagazine.com/2018/07/mobile-apps-capacitor-vue-js/)
|
||||
@@ -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:
|
||||
|
||||
- [@official@Component Registration](https://vuejs.org/guide/components/registration.html)
|
||||
- [@official@Component Registration](https://vuejs.org/guide/components/registration.html)
|
||||
@@ -5,4 +5,4 @@ Components allow us to split the UI into independent and reusable pieces, and th
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Components Basics](https://vuejs.org/guide/essentials/component-basics.html)
|
||||
- [@official@Components in Depth](https://vuejs.org/guide/components/registration.html)
|
||||
- [@official@Components in Depth](https://vuejs.org/guide/components/registration.html)
|
||||
@@ -1,11 +1,10 @@
|
||||
# Composition API
|
||||
|
||||
Vue offers many approaches for how to write components, including the "Composition API", which is most commonly used via "Script Setup". This approach is based around pulling in low level atomic functions used by Vue's reactivity engine. By composing these low level functions together, you can craft your own system for writing components. One feature this allows for is extending reactivity outside of components. This means you can extract your custom functions for reuse in multiple components. When reusing reactive logic, your functions are called "composables".
|
||||
Vue offers many approaches for how to write components, including the "Composition API", which is most commonly used via "Script Setup". This approach is based around pulling in low level atomic functions used by Vue's reactivity engine. By composing these low level functions together, you can craft your own system for writing components. One feature this allows for is extending reactivity outside of components. This means you can extract your custom functions for reuse in multiple components. When reusing reactive logic, your functions are called "composables".
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
- [@article@Vue 3 Composition API](https://www.thisdot.co/blog/vue-3-composition-api-ref-and-reactive)
|
||||
@@ -4,4 +4,4 @@ In-template expressions are very convenient, but they are meant for simple opera
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Computed Properties](https://vuejs.org/guide/essentials/computed.html#computed-properties)
|
||||
- [@official@Computed Properties](https://vuejs.org/guide/essentials/computed.html#computed-properties)
|
||||
@@ -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:
|
||||
|
||||
- [@official@Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html)
|
||||
- [@official@Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html)
|
||||
@@ -2,8 +2,8 @@
|
||||
|
||||
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:
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@opensource@vuejs/create-vue](https://github.com/vuejs/create-vue)
|
||||
- [@official@Quick Start | Vue.js](https://vuejs.org/guide/quick-start.html)
|
||||
- [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)
|
||||
- [@opensource@vuejs/create-vue](https://github.com/vuejs/create-vue)
|
||||
- [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
- [@official@Components](https://vuejs.org/guide/essentials/component-basics.html)
|
||||
@@ -6,5 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
- [@video@Cypress End-to-End Testing](https://www.youtube.com/watch?v=7N63cMKosIE)
|
||||
@@ -4,4 +4,4 @@ Debugging in Vue.js involves identifying and fixing issues in your Vue applicati
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html)
|
||||
- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html)
|
||||
@@ -5,4 +5,4 @@ Directives are special attributes with the `v-` prefix. Vue provides a number of
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Directives Documentation](https://vuejs.org/guide/essentials/template-syntax.html#directives)
|
||||
- [@official@Built-in Directives](https://vuejs.org/api/built-in-directives.html)
|
||||
- [@official@Built-in Directives](https://vuejs.org/api/built-in-directives.html)
|
||||
@@ -5,4 +5,4 @@ Element UI is another Vue.js component library with several built-in components
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Element UI Website](https://element-plus.org/en-US/)
|
||||
- [@official@Getting Started - Element UI](https://element-plus.org/en-US/guide/design.html)
|
||||
- [@official@Getting Started - Element UI](https://element-plus.org/en-US/guide/design.html)
|
||||
@@ -4,4 +4,4 @@ Debugging in Vue.js involves identifying and fixing issues in your Vue applicati
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html)
|
||||
- [@official@Debugging Documentation](https://vuejs.org/v2/cookbook/debugging-in-vscode.html)
|
||||
@@ -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:
|
||||
|
||||
- [@official@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)
|
||||
@@ -5,4 +5,4 @@ In Vue.js, event modifiers are special postfixes that you can add to event handl
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Event Modifiers](https://vuejs.org/guide/essentials/event-handling#event-modifiers)
|
||||
- [@article@Event Modifiers in Vue.js](https://www.freecodecamp.org/news/how-event-handling-works-in-vue-3-guide-for-devs/)
|
||||
- [@article@Event Modifiers in Vue.js](https://www.freecodecamp.org/news/how-event-handling-works-in-vue-3-guide-for-devs/)
|
||||
@@ -5,4 +5,4 @@ As we develop our applications we may need to communicate with the parent compon
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
- [@official@Events in Detail](https://vuejs.org/guide/components/events.html)
|
||||
@@ -5,4 +5,4 @@ The `fetch()` method in JavaScript is used to request to the server and load the
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Fetch - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
|
||||
- [@article@Network Request - Fetch](https://javascript.info/fetch)
|
||||
- [@article@Network Request - Fetch](https://javascript.info/fetch)
|
||||
@@ -4,4 +4,4 @@ FormKit helps build forms faster by simplifying form structure, generation, vali
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Formkit Documentation](https://formkit.com/)
|
||||
- [@official@Formkit Documentation](https://formkit.com/)
|
||||
@@ -5,5 +5,5 @@ You can use the `v-model` directive to create two-way data bindings on form inpu
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@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/)
|
||||
- [@video@Vue JS 3 Tutorial - Form Handling](https://www.youtube.com/watch?v=T-AE-GtSlN4)
|
||||
@@ -5,4 +5,4 @@ Apart from the built-in form-binding support, there are several options availabl
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
- [@article@User Inputs in Vue 3](https://vueschool.io/lessons/user-inputs-vue-devtools-in-vue-3?friend=vuejs)
|
||||
@@ -5,4 +5,4 @@ Global properties allows you to add properties or methods that can be accessed t
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Application API - globalProperties](https://vuejs.org/api/application.html#app-config-globalproperties)
|
||||
- [@article@Vue.js Global Properties](https://blog.logrocket.com/vue-js-globalproperties/)
|
||||
- [@article@Vue.js Global Properties](https://blog.logrocket.com/vue-js-globalproperties/)
|
||||
@@ -5,4 +5,4 @@ In Vue.js, **inline handlers** are defined directly in the template using expres
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Inline Handlers](https://vuejs.org/guide/essentials/event-handling#inline-handlers)
|
||||
- [@official@Method Handlers](https://vuejs.org/guide/essentials/event-handling#method-handlers)
|
||||
- [@official@Method Handlers](https://vuejs.org/guide/essentials/event-handling#method-handlers)
|
||||
@@ -4,4 +4,4 @@ Input bindings are a way to bind user input to a component's data. This allows t
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Input Bindings](https://vuejs.org/guide/essentials/forms)
|
||||
- [@official@Input Bindings](https://vuejs.org/guide/essentials/forms)
|
||||
@@ -4,4 +4,4 @@ Input bindings are a way to bind user input to a component's data. This allows t
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Key Modifiers](https://vuejs.org/guide/essentials/event-handling#key-modifiers)
|
||||
- [@official@Key Modifiers](https://vuejs.org/guide/essentials/event-handling#key-modifiers)
|
||||
@@ -5,5 +5,4 @@ Each Vue component instance goes through a series of initialization steps when i
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
- [@article@The Lifecycles of Vue.js](https://dev.to/amolikvivian/the-lifecycles-of-vue-js-lhh)
|
||||
@@ -5,5 +5,4 @@ Building a mobile application with Vue.js is not impossible. In fact, you can bu
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Comparing Vue.js mobile app development frameworks](https://blog.logrocket.com/comparing-vue-js-mobile-app-development-frameworks/#whyusevuejstobuildmobileapps)
|
||||
- [@article@Native Script + Vue](https://nativescript-vue.org/)
|
||||
- [@feed@Explore top posts about Mobile Development](https://app.daily.dev/tags/mobile?ref=roadmapsh)
|
||||
- [@article@Native Script + Vue](https://nativescript-vue.org/)
|
||||
@@ -4,4 +4,4 @@ Modifiers are special suffixes that can be added to directives (such as v-model
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers)
|
||||
- [@official@Modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers)
|
||||
@@ -5,4 +5,4 @@ Mouse button modifiers are a type of modifier that can be used with event handle
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Mouse Button Modifiers](https://vuejs.org/guide/essentials/event-handling#mouse-button-modifiers)
|
||||
- [@article@Button Modifiers](https://medium.com/evolve-you/vue-3-keyboard-and-mouse-a4866d7d0e8)
|
||||
- [@article@Button Modifiers](https://medium.com/evolve-you/vue-3-keyboard-and-mouse-a4866d7d0e8)
|
||||
@@ -4,9 +4,7 @@ Nuxt.js is a free and open source JavaScript library based on Vue.js, Node.js, W
|
||||
|
||||
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)
|
||||
- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)
|
||||
- [@article@Nuxt.js Fundamentals](https://vueschool.io/courses/nuxtjs-fundamentals)
|
||||
@@ -2,6 +2,6 @@
|
||||
|
||||
Optimizing rendering is crucial for ensuring a smooth and efficient user experience across all your frontend projects. Sluggish webpages can lead to frustration for users, and potentially cause them to entirely abandon your web application. This issue comes up most often in single-page applications (SPAs), where the entirety of your application is loaded within a single webpage, and updates to it are handled dynamically without needing a full reload of the webpage.
|
||||
|
||||
Learn more from the following resources:
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Optimizing Rendering in Vue](https://blog.logrocket.com/optimizing-rendering-vue/)
|
||||
- [@article@Optimizing Rendering in Vue](https://blog.logrocket.com/optimizing-rendering-vue/)
|
||||
@@ -5,4 +5,4 @@ Vue offers many approaches for how to write components, including the Options AP
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@TypeScript with Options API](https://vuejs.org/guide/typescript/options-api.html)
|
||||
- [@official@Options API Documentation](https://vuejs.org/api/#options-api)
|
||||
- [@official@Options API Documentation](https://vuejs.org/api/#options-api)
|
||||
@@ -2,12 +2,9 @@
|
||||
|
||||
Key areas to improve Vue.js performance include lazy loading components to minimize initial load times, optimizing rendering to prevent unnecessary re-renders, implementing efficient state management using modern libraries like Pinia, reducing the bundle size by code splitting and tree shaking, utilizing virtual scrolling for large lists and tables, continuously monitoring performance to detect potential bottlenecks, and minimizing dependencies to decrease overall load.
|
||||
|
||||
Learn more from the following resources:
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@How to Optimize Performance in Vue.js Applications: Beginner to Advanced Guide](https://dev.to/delia_code/how-to-optimize-performance-in-vuejs-applications-beginner-to-advanced-guide-53db)
|
||||
- [@article@Vue Directives Basics](https://vuejs.org/guide/best-practices/performance.html)
|
||||
- [@article@Pinia Documentation](https://pinia.vuejs.org/)
|
||||
- [@article@Webpack Documentation](https://webpack.js.org/)
|
||||
- [@article@Vue Virtual Scroller](https://github.com/Akryum/vue-virtual-scroller)
|
||||
- [@article@Vue Devtools Documentation](https://devtools.vuejs.org/)
|
||||
- [@article@Vue Best Practices](https://vuejs.org/guide/best-practices/overview.html)
|
||||
- [@article@Webpack Documentation](https://webpack.js.org/)
|
||||
@@ -5,4 +5,4 @@ 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:
|
||||
|
||||
- [@official@Pinia Documentation](https://pinia.vuejs.org/)
|
||||
- [@video@Learn Pinia in 30Minutes](https://www.youtube.com/watch?v=JGC7aAC-3y8)
|
||||
- [@video@Learn Pinia in 30Minutes](https://www.youtube.com/watch?v=JGC7aAC-3y8)
|
||||
@@ -5,4 +5,4 @@ Playwright Test was created specifically to accommodate the needs of end-to-end
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Playwright Website](https://playwright.dev/)
|
||||
- [@article@Playwright Tutorial: Learn Basics and Setup](https://www.browserstack.com/guide/playwright-tutorial)
|
||||
- [@article@Playwright Tutorial: Learn Basics and Setup](https://www.browserstack.com/guide/playwright-tutorial)
|
||||
@@ -5,4 +5,4 @@ Plugins are self-contained code that usually add app-level functionality to Vue.
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@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/)
|
||||
- [@article@How to Write Your Own Vue.js Plugin](https://www.linode.com/docs/guides/how-to-write-vue-js-plugins/)
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
If we are building a blog, we will likely need a component representing a blog post. We want all the blog posts to share the same visual layout, but with different content. Such a component won't be useful unless you can pass data to it, such as the title and content of the specific post we want to display. That's where props come in.
|
||||
|
||||
Props are custom attributes you can register on a component.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Props Basics](https://vuejs.org/guide/essentials/component-basics.html#passing-props)
|
||||
- [@official@Props in Depth](https://vuejs.org/guide/components/props.html)
|
||||
- [@official@Props in Depth](https://vuejs.org/guide/components/props.html)
|
||||
@@ -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:
|
||||
|
||||
- [@official@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)
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
- [@video@How to Build an App using Quasar Framework](https://www.youtube.com/watch?v=czJIuHyPPXo)
|
||||
@@ -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:
|
||||
|
||||
- [@official@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)
|
||||
@@ -5,4 +5,4 @@ Routing is an essential concept in Single Page Applications (SPA). When your app
|
||||
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/)
|
||||
- [@official@The Vue Router](https://router.vuejs.org/)
|
||||
@@ -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:
|
||||
|
||||
- [@official@Single File Components](https://vuejs.org/guide/scaling-up/sfc.html)
|
||||
- [@official@Single File Components](https://vuejs.org/guide/scaling-up/sfc.html)
|
||||
@@ -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:
|
||||
|
||||
- [@official@Slots in Vue.js](https://vuejs.org/guide/components/slots.html)
|
||||
- [@official@Slots in Vue.js](https://vuejs.org/guide/components/slots.html)
|
||||
@@ -7,5 +7,4 @@ Visit the following resources to learn more:
|
||||
- [@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/)
|
||||
- [@feed@Explore top posts about Web Development](https://app.daily.dev/tags/webdev?ref=roadmapsh)
|
||||
- [@article@SSG — An 11ty, Vite And JAM Sandwich](https://www.smashingmagazine.com/2021/10/building-ssg-11ty-vite-jam-sandwich/)
|
||||
@@ -7,5 +7,4 @@ Visit the following resources to learn more:
|
||||
- [@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 (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)
|
||||
- [@video@What is Server Side Rendering (SSR) for Web Development?](https://www.youtube.com/watch?v=okvg3MRAPs0)
|
||||
@@ -5,4 +5,4 @@ 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)
|
||||
- [@article@What is State Management?](https://www.techtarget.com/searchapparchitecture/definition/state-management)
|
||||
@@ -7,6 +7,4 @@ Visit the following resources to learn more:
|
||||
- [@official@Tailwind Website](https://tailwindcss.com)
|
||||
- [@video@Tailwind CSS Full Course for Beginners](https://www.youtube.com/watch?v=lCxcTsOHrjo)
|
||||
- [@video@Tailwind CSS Crash Course](https://www.youtube.com/watch?v=UBOj6rqRUME)
|
||||
- [@video@Should You Use Tailwind CSS?](https://www.youtube.com/watch?v=hdGsFpZ0J2E)
|
||||
- [@video@Official Screencasts](https://www.youtube.com/c/TailwindLabs/videos)
|
||||
- [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh)
|
||||
- [@video@Should You Use Tailwind CSS?](https://www.youtube.com/watch?v=hdGsFpZ0J2E)
|
||||
@@ -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@Tanstack Query Website](https://tanstack.com/query)
|
||||
- [@official@Tanstack Query Website](https://tanstack.com/query)
|
||||
@@ -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:
|
||||
|
||||
- [@official@Teleport Components](https://vuejs.org/guide/built-ins/teleport.html)
|
||||
- [@official@Teleport Components](https://vuejs.org/guide/built-ins/teleport.html)
|
||||
@@ -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:
|
||||
|
||||
- [@official@Template Syntax](https://vuejs.org/guide/essentials/template-syntax.html)
|
||||
- [@official@Template Syntax](https://vuejs.org/guide/essentials/template-syntax.html)
|
||||
@@ -4,4 +4,4 @@
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@TransitionGroup Component](https://vuejs.org/guide/built-ins/transition-group.html)
|
||||
- [@official@TransitionGroup Component](https://vuejs.org/guide/built-ins/transition-group.html)
|
||||
@@ -1,10 +1,7 @@
|
||||
# Transition
|
||||
|
||||
Vue offers two built-in components that can help work with transitions and animations in response to changing state:
|
||||
|
||||
- `<Transition>` for applying animations when an element or component is entering and leaving the DOM. This is covered on this page.
|
||||
- `<TransitionGroup>` for applying animations when an element or component is inserted into, removed from, or moved within a `v-for` list. This is covered in the next chapter.
|
||||
Transitions are a built-in mechanism that automatically applies CSS classes to elements or components when they enter or leave the DOM. By wrapping content in a special transition component, you can define specific styles for various stages of the animation process—such as the starting point, the active phase, and the finished state. This system simplifies the process of adding smooth visual effects by managing the timing and cleanup of transition classes automatically.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Transition Component](https://vuejs.org/guide/built-ins/transition.html#transition)
|
||||
- [@official@Transition Component](https://vuejs.org/guide/built-ins/transition.html#transition)
|
||||
@@ -2,19 +2,6 @@
|
||||
|
||||
The `v-bind` directive dynamically binds an HTML attribute to data. The shorthand for this directive is `:`
|
||||
|
||||
## Example
|
||||
Visit the following resources to learn more:
|
||||
|
||||
```html
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const image_url = ref("path/to/image.png")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<img :src="image_url" />
|
||||
</template>
|
||||
```
|
||||
|
||||
Visit the following resources for more information:
|
||||
|
||||
- [@official@v-bind Documentation](https://vuejs.org/api/built-in-directives.html#v-bind)
|
||||
- [@official@v-bind Documentation](https://vuejs.org/api/built-in-directives.html#v-bind)
|
||||
@@ -2,22 +2,6 @@
|
||||
|
||||
The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template. The v-cloak directive remains until the component instance is mounted.
|
||||
|
||||
```html
|
||||
<div v-cloak>
|
||||
{{ message }}
|
||||
</div>
|
||||
```
|
||||
|
||||
Combined with CSS, you can hide elements with v-cloak until they are ready.
|
||||
|
||||
```css
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
The `<div>` will not be visible until the compilation is done.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@v-cloak Documentation](https://vuejs.org/api/built-in-directives.html#v-cloak)
|
||||
- [@official@v-cloak Documentation](https://vuejs.org/api/built-in-directives.html#v-cloak)
|
||||
@@ -4,4 +4,4 @@ This directive is used to add additional conditions to a v-if and v-else block.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@v-else-if Documentation](https://vuejs.org/api/built-in-directives.html#v-else-if)
|
||||
- [@official@v-else-if Documentation](https://vuejs.org/api/built-in-directives.html#v-else-if)
|
||||
@@ -2,7 +2,6 @@
|
||||
|
||||
The `v-else` conditionally renders an element or a template fragment as a function in case the `v-if` does not fulfil the condition.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
Visit the following resources for more information:
|
||||
|
||||
- [@official@v-else Documentation](https://vuejs.org/api/built-in-directives.html#v-else)
|
||||
- [@official@v-else Documentation](https://vuejs.org/api/built-in-directives.html#v-else)
|
||||
@@ -1,25 +1,7 @@
|
||||
# v-for
|
||||
|
||||
The `v-for` directive is used to render an HTML element, a block of elements, or even a component based on an array, an object, or a set number of times.
|
||||
When using this directive it is important to assign a unique key to each item to avoid issues and improve performance. This directive follows the `item in items` syntax.
|
||||
|
||||
## Example
|
||||
|
||||
```html
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const foods = ref([
|
||||
{id: 1, name: "apple"},
|
||||
{id: 2, name: "pear"},
|
||||
{id: 3, name: "pizza"}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p v-for="food in foods" :key="food.id">{{ food.name }}</p>
|
||||
</template>
|
||||
```
|
||||
The `v-for` directive is used to render an HTML element, a block of elements, or even a component based on an array, an object, or a set number of times. When using this directive it is important to assign a unique key to each item to avoid issues and improve performance. This directive follows the `item in items` syntax.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@v-for Documentation](https://vuejs.org/guide/essentials/list#v-for)
|
||||
- [@official@v-for Documentation](https://vuejs.org/guide/essentials/list#v-for)
|
||||
@@ -2,14 +2,6 @@
|
||||
|
||||
The `v-html` directive is similar to the `v-text` directive, but the difference is that `v-html` renders its content as HTML. This means that if you pass an HTML element it will be rendered as an element and not plain text. Since the content is render as HTML, it can pose a security risk if the content contains malicious JavaScript code. For this reason you should never use this directive in combination with user input, unless the input is first properly sanitized.
|
||||
|
||||
## Example
|
||||
|
||||
```html
|
||||
<template>
|
||||
<p v-html="'<h1>Text</h1>'"></p>
|
||||
</template>
|
||||
```
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@v-html Documentation](https://vuejs.org/api/built-in-directives.html#v-html)
|
||||
- [@official@v-html Documentation](https://vuejs.org/api/built-in-directives.html#v-html)
|
||||
@@ -1,13 +1,7 @@
|
||||
# v-if
|
||||
|
||||
Conditionally render an element or a template fragment based on the truthy-ness of the expression value. When a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.
|
||||
|
||||
## Example
|
||||
|
||||
```html
|
||||
<h1 v-if="awesome">Vue is awesome!</h1>
|
||||
```
|
||||
v-if is a directive used to conditionally render an element or a block based on the truthiness of an expression. When the expression evaluates to true, the element is added to the Document Object Model (DOM), and when it evaluates to false, the element is removed. This directive can also be paired with v-else-if and v-else to handle multiple conditional branches within a template.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@v-if Documentation](https://vuejs.org/api/built-in-directives.html#v-if)
|
||||
- [@official@v-if Documentation](https://vuejs.org/api/built-in-directives.html#v-if)
|
||||
@@ -1,5 +1,7 @@
|
||||
# v-model
|
||||
|
||||
The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as `<input>`, `<textarea>`, and `<select>`. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.
|
||||
v-model is a directive that creates a two-way data binding between a form input element and a piece of reactive state. It automatically syncs the value of the input with the corresponding data property, ensuring that whenever the user types into an input field, the underlying state updates, and whenever the state changes programmatically, the input display updates to match.
|
||||
|
||||
- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
|
||||
@@ -1,5 +1,7 @@
|
||||
# v-model
|
||||
|
||||
The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as `<input>`, `<textarea>`, and `<select>`. This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.
|
||||
v-model is a directive that creates a two-way data binding between a form input element and a component's state. It automatically synchronizes the value shown in the input field with the corresponding data property in your script, ensuring that updates in the UI reflect in the application logic and vice versa. It serves as a shorthand for binding the value property and listening for input events, simplifying the management of user-provided data.
|
||||
|
||||
- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
|
||||
@@ -4,4 +4,4 @@ v-model is a directive that allows you to create two-way data bindings on form i
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Vue.js Guide](https://vuejs.org/guide/components/v-model.html#component-v-model)
|
||||
- [@official@Vue.js Guide](https://vuejs.org/guide/components/v-model.html#component-v-model)
|
||||
@@ -4,4 +4,4 @@ The v-on directive is placed on an element to attach an event listener. To attac
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@v-on Documentation](https://vuejs.org/api/built-in-directives.html#v-on)
|
||||
- [@official@v-on Documentation](https://vuejs.org/api/built-in-directives.html#v-on)
|
||||
@@ -1,23 +1,7 @@
|
||||
# v-once
|
||||
|
||||
The `v-once` directive makes an HTML element render only once, skipping every future update.
|
||||
|
||||
## Example
|
||||
|
||||
```html
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const input = ref("Some Text");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input v-model="input">
|
||||
<p v-once>{{ input }}</p>
|
||||
</template>
|
||||
```
|
||||
|
||||
In this example the **p** element will not change its text even if the input variable is changed through the **input** element.
|
||||
v-once is a built-in directive used to render an element or component only once and skip future updates during subsequent re-renders. Once the initial content is rendered, the data bindings are removed, meaning any changes to the associated data will not trigger updates to that specific part of the DOM. This can be useful for optimizing performance when dealing with static content that does not need to change after the initial load.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@v-once Documentation](https://vuejs.org/api/built-in-directives.html#v-once)
|
||||
- [@official@v-once Documentation](https://vuejs.org/api/built-in-directives.html#v-once)
|
||||
@@ -1,22 +1,7 @@
|
||||
# v-pre
|
||||
|
||||
The `v-pre` directive makes an element render its content as-is, skipping its compilation. The most common use case is when displaying raw mustache syntax.
|
||||
|
||||
## Example
|
||||
|
||||
```html
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const text = ref("Some Text")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p v-pre >{{ text }}</p>
|
||||
</template>
|
||||
```
|
||||
|
||||
The **p** element will display: `{{ text }}` and not `Some Text` because the compilation is skipped.
|
||||
`v-pre` is a directive used to tell Vue to skip the compilation process for a specific element and all of its children. By using this directive, any mustache-style syntax or Vue-specific expressions inside the element are displayed exactly as they are written in the source code rather than being processed by the framework. This is typically useful when displaying raw code snippets or large chunks of static content that do not require data binding.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@v-pre Documentation](https://vuejs.org/api/built-in-directives.html#v-pre)
|
||||
- [@official@v-pre Documentation](https://vuejs.org/api/built-in-directives.html#v-pre)
|
||||
@@ -4,4 +4,4 @@
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Vue Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html#v-show)
|
||||
- [@official@Vue Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html#v-show)
|
||||
@@ -1,24 +1,7 @@
|
||||
# v-slot
|
||||
|
||||
The v-slot directive to define slots in components, allowing you to pass and render content dynamically inside a component.
|
||||
|
||||
For named slots, you use v-slot with a specific slot name. This lets you pass different content to different parts of a component:
|
||||
|
||||
```html
|
||||
<template>
|
||||
<custom-component>
|
||||
<template v-slot:header>
|
||||
<h1>Header Content</h1>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<p>Footer Content</p>
|
||||
</template>
|
||||
</custom-component>
|
||||
</template>
|
||||
```
|
||||
|
||||
The shorthand for `v-slot` is `#`, for example `v-slot:header` becomes `#header`.
|
||||
The v-slot directive to define slots in components, allowing you to pass and render content dynamically inside a component. For named slots, you use v-slot with a specific slot name. This lets you pass different content to different parts of a component.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@v-slot documentation](https://vuejs.org/api/built-in-directives.html#v-slot)
|
||||
- [@official@v-slot documentation](https://vuejs.org/api/built-in-directives.html#v-slot)
|
||||
@@ -1,16 +1,7 @@
|
||||
# v-text
|
||||
|
||||
The `v-text` directive is used to set the textContent property of an element. It's important to note that when using this directive it will overwrite the HTML content inside the element.
|
||||
The expected input is a string, so it's important to wrap any text in single quotes.
|
||||
|
||||
## Example
|
||||
|
||||
```html
|
||||
<template>
|
||||
<p v-text="'I am some text'"></p>
|
||||
</template>
|
||||
```
|
||||
The `v-text` directive is used to set the textContent property of an element. It's important to note that when using this directive it will overwrite the HTML content inside the element. The expected input is a string, so it's important to wrap any text in single quotes.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@v-text Documentation](https://vuejs.org/api/built-in-directives.html#v-text)
|
||||
- [@official@v-text Documentation](https://vuejs.org/api/built-in-directives.html#v-text)
|
||||
@@ -1,8 +1,8 @@
|
||||
# Vee validate
|
||||
# VeeValidate
|
||||
|
||||
OpenSource plugin to handle form validations in Vue.js
|
||||
VeeValidate is a form validation library for Vue that allows you to handle input validation, error messages, and form state management with ease. It provides a set of components and composition functions that integrate directly into your templates, making it straightforward to define rules for your inputs and display reactive feedback to the user based on their interactions.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@opensource@logarem/vee-validate](https://github.com/logaretm/vee-validate)
|
||||
- [@official@Vee Website: Vee Validate](https://vee-validate.logaretm.com/v4/)
|
||||
- [@opensource@logarem/vee-validate](https://github.com/logaretm/vee-validate)
|
||||
@@ -4,4 +4,4 @@ Vitepress is a static site generator that is built on top of Vite. It is a light
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Vitepress Website](https://vitepress.dev/)
|
||||
- [@official@Vitepress Website](https://vitepress.dev/)
|
||||
@@ -5,4 +5,4 @@ Vitest is a fast Vite-native unit test framework with out-of-box ESM and TypeScr
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Vitest Website](https://vitest.dev/)
|
||||
- [@video@Testing with Vitest](https://www.youtube.com/watch?v=cM_AeQHzlGg)
|
||||
- [@video@Testing with Vitest](https://www.youtube.com/watch?v=cM_AeQHzlGg)
|
||||
@@ -5,5 +5,4 @@ Vue Router is the official router for Vue.js which allows creating static/dynami
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@The Vue Router](https://router.vuejs.org/)
|
||||
- [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)
|
||||
- [@video@The Vue Router](https://www.youtube.com/watch?v=juocv4AtrHo)
|
||||
- [@video@The Vue Router](https://www.youtube.com/watch?v=juocv4AtrHo)
|
||||
@@ -4,5 +4,4 @@ The Vue Testing Library is a very lightweight solution for testing Vue component
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Getting Started with Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro/)
|
||||
- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)
|
||||
- [@official@Getting Started with Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro/)
|
||||
@@ -1,8 +1,8 @@
|
||||
# Vuelidate
|
||||
|
||||
Simple, lightweight model-based validation for Vue.js.
|
||||
Vuelidate is a lightweight, model-based validation library for Vue applications that uses a decoupled approach to handle form validation. It allows you to define validation rules as simple JavaScript objects, which are then mapped to your component's data properties to track their validity status. This design keeps your template clean while providing granular control over error states, dirty fields, and custom validation logic without forcing specific UI patterns on your forms.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Vuelidate Website](https://vuelidate.js.org/)
|
||||
- [@opensource@vuelidate/vuelidate](https://github.com/vuelidate/vuelidate)
|
||||
- [@opensource@vuelidate/vuelidate](https://github.com/vuelidate/vuelidate)
|
||||
@@ -6,5 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Vuetify Website](https://vuetifyjs.com/en/)
|
||||
- [@official@Getting Started with Vuetify](https://vuetifyjs.com/en/getting-started/installation/)
|
||||
- [@feed@Explore top posts about Vue.js](https://app.daily.dev/tags/vuejs?ref=roadmapsh)
|
||||
- [@video@Vuetify: Create an App with Vue JS - in 30 MINUTES!](https://www.youtube.com/watch?v=CjXgoYo86yY)
|
||||
- [@video@Vuetify: Create an App with Vue JS - in 30 MINUTES!](https://www.youtube.com/watch?v=CjXgoYo86yY)
|
||||
@@ -4,4 +4,4 @@ VueUse is a collection of utility functions based on Composition API. It has ove
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@VueUse](https://vueuse.org/)
|
||||
- [@official@VueUse](https://vueuse.org/)
|
||||
@@ -4,4 +4,4 @@ Computed properties allow us to declaratively compute derived values. However, t
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Watchers in Vue.js](https://vuejs.org/guide/essentials/watchers.html)
|
||||
- [@official@Watchers in Vue.js](https://vuejs.org/guide/essentials/watchers.html)
|
||||
Reference in New Issue
Block a user