Packt | Build a News Feed with Nuxt 2 and Firestore


Staff member
Forum Moderator
+Lifetime VIP+
Oct 21, 2018

By: Reed Barger
Released: October 25, 2019 (New Release!)
Torrent Contains: 42 Files, 15 Folders
Course Source:

Create a complete, full-stack news aggregator from front to back with Nuxt 2, Firestore, and Vue Material.

Video Details

Course Length 2 hours 44 minutes

Table of Contents

• Getting Started
• Adding Vue Material
• Axios Module, Built-in Nuxt Methods (fetch / asyncData)
• Fetching News Headlines with NewsAPI
• User Registration with Firebase REST API, Form Validation with Vuelidate
• Integrating Firestore with Nuxt
• Login Functionality / Managing User Sessions
• Bookmarking Headlines / Removing Bookmarks from Personal Feed
• Creating Pages for Individual Headlines
• Sending and Liking User Comments
• Querying Headlines by Search Terms, Date and Criteria
• Time Formatting and Page Transitions
• Migrating from Nuxt 2 / Vuex Store to the Latest Version
• Deployment to the Web


• Learn the practical side of working with various Nuxt/Vue features within the context of building a professional, complete application
• Use the techniques/material covered in this course to spark your ideas in making cool, functional web apps
• Master state management with Vuex, with the help of simple, straightforward patterns
• Create attractive, responsive, feature-rich UIs with the Material Design library in Vue Material


Welcome to Build a News Feed with Nuxt 2 and Firestore!

We'll be building a real-time newsfeed called NuxtNews, where users will be able to see live news headlines as they are published from around the World, search through them with search terms (by date and search criteria, where users can select headlines by their country, by news category, or by news source), and take a look at these headlines as individual pages within their app. And when users are authenticated (using JSON web tokens and the Firebase Auth REST API), they will be able to bookmark the headlines they want to save and place them within their personalized news feed, comment on articles, and like/upvote comments by other users on those individual headline pages.

Here's what we will cover:

• Get hands-on with the News API to dynamically fetch top headlines around the world (by news category, by country, by the news source, and more)

• Add search functionality to query all headlines according to search terms, by date and various criteria

• Create the ability for users to bookmark headlines and add them to their feed

• Extensive coverage of making HTTP requests with Axios (Nuxt module, proxies, and setting headers)

• Built-in Nuxt data-fetching with the asyncData and fetch methods

• Work with Nuxt plugins to incorporate third-party libraries into your Nuxt application

• Authentication with JSON web tokens and session management with both cookies and LocalStorage

• User authentication with the Firebase Auth REST API

• Building Nuxt middleware functions to work as authentication checks and navigation guards

• Use Vue filters to format date/time values with the popular date-fns package•

• Bootstrap new Nuxt 2 projects

• Seamless app deployment with Heroku

The NuxtNews app is truly a fully-featured application where you'll learn tons of Nuxt/Vue concepts along the way. Interested in building impressive, practical, full-stack single-page and server-rendered apps with Nuxt and Firestore? This is the course for you!

All the code files are placed at


• Build a Nuxt project from start to finish
• Implement core Nuxt concepts such as middleware, plugins, modules pages/routing, and more while building your own Nuxt apps
• Creating a complete newsfeed/aggregator with Nuxt 2, Firestore, and Vue Material—from the first line of code to deployment on the web
• Full CRUD functionality to create, read, update, delete with the new real-time NoSQL Firestore Database


Reed Barger

Reed Barger is a Full-Stack Developer and Consultant. Reed is a professional developer with a passion for learning and teaching everything he knows. He believes in learning through doing and this philosophy is present in every course that he teaches. He loves to explore new web and mobile technologies, and his courses focus on giving you the edge in this fast-moving industry.