Learn Chai, Nuxt and Ruby

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.

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.

Create a News App with Vue.js and Nuxt

When you are first building your blog site, it can be difficult to choose what content management system you want to use, and choosing a new framework can be daunting. They can be overwhelming and have a large learning curve.

Open up your knowledge of a powerful Nuxt module with Nuxt Content! Nuxt has a low barrier of entry and you don't have to fight with a content management system or API keys. 

In this course, you will learn how to create your own blog with just Nuxt and a folder of markdown files. Ben will take you from creating your Nuxt project from scratch all the way to deploying your digital garden on Netlify. 

Ben Hong is one of the core team members over at Vue.js and has developed this course to give you a concrete understanding of Nuxt Content and how to build your blog efficiently. 

Build a Digital Garden with Nuxt and Nuxt Content Module

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

rails

Expanding on [Part 1](https://egghead.io/lessons/angularjs-rails-todo-api-part-1), this lesson will look at how to bootstrap AngularJS in a rails application as part of the asset pipeline. With Angular available, you'll see how to communicate with the Rails API using $resource.

Rails Todo API Part 2

Before each page loads, Nuxt supports pre-fetching data to render what you need on the server. This lesson walks you through using Nuxt's `fetch` to load data then save it in the Vuex store.

Load Data from APIs with Nuxt and Vuex

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'll notice soon after working with Nuxt that you'll begin to see your styles flash in during each page load. This is due to the development mode of Nuxt where it injects the styles into the page after the initial page render. You can rest assured that when you use `nuxt build`, your styles will render before the page loads.

Understand the Flash of Unstyled Content in Nuxt

Because Nuxt renders pages on the server, you should use the `nuxt-link` components to navigate between pages. Each time a page loads, you can check if you're on the client or server and avoid doing unnecessary loading based on how the page was rendered. This lesson walks you through using `nuxt-link` and `isClient` to navigate and avoid reloading data.

Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js

You can isolate parts of templates you want to re-use into components, but you can also reuse those components across pages using layouts. This lesson walks you through creation a navigation component then extracting it out into the default layout.

Build a Navigation Component in Vue.js and Use in a Nuxt Layout

You can easily add CSS libraries to Nuxt using `yarn` or `npm` to install them, then simply adding them to the `nuxt.config.js` so they're included in each page. Then all the classes will be available for use in all of your templates. This lesson walks your through installing a library then adding it to your `nuxt.config.js`.

Add CSS Libraries to Nuxt

In a server-rendered application, if you attempt to load data before the page renders and the data fails to load, your application will not run unless you handle the error properly. This lesson walks you through the options of handling load errors so that your users will always have a good experience.

Handle Load Errors in Nuxt with Alternate Data, Redirect, or Error Layout

You often use the same data in different ways across pages. This lesson walks you through setting up multiple pages, retrieving the same data, then displaying it for each page's use-case.

Display Vuex Data Differently in Each Page of Nuxt and Vue.js

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Rails makes an excellent choice for delivering data to AngularJS via REST apis. In this first lesson of a two part series, you'll see how to create a simple API for CRUD operations on TODOs using Rails. This isn't an introduction to Rails, and assumes you know the basics. 

Rails Todo API Part 1

You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. Creating a remove action looks almost the same as the add action except for using the `axios.delete` method then filtering out the deleted todo once the response comes back.

Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

chai

Every dependable library needs to have tests to ensure that you don't push accidental bugs. In this lesson, see how you can set up mocha and chai to start testing your library.

Setting up Unit Testing with Mocha and Chai

Now that you've got everything set up with mocha and chai, it's time to actually write tests. In this lesson you'll learn how to use `describe` and `it` to outline your tests and make sure you don't break your library in the future.

Unit Testing with Mocha and Chai

In this lesson, we will use Chai's request method to test our Node application's API responses.
By the end of this lesson, you will know how to:
- install the prerequisites to use mocha and chai in your application
- test for HTTP status response codes
- test for a string of text on a page
- test for a json response and validate the properties of the object
- write tests that not only verify the response of your application, but the behavior as well


Test Node RESTful API with Mocha and Chai

The default behavior of submitting an HTML form is to reload the page. You can use the Vue.js `@submit.prevent` syntax to avoid that behavior. Then wire together the `@submit` event with an `add` Vuex action to handle an async post to an api. This lesson walks you through posting to an API using Vue.js, Vuex. and Nuxt.

Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template with your own `app.vue` layout in a `layouts` directory. Then you simply surround your content (the `<nuxt>` instance) with your navigation and/or layout and you're ready to go.

Create Vue.js Layout and Navigation with Nuxt.js

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

mocha

Writing great ES6 style Promises for Node.js is only half the battle. Your great modules must include tests as well to ensure future iterations don't break them. In this lesson, I show you a simple ES6 Promise in Node.js, then walk you through creating tests in Mocha using chai and chai-as-promised to test both resolve and reject methods.

Search

Search Results