From 37bf6713b40a9ea0eb0d677a53e0543ef74f4268 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 9 Aug 2022 23:41:44 +0400 Subject: [PATCH] Add ecosystem content for vue.js --- .../content/102-ecosystem/103-ssg/100-gridsome.md | 8 +++++++- .../content/102-ecosystem/103-ssg/101-vuepress.md | 9 ++++++++- .../105-vue/content/102-ecosystem/103-ssg/readme.md | 10 +++++++++- .../102-ecosystem/104-state-management/100-pinia.md | 7 ++++++- .../102-ecosystem/104-state-management/readme.md | 7 ++++++- .../102-ecosystem/105-mobile-apps/100-capacitor.md | 10 +++++++++- .../content/102-ecosystem/105-mobile-apps/readme.md | 7 ++++++- .../102-ecosystem/106-api-calls/100-apollo.md | 10 +++++++++- .../102-ecosystem/106-api-calls/101-vue-relay.md | 8 +++++++- .../content/102-ecosystem/106-api-calls/102-axios.md | 12 +++++++++++- .../102-ecosystem/106-api-calls/103-unfetch.md | 9 ++++++++- .../102-ecosystem/106-api-calls/104-superagent.md | 9 ++++++++- .../content/102-ecosystem/106-api-calls/readme.md | 8 +++++++- .../105-vue/content/102-ecosystem/107-jest.md | 8 +++++++- .../content/102-ecosystem/108-vue-testing-library.md | 7 ++++++- .../105-vue/content/102-ecosystem/109-cypress.md | 9 ++++++++- .../content/102-ecosystem/110-tailwind-css.md | 11 ++++++++++- .../105-vue/content/102-ecosystem/111-vuetify.md | 8 +++++++- .../105-vue/content/102-ecosystem/112-element-ui.md | 10 +++++++++- 19 files changed, 148 insertions(+), 19 deletions(-) diff --git a/content/roadmaps/105-vue/content/102-ecosystem/103-ssg/100-gridsome.md b/content/roadmaps/105-vue/content/102-ecosystem/103-ssg/100-gridsome.md index a524ebb4b..210a1a9f5 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/103-ssg/100-gridsome.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/103-ssg/100-gridsome.md @@ -1 +1,7 @@ -# Gridsome \ No newline at end of file +# Gridsome + +Gridsome is a Vue.js powered Jamstack framework for building static generated websites & apps that are fast by default. + +Free Content +Gridsome Website +Gridsome Documentation diff --git a/content/roadmaps/105-vue/content/102-ecosystem/103-ssg/101-vuepress.md b/content/roadmaps/105-vue/content/102-ecosystem/103-ssg/101-vuepress.md index 7600abf83..1747915aa 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/103-ssg/101-vuepress.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/103-ssg/101-vuepress.md @@ -1 +1,8 @@ -# Vuepress \ No newline at end of file +# Vuepress + +VuePress is composed of two parts: a minimalistic static site generator (opens new window)with a Vue-powered theming system and Plugin API, and a default theme optimized for writing technical documentation. It was created to support the documentation needs of Vue’s own sub projects. + +Free Resources +Official Website +Official Docs for Getting Started +Introduction to VuePress diff --git a/content/roadmaps/105-vue/content/102-ecosystem/103-ssg/readme.md b/content/roadmaps/105-vue/content/102-ecosystem/103-ssg/readme.md index fdf447848..427e113d8 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/103-ssg/readme.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/103-ssg/readme.md @@ -1 +1,9 @@ -# Ssg \ No newline at end of file +# Static Site Generators + +A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time. Because these HTML pages are pre-built, they can load very quickly in users' browsers. + +Free Content +What is a static site generator? +Next.js SSG +Gatsby SSG +SSG — An 11ty, Vite And JAM Sandwich diff --git a/content/roadmaps/105-vue/content/102-ecosystem/104-state-management/100-pinia.md b/content/roadmaps/105-vue/content/102-ecosystem/104-state-management/100-pinia.md index cdc6593a3..7c9d35c16 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/104-state-management/100-pinia.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/104-state-management/100-pinia.md @@ -1 +1,6 @@ -# Pinia \ No newline at end of file +# Pinia + +Pinia is a store library for Vue.js, and can be used in Vue 2 and Vue 3, with the same API, except in SSR and its installation. It allows state sharing between pages and components around the application. As the documentation says, it is extensible, intuitive (by organization), has devtools support (in Vue.js devtools), inferred typed state even in javascript and more. In Pinia you can access, mutate, replace, use getters that works like computed, use actions, etc. The library is recommended by the official Vue.js documentation. + +Free Content +Official Documentation diff --git a/content/roadmaps/105-vue/content/102-ecosystem/104-state-management/readme.md b/content/roadmaps/105-vue/content/102-ecosystem/104-state-management/readme.md index c9ab9d07b..9a03c3eb3 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/104-state-management/readme.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/104-state-management/readme.md @@ -1 +1,6 @@ -# State management \ No newline at end of file +# State Management + +Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs -- saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session. + +Free Content +What is State Management? diff --git a/content/roadmaps/105-vue/content/102-ecosystem/105-mobile-apps/100-capacitor.md b/content/roadmaps/105-vue/content/102-ecosystem/105-mobile-apps/100-capacitor.md index c7e468a91..f58a5e3b5 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/105-mobile-apps/100-capacitor.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/105-mobile-apps/100-capacitor.md @@ -1 +1,9 @@ -# Capacitor \ No newline at end of file +# Capacitor + +Since Vue.js is a web framework, it does not natively support mobile app development. So how do we get access to native mobile features such as the camera and geolocation? Ionic has an official native runtime called Capacitor. With Capacitor’s plugin, you can access the native API of the device your app is running on and build truly native mobile application with Ionic Vue. + +Free Content +Building cross-platform apps with Capacitor and Vue.js +Building Mobile Apps With Capacitor And Vue.js + + diff --git a/content/roadmaps/105-vue/content/102-ecosystem/105-mobile-apps/readme.md b/content/roadmaps/105-vue/content/102-ecosystem/105-mobile-apps/readme.md index 02f7f8bf2..2a5f8b067 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/105-mobile-apps/readme.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/105-mobile-apps/readme.md @@ -1 +1,6 @@ -# Mobile apps \ No newline at end of file +# Mobile Apps + +Building a mobile application with Vue.js is not impossible. In fact, you can build production-ready apps that look and feel like native mobile apps with Vue.js. + +Free Content +Comparing Vue.js mobile app development frameworks diff --git a/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/100-apollo.md b/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/100-apollo.md index 845aec91d..7d1fa06ba 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/100-apollo.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/100-apollo.md @@ -1 +1,9 @@ -# Apollo \ No newline at end of file +# Apollo + +Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services. + +Free Content +Apollo Website +Official Docs +Official YouTube Channel +GraphQL With React Tutorial - Apollo Client diff --git a/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/101-vue-relay.md b/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/101-vue-relay.md index 3afe69127..55722ec2e 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/101-vue-relay.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/101-vue-relay.md @@ -1 +1,7 @@ -# Vue relay \ No newline at end of file +# Relay Modern + +Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions. + +Free Content +Official Website +Introduction to Relay modern diff --git a/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/102-axios.md b/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/102-axios.md index fd41e81cf..82d947b3d 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/102-axios.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/102-axios.md @@ -1 +1,11 @@ -# Axios \ No newline at end of file +# 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. + +Free Content +Axios Getting Started +How to make HTTP requests with Axios + + diff --git a/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/103-unfetch.md b/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/103-unfetch.md index 417376dc6..fdbfd8934 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/103-unfetch.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/103-unfetch.md @@ -1 +1,8 @@ -# Unfetch \ No newline at end of file +# Unfetch + +Unfetch is the bare minimum 500b [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) polyfill. + +Free Content +Official GitHub Repository + + diff --git a/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/104-superagent.md b/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/104-superagent.md index 4e52ae96e..654bd00ad 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/104-superagent.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/104-superagent.md @@ -1 +1,8 @@ -# Superagent \ No newline at end of file +# Superagent + +Small progressive client-side HTTP request library, and Node.js module with the same API, supporting many high-level HTTP client features + +Free Content +Official Website +GitHub Repository + diff --git a/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/readme.md b/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/readme.md index 98983b8af..a452e1de6 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/readme.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/106-api-calls/readme.md @@ -1 +1,7 @@ -# Api calls \ No newline at end of file +# API Calls + +There are several options available to make API calls from your Vue.js applications. + +Free Content +How To Make API calls in Vue.JS Applications + diff --git a/content/roadmaps/105-vue/content/102-ecosystem/107-jest.md b/content/roadmaps/105-vue/content/102-ecosystem/107-jest.md index 535d60df1..c9312e1b3 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/107-jest.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/107-jest.md @@ -1 +1,7 @@ -# Jest \ No newline at end of file +# Jest + +Jest is a delightful JavaScript Testing Framework with a focus on simplicity. +It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more! + +Free Content +Jest Website diff --git a/content/roadmaps/105-vue/content/102-ecosystem/108-vue-testing-library.md b/content/roadmaps/105-vue/content/102-ecosystem/108-vue-testing-library.md index 67ed1ace6..f934d33b0 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/108-vue-testing-library.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/108-vue-testing-library.md @@ -1 +1,6 @@ -# Vue testing library \ No newline at end of file +# Vue Testing Library + +The Vue Testing Library is a very lightweight solution for testing Vue components. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you. + +Free Content +Geting Started with Vue Testing Library diff --git a/content/roadmaps/105-vue/content/102-ecosystem/109-cypress.md b/content/roadmaps/105-vue/content/102-ecosystem/109-cypress.md index c881065db..704ea86a7 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/109-cypress.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/109-cypress.md @@ -1 +1,8 @@ -# Cypress \ No newline at end of file +# Cypress + +Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework. + +Free Resources +Official Website +Official Documentation +Cypress End-to-End Testing diff --git a/content/roadmaps/105-vue/content/102-ecosystem/110-tailwind-css.md b/content/roadmaps/105-vue/content/102-ecosystem/110-tailwind-css.md index d2015b322..ba7135d1c 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/110-tailwind-css.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/110-tailwind-css.md @@ -1 +1,10 @@ -# Tailwind css \ No newline at end of file +# Tailwind CSS + +CSS Framework that provides atomic CSS classes to help you style components e.g. `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup. + +Free Content +Tailwind Website +Official Screencasts +Should You Use Tailwind CSS? +Tailwind CSS: An Introduction +Tailwind CSS Crash Course diff --git a/content/roadmaps/105-vue/content/102-ecosystem/111-vuetify.md b/content/roadmaps/105-vue/content/102-ecosystem/111-vuetify.md index 1122f69b0..98e85f07a 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/111-vuetify.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/111-vuetify.md @@ -1 +1,7 @@ -# Vuetify \ No newline at end of file +# Vuetify + +Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips. + +Free Content +Official Website +Getting started with Vuetify diff --git a/content/roadmaps/105-vue/content/102-ecosystem/112-element-ui.md b/content/roadmaps/105-vue/content/102-ecosystem/112-element-ui.md index 6069eb14d..baebfeee3 100644 --- a/content/roadmaps/105-vue/content/102-ecosystem/112-element-ui.md +++ b/content/roadmaps/105-vue/content/102-ecosystem/112-element-ui.md @@ -1 +1,9 @@ -# Element ui \ No newline at end of file +# Element UI + +Element UI is another Vue.js component library with several built-in components to style your Vue.js applications. + +Free Content +Official Website +Official Getting Started + +