Jamstack Explorers

Building a Lyric Blog with Nuxt.js and Strapi with Daniel Madalitso Phiri

Connect Strapi to a Nuxt frontend

Hey explorers. In our last mission, we looked at getting the Strapi graph QL plugin working in this mission. We'll look at getting graph QL, working with our Nuxt js application. Let's start by opening up our terminal. In the explorer's folder, we'll change directories into the front end folder, where, our Nuxt js application is.

In this folder, we'll run yarn add at nuxtjs slash Apollo to install the next year's Apollo client graph Q L and graph QL tag dependencies.

Great, now that our dependencies are installed, we can set up the Apollo client configuration in our next year's application. Before we do this, however, open another tab to make sure our Strapi server is up and running. In our explorer's folder again, we'll change directories into our API folder where our Strapi project is and start our Strapi server with yarn develop. Great. Now that I'll Strapi server is up and running, we can go back to our other terminal and now we can set up our Nuxt js config to open up visual studio code we'll type in code, period, and press enter in vs code. We'll open our nuxt dot config JS file inside this we'll go to our modules section.

We'll paste, the following snippet, we add nuxt JS Apollo as an application module, in our, Nuxt js application. And we have a special Apollo section where you configure our Apollo client. We set our endpoint to localhost 1337 slash graph QL, which is the default graphql endpoint for Strapi.

Next up inside of frontend folder, we need to create a new folder called graphql inside graphql will create a new file called queries dot J S and here we'll store our graphql queries. We'll open up our browser and get into our graphql playground. We'll start by making a query called all articles query and in this article.

We'll get article ID, body, title, date, description, and slug. When we run this. We get back our entry, Gemini it's song by What So Not and its description. We'll open another tab in our graphql playground, and name this query single article query.

In this, we'll get a single article and have. Id be 1. And in that we want to get the ID, the title, the date, the body, the description, and the slug run that. And we get back a single article. Now that we have, these queries ready, we can add them to our queries dot JS file in vs code. Before we do that, we have to import GQL tag.

So back to vs code we'll type import GQ L from graph QL tag export and here we'll place our all articles query have this GQL and we'll paste our all articles query here, paste it there. And we'll define another query called single articles query. It goes to GQL and paste that there we'll change it to single article.

And we'll save our file, now that we have our queries, we can go into our index dot view file and set up our Apollo query. So we can get started with rendering data on this page. Before we do anything in our export default in the script section, we need to define a data function and return an empty array hold articles.

Having done that we can now have a Apollo section where we define our query and match the response to the empty array we just define so our articles response, we'll go into the MTRA and we'll be able to use that to render data. We said prefetch that's true. So we can prefetch data and we'll set our query as, all articles all articles query.

We have not imported this query. So at the top of our script section, we'll import articles query from graph QL slash queries

inside our template. We'll get rid of the content of this div tag and get rid of the class. We'll use the v-for directive and iterate over our response data article

in articles, we'll set a v-bind key as article.id and inside this. We'll add an h2 tag and inside our h2 we'll interpolate article dot title. So that are articles from Strapi can show. And then we'll and our h2 tag we'll close it off. When we save our work and go back to the browser, we should be able to see the data from the Strapi show up in the front end of our Nuxt application.

Before we do that, we need to make sure that our Nuxt server is up and running. So we'll go back to our terminal and start our server with yarn dev. Now that our server is up and running on localhost we'll go back into, we'll go back into our browser and we see it. Hello, explorers and Gemini from Strapi is showing up.

Now we've set up our next application to read, graph your data from Strapi. In the next mission, work on building the structure of our blog and adding dynamic pages so that we can render blog posts that we get from Strapi on their own dedicated pages.


your progress