Kamran Ahmed
2 years ago
parent
4b1fc37946
commit
37bf6713b4
19 changed files with 148 additions and 19 deletions
@ -1 +1,7 @@ |
||||
# Gridsome |
||||
# Gridsome |
||||
|
||||
Gridsome is a Vue.js powered Jamstack framework for building static generated websites & apps that are fast by default. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://gridsome.org/'>Gridsome Website</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Docs' href='https://gridsome.org/docs/'>Gridsome Documentation</BadgeLink> |
||||
|
||||
@ -1 +1,8 @@ |
||||
# Vuepress |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Website' href='https://vuepress.vuejs.org/'>Official Website</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Docs' href='https://vuepress.vuejs.org/guide/getting-started.html'>Official Docs for Getting Started</BadgeLink> |
||||
<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=lIv1ItUzktc'>Introduction to VuePress</BadgeLink> |
||||
|
||||
@ -1 +1,6 @@ |
||||
# Pinia |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://pinia.vuejs.org/'>Official Documentation</BadgeLink> |
||||
|
||||
@ -1 +1,6 @@ |
||||
# State management |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.techtarget.com/searchapparchitecture/definition/state-management'>What is State Management?</BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# Capacitor |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/building-cross-platform-apps-with-capacitor-and-vue-js/'>Building cross-platform apps with Capacitor and Vue.js</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2018/07/mobile-apps-capacitor-vue-js/'>Building Mobile Apps With Capacitor And Vue.js</BadgeLink> |
||||
|
||||
|
||||
|
||||
@ -1 +1,6 @@ |
||||
# Mobile apps |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/comparing-vue-js-mobile-app-development-frameworks/#whyusevuejstobuildmobileapps'>Comparing Vue.js mobile app development frameworks</BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# Apollo |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.apollographql.com'>Apollo Website</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.apollographql.com/docs/'>Official Docs</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Watch' href='https://www.youtube.com/c/ApolloGraphQL/'>Official YouTube Channel</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=YyUWW04HwKY'>GraphQL With React Tutorial - Apollo Client</BadgeLink> |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Vue relay |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://relay.dev/'>Official Website</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://relay.dev/docs/'>Introduction to Relay modern</BadgeLink> |
||||
|
||||
@ -1 +1,11 @@ |
||||
# Axios |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://axios-http.com/docs/intro'>Axios Getting Started</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#why'>How to make HTTP requests with Axios</BadgeLink> |
||||
|
||||
|
||||
|
||||
@ -1 +1,8 @@ |
||||
# Unfetch |
||||
# Unfetch |
||||
|
||||
Unfetch is the bare minimum 500b [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) polyfill. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/developit/unfetch'>Official GitHub Repository</BadgeLink> |
||||
|
||||
|
||||
|
||||
@ -1 +1,8 @@ |
||||
# Superagent |
||||
# Superagent |
||||
|
||||
Small progressive client-side HTTP request library, and Node.js module with the same API, supporting many high-level HTTP client features |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://visionmedia.github.io/superagent/'>Official Website</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/visionmedia/superagent'>GitHub Repository</BadgeLink> |
||||
|
||||
|
||||
@ -1 +1,7 @@ |
||||
# Api calls |
||||
# API Calls |
||||
|
||||
There are several options available to make API calls from your Vue.js applications. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/bb-tutorials-and-thoughts/how-to-make-api-calls-in-vue-js-applications-43e017d4dc86'>How To Make API calls in Vue.JS Applications</BadgeLink> |
||||
|
||||
|
||||
@ -1 +1,7 @@ |
||||
# Jest |
||||
# 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! |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://jestjs.io/'>Jest Website</BadgeLink> |
||||
|
||||
@ -1 +1,6 @@ |
||||
# Vue testing library |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Getting Started' href='https://testing-library.com/docs/vue-testing-library/intro/'>Geting Started with Vue Testing Library</BadgeLink> |
||||
|
||||
@ -1 +1,8 @@ |
||||
# Cypress |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Website' href='https://www.cypress.io/'>Official Website</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Docs' href='https://docs.cypress.io/guides/overview/why-cypress#Other'>Official Documentation</BadgeLink> |
||||
<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=7N63cMKosIE'>Cypress End-to-End Testing</BadgeLink> |
||||
|
||||
@ -1 +1,10 @@ |
||||
# Tailwind css |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://tailwindcss.com'>Tailwind Website</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='YouTube Channel' href='https://www.youtube.com/c/TailwindLabs/videos'>Official Screencasts</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=hdGsFpZ0J2E'>Should You Use Tailwind CSS?</BadgeLink> |
||||
<BadgeLink badgeText='Read' href='https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction'>Tailwind CSS: An Introduction</BadgeLink> |
||||
<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=UBOj6rqRUME'>Tailwind CSS Crash Course</BadgeLink> |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Vuetify |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://vuetifyjs.com/en/'>Official Website</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Getting Started' href='https://vuetifyjs.com/en/getting-started/installation/'>Getting started with Vuetify</BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# Element ui |
||||
# Element UI |
||||
|
||||
Element UI is another Vue.js component library with several built-in components to style your Vue.js applications. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://element-plus.org/en-US/'>Official Website</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Getting Started' href='https://element-plus.org/en-US/guide/design.html'>Official Getting Started</BadgeLink> |
||||
|
||||
|
||||
|
||||
Loading…
Reference in new issue