Fetching Blog Posts with Vue and Axios

Image by Michael Schwarzenberger from Pixabay

Scenario

In the article:

Listing Blogs in Vue

We rendered hard coded blog posts.

We now want to fetch these posts using a REST API and Axios. We will create our own REST API like this:

Creating a REST API for Blog Posts with Express and SQLite

Approach

First copy the blog listing project vue-blogs to axios-vue-blogs so that we have a project we can start with without polluting the original project:

cp -r vue-blogs/ axios-vue-blogs
cd axios-vue-blogs

Then install Axios:

npm i axios

Update the BlogsComponent so that it fetches the blog posts using Axios:

Update the BlogComponent so it fetches individual blogs using Axios:

Now start the server created in this article ( node index.js from within the project directory. This runs the REST API. ):

Creating a REST API for Blog Posts with Express and SQLite

Then start the Vue Application.

It now fetches blog posts from the server.