Delivering content with Strapi and Nuxt
Tags: tutorial, graphql, nuxt, strapi
Published: 2020-04-11 20:36:46

---
title: Delivering content with Strapi and Nuxt
published: true
date: 2020-03-19 18:07:52 UTC
tags: tutorial,graphql,nuxt,strapi
canonical_url: https://blog.logrocket.com/delivering-content-with-strapi-and-nuxt/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/51xfik29zwa48l7c9x8i.png
---
**Written by [Daniel Phiri](https://blog.logrocket.com/author/malgamves/)**✏️

Headless CMS is all the rage at the moment. It gives you the ability to decouple your backend from your frontend with the added advantage of delivering content from a single source.

People relish the idea of a flexible frontend, straying from the standard coupled days of Joomla and Drupal.

In this article, we’ll be setting up [Strapi](https://strapi.io/) — a flexible, open-source, Headless CMS that you can deploy on your own servers, along with Nuxt.js, a powerful open source web application framework based on Vue.js for building universal web applications.

We’ll use the two to build a landing page for my radio show, [Malgamves On Air](https://www.mixcloud.com/malgamves/).

To get started, we have to have a Vue CLI installed.

Run `yarn global add @vue/cli` to get it installed.

We’ll start by creating a new folder called `nuxt-x-strapi`.

Run `cd nuxt-x-strapi` to change directories so we can set up our frontend and backend in it.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Our frontend

We’re using Nuxt for our frontend.

Run `yarn create nuxt-app frontend`, and create a new folder called `frontend`.

> N.B: Select **Tailwind UI** when asked about which UI framework you want to use.

Go into that folder and run `yarn dev` to start the application.

You’ll find it running at [http://localhost:3000](http://localhost:3000). You’ll be greeted by the usual Nuxt starter page:

![An image of the Nuxt starter page.](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/frontend-nuxt-strapi.png?resize=730%2C360&ssl=1)

Now that we have our frontend running, we need to se tup our project with Strapi as our backend.

## Our backend

Strapi is extensible and lets us manage what we use as our database.

We’ll use the quickstart flag, `--quickstart`, which sets us up with a SQLite database.

Head back to `nuxt-x-strapi/` and run the following command: `yarn create strapi-app backend --quickstart`.

At this point, a new folder called **backend** will be created.

![An image of the Strapi login page.](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/The-Strapi-login-page.png?resize=730%2C337&ssl=1)

We’ll be redirected to our browser where we have to set up our Strapi administrator credentials.

Don’t worry if you aren’t redirected — you can open up [http://localhost:1337/admin/auth/register/](http://localhost:1337/admin/auth/register/) in your browser.

> N.B: If you stop the Strapi service, you can start it again by running `yarn develop` in `nuxt-x-strapi/backend`.

After putting in your details, you’ll be directed to a dashboard. Here we’ll start to define our content types as an administrator.

![The Strapi home page.](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/The-strapi-home-page.png?resize=730%2C362&ssl=1)

You’ll notice that we already have a `User` content type: this happens by default.

We need to define a content type that complements what we’re trying to build: a display of radio show episodes.

Click **Create First Content Type** and type **album** when asked for a name. Then click save.

Almost immediately, you’ll be asked to add fields to your content type. One after the other, create the following fields:

- For an album name, select **type Text** and call it **name**
- For the album description, select **type**  **Rich Text** and call it **description**
- For the album image, select **type**  **Media** and call it **image**

After this, save the **field types** and save the **album** content type.

Your Strapi server will then restart, and you should see **albums** as a content type in the left menu of your dashboard.

We have our content type defined, but we don’t have any content to display yet.

Click on **album** in the left menu, then **add album** in the top right to add some content.

![The page on Strapi prompting developers to create an entry.](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/Strapi-create-an-entry.png?resize=730%2C362&ssl=1)

Give your album a name, a description, and upload an image. Click save, and you’ll have some content in your database.

Before we can use this data or query any endpoints, we’ll have to set some access control rules.

You’ll notice that going to [http://localhost:1337/albums](http://localhost:1337/albums) gives you an error.

### Allowing Access

Like we just saw, we can’t accept the data yet because we haven’t set permissions to enable us to do so.

By default, new API are secured in Strapi and need different rules to be specified.

We need to go over to **Roles and Permissions** under **Plugins** in the menu on the left (you can also go to [http://localhost:1337/admin/plugins/users-permissions/roles](http://localhost:1337/admin/plugins/users-permissions/roles)).

Click on the `authenticated` role and check the `find` and `findone` checkboxes, then save.

Do the same thing for the `public` role, and save that, too.

Now, when you go to [http://localhost:1337/albums](http://localhost:1337/albums), you should be able to see the results of the API call.

### Adding GraphL support

Currently, we’re using REST for our API.

However, Strapi supports GraphQL and can be enabled by installing a plugin.

We’ll use GraphQL to deliver the content from Strapi and display it in our Nuxt app.

Shut down your Strapi service. Then, in `project/backend`, run `yarn strapi install graphql`.

When the installation is complete, go to [http://localhost:1337/graphql](http://localhost:1337/graphql) and you’ll see your GraphQL Playground where you can test queries.

It looks a little like this:

![A gif displaying how to create an album in Strapi.](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/albums-strapi.gif-1.png?resize=730%2C361&ssl=1)

Okay! Where are we now?

We’ve got our GraphQL Strapi backend working, and we’ve got content in our database. All we need to do now is connect the backend to the frontend.

Since we’re using GraphQL, we need to install [Apollo](https://www.apollographql.com/) in our Nuxt app.

In `/nuxt-x-strapi/frontend/` run `yarn add @nuxtjs/apollo graphql`

After installing Apollo, we need to add the code below to our `nuxt.config.js` file.

```jsx
...
modules: [  
  '@nuxtjs/apollo',
],
apollo: {  
  clientConfigs: {
    default: {
      httpEndpoint: 'http://localhost:1337/graphql'
    }
  }
},
...
```

Now we need to create a file to store our GraphQL query.

Go to `frontend/apollo/queries/album/`, create the file, and call it `albums.gql`. Then we’ll paste this query in it.

```jsx
query Albums {  
  albums {
    id
    name
    description
    image {
      url
    }
  }
}
```

All this does is get the id, name, description, and image url from our backend so we can consume this in our frontend.

In `pages/index.vue` we paste the following in our `<script>` tag.

```jsx
import albumsQuery from "~/apollo/queries/album/albums";
​​export default {
​​  data() {
​​    return {
​​      albums: [],
​​      query: ""
​​    };
​​  },
​​  apollo: {
​​    albums: {
​​      prefetch: true,
​​      query: albumsQuery
​​    }
​​  },
​​  computed: {
​​    filteredList() {
​​      return this.albums.filter(album => {
​​        return album.name.toLowerCase().includes(this.query.toLowerCase());
​​      });
​​    }
​​  }
​​};
```

At the top of the file, we import our query.

We have a section for Apollo where we define the query we just imported, and another section where we filter the result from the query.

In `pages/index.vue`, we paste the following in our `<template>` tag:

```jsx
<div>
    <div class="title">
      <h1>Welcome to My Radio Show</h1>
    </div>
    <div class="container">
      <div  v-for="album in filteredList" v-bind:key="album" class="max-w-sm rounded overflow-hidden shadow-lg p-1">
        <img
          class="w-full"
          :src="'http://localhost:1337' + album.image.url" alt="" width="300" height="300" 
        />
        <div class="px-6 py-4">
          <div class="font-bold text-xl mb-2">{{ album.name }}</div>
          <p
            class="text-gray-700 text-base"
          >{{ album.description }}</p>
        </div>
      </div>
    </div>
  </div>
```

Here we use `v-for` to dynamically display the items in our CMS.

We interpolate the `album.name` and `album.description`, as well as the image which we place in the **src** directive. When we run the frontend of the application, this is what we see:

![An image of the Malgamves On Air radio show home page.](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/Malgamves-on-air.png?resize=730%2C361&ssl=1)

## Conclusion

In this tutorial, we got a Nuxt app working, we set up our Strapi backend, added data to our CMS, and enabled the GraphQL API.

Now we have the the data in our Strapi CMS displaying in our Nuxt app.

You can check out the project repo on [GitHub](https://github.com/malgamves/nuxt-x-strapi).

Hope you found this useful. Hit me up on [Twitter](https://twitter.com/malgamves) if you have any questions.

* * * 
## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *

The post [Delivering content with Strapi and Nuxt](https://blog.logrocket.com/delivering-content-with-strapi-and-nuxt/) appeared first on [LogRocket Blog](https://blog.logrocket.com).