Build a News Aggregator App using Strapi and Nuxtjs
Title
Build a News Aggregator App using Strapi and Nuxtjs
Author
Ravgeet Dhillon
Image
Meta description
The tutorial teaches you to create News Aggregator app using Strapi and Nuxtjs.
Number of words - excluding code
3124

Outline

Introduction
Goal
Setting Up Environment
Setting Up Strapi
Automating News Fetching from Feed URLs
Setting Up API Permissions
Setting Up Nuxt.js
Designing News Pages
Adding Search capabilities
Registering Subscribers
Conclusion

If you are an avid reader, you might have a News Aggregator app installed on your device. Wouldn't it be awesome to create your own News Aggregator app that you can control and customize according to your needs?

This is what you'll be doing today by creating a News Aggregator app using Strapi and Nuxt.js.

Strapi is a headless CMS (Content Management System) based on Node.js and builds APIs. Strapi provides a UI where you can develop your collection types and subsequent APIs to fetch the data from Strapi using REST or GraphQL API. The best thing about Strapi is that it is completely open-source and self-hosted.

Nuxt.js is a framework for building Vue.js apps that are universal. It means the code written in Nuxt.js can run on both client and server, offering Client Side Rendering and Server Side Rendering simultaneously.

Goal

This tutorial aims to learn about Strapi and Nuxt.js by building a News Aggregator app with Strapi and Nuxt.js. In this app, you'll:
  • Learn to set up Strapi Collection types
  • Learn to set up Frontend app using Nuxt.js
  • Use CRON jobs to fetch news items automatically
  • Add Search capabilities
  • Register subscribers

The source code for this project is available on GitHub: https://github.com/ravgeetdhillon/strapi-nuxtjs-news-app.

Setting Up the Environment

Here is what you’ll need to get started.

Prerequisites
  • Node.js - This tutorial uses Node v14.18.x
  • Strapi - This tutorial uses Strapi v3.6.x
  • Nuxt.js - This tutorial uses Nuxt.js v2.15.x

The entire source code for this tutorial is available in this GitHub repository.

Setting Up Project
You'll need a master directory that holds the code for both the frontend (Nuxt.js) and backend (Strapi). Open your terminal, navigate to a path of your choice, and create a project directory by running the following command: