Building a Lyric Blog with Nuxt.js and Strapi with Daniel Madalitso Phiri
Display data from Strapi in Nuxt
Hello explorers. In the last mission, we set up graph QL to work with our Nuxt application and rendered the result from Strapi onto our Nuxt year application. In this mission, we'll start off in vs. Code. Continuing where we left off in the last mission, we displayed the article title on our Nuxt js page.
Going forward, we want to change up the structure and design of this page. So we'll start off at the bottom in the style section and posting some styling. At the top of our page in our templates section, we want to change the overall structure of our webpage. We'll get rid of the content in this div tag, so we can start to build out the structure of our homepage.
We'll copy this div tag. So it's easy for us to make additional divs in the route div we'll change the class home container to home and below that we'll create an h1 tag and give it a class of headline.
And center. So it's one tag type lyric block and close it. And the next div we'll have a class of sections
inside this. We'll have another div that will give a class of group. This will store all the entries that we'll read from Strapi. And now we need to create a div where we can iterate over the data we get from Strapi inside this div, we use the v-for directive
and have article in articles, have a V bind. And we'll give this a key of article dot ID and a class of section. Have another div, and in this div we'll have a class of entry in this div, we'll have nuxt link, which is a nuxt component that helps us navigate in internal pages. We'll have an address internally that we can navigate to open the curly brackets and give this a path of article dot slug.
And we'll have a query item that we want to send over, in our, and nuxt-link object of ID. And we'll give this ID the value of article dot ID, wrap this in parentheses. And because we want the blog post title to be clickable we'll place an h3 tag and interpolate article. The title will have a span tag to give a class of subtitle to hold our date,
article.date. We'll close that and we can close our h3 tag and our nuxt link tag. We also want to have a P tag. This P tag is what we use to display our article description. So interpolate article dot description, and close our P tag. We've built out the structure of our page. We can now save and go into our browser to see what this looks like.
Awesome. We have lyric blog, a blog title, appearing, Gemini, or song, title, and description. As well as the date, I took the Liberty of adding other entries in the Strapi admin. So you can add your favorite songs too, and have them display and have them displayed here in the blog that I demoed at the beginning of our mission, we're able to click on blog entries and look at the blog body.
At the moment, when we click an entry, we get an error message. That's very okay. We haven't built out a page to display that data yet. To do that, we're going to leverage nuxt JS dynamic pages functionality. Dynamic pages are very useful when you're fetching data from an API and you aren't sure of what data you might have.
That way we can have some sort of template and render data, no matter what data we get, we know the structure of the data we're getting from Strapi. So we can build out a template to render that type of data and build a page dynamically as the name suggests. So we'll go back into vs code and in our pages folder.
We'll create a new file called underscore slug dot vue, giving an underscore to a file name in the pages directory makes this page dynamic. We'll start up with building out the structure of our page. It's very similar to the structure of our index page. So I'll go over to our index page, copy everything and paste it.
Now we have the styling, the script section and the template. We'll start out with our script section in this page, our query will be very different, but before we can do that, we need to go back into our queries dot JS folder. In this folder, we had a single article query, which we used to get a single article from Strapi specified by our ID.
However, because we're unsure of what articles we might want and the value of the idea will change we'll use graph QL query variables to change the value of the ID we get. So to start out, add a query variable symbolized by dollar ID, and we'll define the type of this variable as ID type. And then in these parentheses where we specify the variable of one, we'll change the value of that to have.
Dollar ID. So whatever value we input into this query will be added here. And we'll do this whenever we're making our graphql requests. Now that we've changed the value of our query, we can go into our underscore slug file and add single articles query. As our page query will change all articles query to single.
Articles query. And then in our Apollo section and copy that name and paste that here. However, our article won't work if we don't place variables. So we go into new line and initialize a variables function in this function. We return an ID that is this dot route. Dot query.id. Now you must be wondering why we using this value.
If we go back to our index, that view file in our nuxt link component, besides the path, which is our article slug, we added a query item, which is our article ID into the URL, so that when we're on that page, we're able to get the article ID and fetch the relevant data for that article. So in underscore slug, we're using the this keyword and the nuxt route functionality to get our route ID, which we'll use as an ID to fetch the relevant data for our page.
Let's change this value from articles to article. Because we get back a single entry and now we can start interpolating and rendering the data in the page. Like I mentioned, the structure is pretty similar to our index dot view page. The first thing we want to do is replace lyric blog with article title and below lyric blog.
We want to have a description. So we'll have AP tag. And give this a class of center and then have our article dot description here. Next up, we want to actually display the body. We want the styling of this page to be centered. So add center class here and here and get rid of this div tag. So we'll use a P tag and display or article body.
In this section. Now we want to be able to navigate to our previous page. So we'll use the nuxt link component again, and this time, give this a value of home symbolized by the backslash and a class of back have text value back, and then close out our nuxt link component.
In our styling section below headline, who paste out the CSS class back so that all backed text has a color specified. We'll save our work and go back to our browser. When we click an entry, we have the title, the description, and the lyrics show up. And when we click the back button, we go back to our data.
Now that we've built out our blog, we can deploy it to Netlify, which we'll do in our next mission.