A common challenge one would face when using any CMS is the constant back and forth between developer and content teams. Be it planning and updating content structures in the backend or rearranging content on the frontend of an application, making changes almost always means additional work for both teams. It gets even harder when there is uncertainty around the content structure, how often the content will be updated, and what it will look like. Strapi has an interesting way of making this process more efficient and it comes in the form of a feature called Dynamic Zones. [Dynamic Zones](/blog/release-beta-18-dynamic-zones) is a new native feature in Strapi that lets teams build reusable content models and minimize the number of changes developers need to make to add new content. It lets your developers build web experiences and have a good night's sleep without worrying about all the content being seamlessly added by the content managers. In this tutorial, you will build a company website with [Nuxt.js](https://strapi.io/integrations/nuxtjs-cms) that utilizes Strapi [Dynamic Zones](/blog/release-beta-18-dynamic-zones). You will also learn how to consume data from the Strapi GraphQL API and render that data in a Nuxt application. - [Demo](https://dynamic-zones.netlify.app/) - [GitHub Repo](https://github.com/malgamves/strapi-dynamic-zones-company-site) ## Prerequisites - An LTS version of [Node.js](https://nodejs.org/en/download/) - Either [Yarn](https://yarnpkg.com/getting-started/install) or [npm](https://www.npmjs.com/get-npm) - Basic knowledge of [Nuxt.js](https://nuxtjs.org/guide/installation) ## What to expect ### [Your Strapi Backend](#Your-Strapi-Backend) - [Installing Strapi and creating a new project](#back-1) - [Create an Administrator user](#back-2) - [Create a Pages Collection Type](#back-3) - [Create an Image component](#back-4) - [Create a Quote component](#back-5) - [Create a Rich Text component](#back-6) - [Create a Dynamic Zone](#back-7) - [Add content to the Pages Collection Type](#back-8) - [Set Roles and Permissions](#back-9) - [Send requests to the Collection Types API](#back-10) ### [Your Nuxt Frontend](#Your-Nuxt-Frontend) - [Installing Nuxt and creating a new project](#front-1) - [Building our Header component](#front-2) - [Building our Hero component](#front-3) - [Building our ContentGrid component](#front-4) - [Building our Footer component](#front-5) - [Adding the Strapi Nuxt module to our application](#front-6) - [Creating our about page](#front-7) - [Creating other pages](#front-8) Let’s get into what this company website will look like. The website will have **four pages** - a home page, about page, a team page, and a testimonials page. The pages share a few common elements;, each has a **title** and **description**. However, the about page needs a few **images** and some **rich text**, while the testimonial page needs a couple of **quotes** and an **image**. The remaining pages follow suit and need different types of content. Besides building a content model, we might need to update content by adding a few **customer reviews**, **team quotes**, and even add a **video** or two. Traditionally, this would mean creating different content models for each page, with **Dynamic Zones** you can create a single reusable content model that gives you the flexibility to add content you need on the fly. Visually it would look a little like this. ![DZ-img-1 ](https://api-prod.strapi.io/uploads/DZ-img-1__d04c021150.png) Now that you understand where Dynamic Zones fit in your application and content workflow, you can get started with building one. ## Your Strapi Backend **1. Installing Strapi and creating a new project** Open your terminal. - Run `yarn create strapi-app api --quickstart` - this creates a new folder called **api** and builds the admin UI. **2. Create an Administrator user** Navigate to http://localhost:1337/admin. - Complete the form to create the first **Administrator** user. - Click **Ready to start** **3. Create a Pages Collection Type** Navigate to **Content-Types Builder** under **Plugins** in the left-hand menu. - Click the "**+ Create new collection type**" link - Name it *pages* and click **continue** - Add a **Text field** (short text) and name it *Title* - Click the "**+ Add another field**" button - Add another **Text field** (long text) and name it *Description* - Click the **Save** button and wait for Strapi to restart These fields will store the title and description of your pages. ![DZ-gif-1](https://i.imgur.com/KNZQmqs.gif) You will need images, quotes, and rich text in your Dynamic Zone, so you will build out components for each. **4. Create an Image component** Navigate to **Content-Types Builder** under Plugins in the left-hand menu. - Click the "**+ Create new component**" link - Name your new component *Image* and pick an icon - Create a new category for your component called *pages* - Add a **Media field** (single media) and name it *image* - Click the "**+ Add another field**" button - Add a **Text field** (long text) and name it *caption*. - Click the **Save** button and wait for Strapi to restart **5. Create a Quote component** Navigate to **Content-Types Builder** under Plugins in the left-hand menu. - Click the "**+ Create new component**" link - Name your new component *Quote* and pick an icon - Select the *pages* category for your component - Add a **Text field **(long text) and name it *quote* - Click the "**+ Add another field**" button - Add a **Text field (short text)** and name it *quoter* - Click the **Save** button and wait for Strapi to restart **6. Create a Rich Text component** Navigate to **Content-Types Builder** under Plugins in the left-hand menu. - Click the "**+ Create new component**" link - Name your new component *richText* and pick an icon - Select the *pages* category for your component - Add a **Rich Text field** and name it *richText*. - Click the **Save** button and wait for Strapi to restart Now that you have created your components, you can create a Dynamic Zone. **7. Create a Dynamic Zone** Navigate to **Content-Types Builder** under Plugins in the left-hand menu. - Click the "**+ Add new field to this collection**" link - Add a **Dynamic Zone** and name it *pageZone* - Click “**Use an existing component**” - Under the *Pages* category, select the *Image*, *Quote*, and *richText* components - Click the **Finish** button - Click the **Save** button and wait for Strapi to restart There you go! You have a **Dynamic Zone** in your **Pages** collection. It should look like this. ![Content Model with Dynamic Zones](https://i.imgur.com/iz7o5g9.png) Now that you've built your Pages collection, you can add content. **8. Add content to the Pages Collection Type** Navigate to **Pages** under Collection Types in the left-hand menu. - Click “**Add new Pages**” - Fill in this information in the fields specified : **Title**: *About* **Description**: *What we're about* **image**: [Image of Man on a Desk](https://i.imgur.com/eAinhq8.jpg) **caption**: *Who we are as a company* **richText**: *We're a company specialized in keeping people happy. Our products speak to this goal. Do you want it? We've got it.* Click **Save** *You can get the content for the teams, testimonials, and home page on this [Notion page](https://www.notion.so/malgamves/Strapi-Dynamic-Zones-Page-Content-26dad1d2dce444499e73fa44cd19a617).* It’s here that you start to see what Dynamic Zones can do. While adding content, whenever you click ‘**Add to pageZone**’, you can add different components to your page. ![DZ gif](https://i.imgur.com/KZgdQPI.gif) Before making requests, you need to make your Pages collection type accessible by tweaking its permissions. **9. Set Roles and Permissions Navigate to **Settings** then **Roles & Permissions**. - Click the **Public** Role - Scroll down under **Permissions**, find **Pages** - Tick the boxes next to **find** and **findone** - Click **Save** ![DZ-gif-7](https://i.imgur.com/25ndttY.gif) You have a collection type, you’ve added some content to it, you’ve set up permissions, let’s send requests to your API? Yes! **10. Send requests to the Collection Types API** Navigate to http://localhost:1337/api/pages?populate=* to query your data. If everything went smoothly, you should get back some JSON data containing the content you just added. For this tutorial, however, you useStrapi's GraphQL API. To enable it, navigate to **./api** - Run `cd api` to change directories - Run `yarn strapi install graphql` to install the GraphQL plugin or Navigate to **Marketplace** under **General** in the left-hand menu. - Click **Download** on the GraphQL card - Wait for Strapi to restart. When you have the GraphQL plugin up and running, you can test queries in your [GraphQL Playground](http://localhost:1337/graphql). That is all for your backend. Now to render all this beautiful content. ## Your Nuxt Frontend **1. Installing Nuxt and creating a new project** Open your terminal. - In your root folder, run `npx nuxi init client` - this creates a folder called client that houses our Nuxt frontend. - Run `cd client` to change directories - Run `yarn install` to install your project dependencies - Run `yarn dev` to run your app on https://localhost:3000 to see that everything is working well. You should see the brand new Nuxt starter page. ![DZ-img-8](https://i.imgur.com/yQdVhKd.png) Your application will be built out with a couple of components. - **NavBar.vue** - To let you navigate between pages - **Hero.vue** - To display your page title and description - **ContentGrid.vue** - To render content from the Dynamic Zone - **Footer.vue** - To display copyright and image attributions **2. Building our Header component** Navigate to **./client/components** Create a file called **NavBar.vue** and paste the following code in it. ``` ``` This component gives you a navbar to navigate through different pages with the `` tag. **3. Building our Hero component** Navigate to **./client/components** Create a file called **Hero.vue** and paste the following in it. ``` ``` This component gets the props, `content` and `title` passed to it from its parent. `title` is the name of the page you want to display data for. `content` is the query result containing the page content you added earlier. Then you go on to display the title and description. **4. Building our ContentGrid component** Navigate to **./client/components** Create a file called **ContentGrid.vue** and paste the following code in it. ``` ``` This is where you render the content from your Dynamic Zone. Just like **Hero.vue**, ContentGrid.vue gets props, `content`, and `title` passed from its parent. `title` is the name of the page that you want to display data for. `content` is the query result that contains the page content you added earlier. The Dynamic Zone data is stored in `contents.pageZone` and you use `v-for` to iterate through it. Each component in the Dynamic Zone has its own type. In the code above, you create a zone in our component to display all the rich text by comparing the `__typename` with the type of the rich text component. You get this from exploring our schema in our GraphQL Playground. This lets us display the rich text using `zone.richText`. Similarly, with the other components in your Dynamic Zone, you can use the same approach to create zones that display data that matches their type. You can also do this for any subsequent components you add to the Dynamic Zone that you want to render in your frontend. **5. Building our Footer component** Navigate to **./client/components** - Create a file called Footer.vue and paste the following code. ``` ``` This component displays some information at the bottom of your page. **6. Adding the Strapi Nuxt module to our application** You’re almost ready to query your API and run your application. You will need to install a few packages to make sure GraphQL works in your application. - Run `yarn add --dev @nuxtjs/strapi` to install them. - Paste the following code in **nuxt.config.ts**: ``` export default defineNuxtConfig({ modules: ['@nuxtjs/strapi'], strapi: { url: process.env.STRAPI_URL || 'http://localhost:1337', prefix: '/api', version: 'v4', cookie: {}, cookieName: 'strapi_jwt', } }) ``` We will add data to this file later. Next up, in **client/querys** create a file called **content.js** and paste this in it. ```javascript export const contentQuery = ` query Pages($Page: String!){ pages: pages(filters: { Title: { eq: $Page }}) { data { attributes { Title Description pageZone { __typename ... on ComponentPostImage { caption image { data { attributes { url } } } } ... on ComponentPostQuote { quote quoter } ... on ComponentPostRichText { richText } } } } } }` ``` You can test this query in your GraphQL Playground - it gets page-specific content. Now that you have your components created, you can piece them together and create your about page. To create a route in Nuxt, you have to add a new file to your page's directory. After this, in your `app.vue` file, replace `` with `` to activate Nuxt Pages. **7. Creating our about page** Navigate to **./client/pages**. Create a file called **about.vue** and paste the following code in it. ``` ``` In this file, you import all your components and make a query to your GraphQL API using the Nuxt module. You then pass the result - `pages` and the data property page title - `title` as props into our header Hero and ContentGrid components so that they can display page-specific data. **8. Creating other pages** Just like you made your **‘about page’**, you can create your home, team, and testimonials pages by pasting the same code and changing the data property `title` to the name of the page. The home page is an exception, you need to assign the string “**Value**” to the data property. … aaand that’s it. Our application should work now as it does below. ![DZ-img-9.gif](https://i.imgur.com/9wnF5GC.gif) Amazing! You have your application rendering Dynamic Zones now, but it doesn’t end here. The beautiful thing is that if you make any updates to content in the Dynamic Zone, developers don't need to make changes in the front end. Let's say you want to add a customer review in the form of a quote, all you have to do is make changes to the Testimonials page in the Strapi backend by pressing the plus button and clicking quote. With no changes to the frontend code, the data shows up. ![DZ-gif-10.gif](https://i.imgur.com/9wnF5GC.gif) The same thing happens if you want to change the layout and order of data. Strapi lets you rearrange content on a site by tweaking its order in the CMS. Changes reflected with no extra effort from the developers. *Note: When you deploy your application and use it in a Heroku production environment, you will need a third-party provider to deal with uploads - the Strapi documentation has a nice guide on how to use various providers.* That’s it from me today, you can test out the [working website](https://dynamic-zones.netlify.app/) or have a look at the [GitHub repo](https://github.com/malgamves/strapi-dynamic-zones-company-site). Hopefully, now, you have a better idea of how Dynamic Zones work and how best you can leverage them. It is an extremely powerful feature with limitless possibilities and I can’t wait to see what you build! Till next time! - [Try live demo](https://strapi.io/demo) - [Try out Strapi Cloud](https://strapi.io/cloud) - [Find help in our Forum](https://forum.strapi.io/) - [Strapi on Youtube](https://www.youtube.com/c/Strapi/featured) - [Try Enterprise Edition](https://strapi.io/enterprise) > **Please note:** Since we initially published this blog post, we released new versions of Strapi and tutorials may be outdated. Sorry for the inconvenience if it's the case. Please help us [by reporting it here](https://github.com/strapi/community-content/issues/new/choose).

No results