Resources for Web Developers in 2021

***Note: RxJS imports have changed since the publication of this course, these changes to RxJS have been reflected in the code examples underneath each lesson. The concepts being taught on RxJS are still applicable.***

Vue.js is an amazing framework that can easily update and reflect user input using templates and data-binding. But there are many scenarios where complex asynchronous behaviors (like loading data, handling "pending" states, timeouts, etc) are solved much easier by leveraging the streaming capabilities of RxJS. This course covers how to setup and use the features of "vue-rx" to enable streams within your templates and easily solve complex scenarios.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Build Async Vue.js Apps with RxJS

Progressive Web Apps are just Web pages, but with superpowers.  They load under uncertain network conditions, even offline. They’re fast and engaging, providing the best user experience. They can be installed on your smartphone if the browser supports it, feeling like a native app.

In this course I’m gonna show you how to take an existing Single Page App made in Vue.js and pragmatically convert it to a Progressive Web App by creating a web manifest, then it goes through caching static assets, external resources and streams using service workers, applying code-splitting and lazy loading, notifying new versions of the app or wether is online or offline, understanding the preload and precache directives, finishing up by showing how to audit a Progressive Web App.

Offline-First Progressive Web Apps (PWA) in Vue.js

Vue is known for being super easy to pick up and quickly build great applications using the built-in template bindings and directives. As your application grows in complexity, you'll need finer control of your components.

In this course, we’ll define where content of a component should land when you define the content inside of a parent component with Vue slots and manage that relationship with slot-scope. We’ll continue with dynamic and async Vue components as well as use JSX inside Vue for complete JavaScript control of your components. 

This course provides an overview of Advanced Vue.js Components with quick demonstrations on how to leverage Vue Component patterns.

Advanced Fine-Grained Control of Vue.js Components

In [Use TypeScript to Develop Vue.js Web Applications](https://egghead.io/courses/use-typescript-to-develop-vue-js-web-applications) we’ve seen how TypeScript Vue apps development by creating class based components and using decorators.

This course will extend it, showing you how you can use Vuex with TypeScript in order to manage the state of your Vue app. We’ll see how to type-safe your store, organize the state in modules, modify it using mutations and actions and write Vuex plugins, all by creating a beer shop app throughout the course.

Vue.js State Management with Vuex and TypeScript

This course walks you through the steps of creating a News web app using Vue.js and the Nuxt framework. You will learn how to create dynamic pages for each section of your application and load, store, display, filter, and style the data. Then end result will be a News app with multiple category pages, comments for each section, and user pages.

Create a News App with Vue.js and Nuxt

TypeScript is a powerful JavaScript superset which brings you first-class static type-checking along with latest ECMA Script features. Vue is one of the most modern libraries for managing the view layer.

Angular has fully adopted TypeScript as its language, and React has broad support for it. But, what about Vue?

This course will show how to take full advantage of TypeScript static typing on Vue apps by using class based components, typing directives and using decorators.

Use TypeScript to Develop Vue.js Web Applications

Vue.js has a first-class ecosystem to help construct Vue.js apps. This includes Nuxt.js which enables server-rendered applications and a page-based approach. 

This course will start with an empty app and walk through how to use Vue.js for building the app, Nuxt.js for organizing the app, and Vuex for managing state.

Build a Server Rendered Vue.js App with Nuxt and Vuex

Vue is a "progressive framework for building user interfaces." Its core library is designed to be fast and flexible and is only focused on the view layer.

In this course, you'll gain a basic understanding on how to construct components and nested components and see how Vue reactively keeps the DOM up to date when data is changed. You should get a taste of what Vue has to offer and gain a better understanding of how you can use it for your own application development.

Develop Basic Web Apps with Vue.js

Just like in the command line, you can pipe a property through a filter to get a desired result. You can even chain them together!

Create Filters in Vue.js

You can add `computed` properties to a component to calculate a property on the fly. The benefit of this over invoking a `method` is that computed properties are cached based on their dependencies.

Use Vue.js Component Computed Properties

Use `watchers` to keep an eye on your data. Watchers are methods that are invoked when the specified attribute changes. They are useful when you want to perform asynchronous operations in response to changing data. 

Use Vue.js Watchers to Respond to Async Updates

Use `v-bind:class` and `v-bind:style` to compute html classes and inline styles from component data. Vue.js will automatically add vendor prefixes when using `v-bind:style`.

Update Attributes, Classes and Styles in Vue.js with v-bind

You can use `v-if` and `v-else` to display content based on assertions on your data. Similarly, `v-show` can be used to render the content, but hide it with css. `v-if` can also be used on an invisible wrapper `<template>` element. 

Conditionally Render DOM Elements in Vue.js 

`v-on` can be used to handle interaction with elements in your template. Modifiers like `stop` and `prevent` can be used in place to `preventDefault()` and `stopPropagation`. Vue.js can also capture key bindings such as `v-on:keyup.enter` and `v-on:keyup.13`.

Handle DOM Events in Vue.js with v-on

Use `v-model` to create 2-way data binding. You can render dynamic options in a select element and bind them to their data. Use `v-bind` on inputs to use dynamic properties on the Vue instance. Adding modifiers like `.lazy`, `.number` and `.trim` allow us to trim our methods and let Vue take care of things like trimming white space.

Bind Values to Input Fields in Vue.js

By building components, you can extend basic HTML elements and reuse encapsulated code. Most options that are passed into a Vue constructor can be passed into a component. Each instance of a component has an isolated scope. Data can only be passed one direction and it  must be from parent to child using `props`. To communicate with the parent element, use the `$emit` method. 

Build Reusable Vue.js Components

You can dynamically switch between components in a template by using the reserved `<component>` element and dynamically bind to its `is` attribute. By using `<keep-alive>` you can tell Vue to keep the component in memory.

Dynamic Vue.js Components with the component element

The Vue-CLI helps you to quickly and easily setup new Vue projects. Nuxt.js is a library that helps you build server-rendered Vue.js applications. This lesson shows you how to use the nuxt/starter template with the Vue-CLI to quickly start a new project.

Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

Most applications require state to be shared across the application. In the case of Nuxt, you'll share state across pages. Nuxt integrates easily with Vuex by simply adding JavaScript files in the `store` directory. This lesson walks you through setting up a basic store and using it in your template

Manage Vue.js State with Vuex and Nuxt

You commit changes to state in Vuex using defined `mutations`. You can easily access these state mutations in your template using `mapMutations`. This lesson shows you have to wire together your Vue.js template with your Vuex store using mutations and mapMutations.

Update Vuex State with Mutations and MapMutations in Vue.js

You add array of todos to the store simply by adding them to the `state` defined in your `store/index.js` file. You can access the array of todos using `mapState` then loop through and display them with `v-for`. This lesson walks you through the process of setting up todos in Vuex and displaying them in your Vue.js template.

Topics

Instructors

Content Type

Free or Pro