Strapi + Nuxt: The Ultimate Content Delivery Duo

Unlock the Power of Headless CMS: A Step-by-Step Guide to Building a Landing Page with Strapi and Nuxt.js

Are you tired of being tied down to a traditional coupled CMS? Do you crave the flexibility to deliver content from a single source? Look no further! In this article, we’ll embark on a journey to set up Strapi, a flexible, open-source, Headless CMS, alongside Nuxt.js, a powerful open-source web application framework based on Vue.js. Our mission? To build a landing page for a radio show, Malgamves On Air.

Getting Started with Vue CLI

Before we dive in, make sure you have Vue CLI installed. Run yarn global add @vue/cli to get started. Next, create a new folder called nuxt-x-strapi and navigate into it using cd nuxt-x-strapi. This will be our project directory.

Setting Up the Frontend with Nuxt.js

Create a new folder called frontend and run yarn create nuxt-app frontend. When prompted, select Tailwind UI as your UI framework. Once installed, navigate into the frontend folder and run yarn dev to start the application. You’ll find it running at http://localhost:3000.

Configuring the Backend with Strapi

Strapi is an extensible Headless CMS that lets us manage our database of choice. We’ll use the quickstart flag, --quickstart, which sets us up with a SQLite database. Run yarn create strapi-app backend --quickstart in the nuxt-x-strapi directory. This will create a new folder called backend. Follow the prompts to set up your Strapi administrator credentials.

Defining Content Types in Strapi

As an administrator, define a content type that complements your project. Click “Create First Content Type” and name it “album”. Then, add the following fields:

• name: Text
• description: Rich Text
• image: Media

Save your field types and content type. Your Strapi server will restart, and you’ll see “albums” as a content type in the left menu of your dashboard.

Adding Content and Setting Access Control Rules

Add some content to your “album” content type. Give your album a name, description, and upload an image. Click save, and you’ll have some content in your database. By default, new API endpoints are secured in Strapi and need specific rules to be specified. Go to “Roles and Permissions” under “Plugins” in the menu on the left, and check the “find” and “findone” checkboxes for both the “authenticated” and “public” roles.

Enabling GraphQL Support

Currently, we’re using REST for our API. However, Strapi supports GraphQL and can be enabled by installing a plugin. Shut down your Strapi service, then run yarn strapi install graphql in the project/backend directory. Go to http://localhost:1337/graphql to access your GraphQL Playground.

Connecting the Backend to the Frontend with Apollo

In your Nuxt app, install Apollo by running yarn add @nuxtjs/apollo graphql. Create a new file called albums.gql in frontend/apollo/queries/album/, and paste the following query:
graphql
query {
albums {
id
name
description
image {
url
}
}
}

In pages/index.vue, import your query and define it in the <script> tag. Use v-for to dynamically display the items in your CMS.

The Final Result

Run your frontend application, and you’ll see your Strapi CMS data displayed in your Nuxt app. You’ve successfully connected your Headless CMS to your frontend using GraphQL and Apollo!

Monitor Your Frontend Performance with LogRocket

As you add new JavaScript libraries and dependencies to your app, ensure you have visibility into any issues that may arise. LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser. Try it out for free today!