Table of contents
Advanced Custom Fields flexible content with WordPress REST API and Nuxt 3
Advanced Custom Fields flexible content allows us to have much more control over the content in our pages and posts. Instead of pulling in just the main bits of page data from our WordPress API such as the title and content, we will now be able to bring in all sorts of custom data. This makes our life much easier. We can now plonk in any components we like within our pages rather than just having long blocks of text. And we don’t have to put all of our elements in the wysiwyg editor.
What is Advanced Custom Fields?
Advanced Custom Fields (ACF) is a WordPress plugin that allows you to create custom fields. Once you have created these fields you can choose where you can use them. Generally they are used in your posts and pages, but they can also be used in custom post types and options pages.
Why use ACF?
The reason you should use Advanced Custom Fields is that it allows you to create better looking content, and create this content more easily. In general it makes life using WordPress far easier than if you are not using it.
ACF flexible content with WordPress API & Nuxt 3 Guide
Install Advanced Custom Fields
The first thing you need to do is install the Advanced Custom Fields Pro plugin. This is a paid for plugin but it is well worth the money. And I’m not being paid to promote this.
Once you have installed the plugin, update it so that you are using the most up to date version. Now we can get started!
Create a new ACF field group
Now we can create a field group in Advanced Custom Fields. We can call this anything we like, but as we are going to be using flexible content, I am going to name it “Flexible”.
ACF Field Group Settings
Location Rules
Scroll down to the settings section, and go to the “Location Rules”. In these rules, we need to make sure that our field group is shown on all the pages or posts that we want to use our field group with. Unless you have custom post types, set this so that it is shown on our pages and posts. If you do have custom post types then make sure to add these to the rules also.
Group Settings
Go to the “Group Settings” section and enable the “Show in REST API” option. This is important as if we don’t do this then we will not be able to access our ACF fields in the WordPress REST API!
Create Flexible Content Field in ACF
Now our field group is setup, we can create our first custom field, which is going to be a flexible content field. So go select Flexible Content from the field type select menu. I am going to give my flexible content field the label ‘Flexible’ and the field name ‘flexible’. You can give this field any label and name that you like, but remember whatever field name you give it is what you will use to reference it when you receive your page data from the WP API. The label is what will be shown in your WordPress page editor.
Create a Layout in Flexible Content field
We are now ready to create a Layout. So scroll down to the Layout section. In our example we are going to keep it nice and simple to start with. So we are going to create a header layout. We will give this header layout a name of ‘header’, again, this is what we will use to reference the field in the API.
Add fields to ACF Layout
We now need to add some fields to our header layout. In our case we are going to add a ‘title’ field and a ‘subtitle’ field. These are both going to be text field types. Make sure you click “Save Changes”.
Add our Advanced Custom Fields to a page
We are now at a point where we can add our flexible content to a page in our WordPress backend. So go to your home page in your WordPress editor. On this page you will now see a block under the standard wysiwyg editor that has the title “Flexible”. This is our field group. And you will also notice within that block is the subtitle which is also “Flexible”, this is our field! Click “Add Row” and you will see the option to add our Header layout that we just created. Go ahead and do this. You can now add the content for the title and subtitle. Save your changes to the page by clicking update.
Now, when we pull in our page data from the WordPress REST API, we will see an ‘acf’ property there. This will contain all the data for our Advanced Custom Fields!
Create Flexible component in Nuxt 3
Now head to your Nuxt 3 application. We need to create a new component. We are going to call this component Flexible. Paste the following code into your newly created Flexible component:
<script setup>const props = defineProps({ layout: Object})</script><template> <template v-if="layout.acf_fc_layout == 'header'"> <Header :layout="layout" /> </template></template>Adjust […slug].vue page
In our […slug].vue file we are going to create a for loop. This for loop is going to loop over the layouts that are present in our page. Within this loop we will output our newly created Flexible component. We will pass the layout to the Flexible component on each iteration. Our Flexible component receives the layout on each iteration of the loop and checks the name of the layout. The Flexible component checks the name of the layout that is being passed to it, and outputs the appropriate component! Make the following change to your […slug].vue file:
<script setup>import { ref } from 'vue'const route = useRoute()const slug = ref('')if(route.params.slug) { let lastIndex = route.params.slug.length - 1 if(!route.params.slug[lastIndex]) { slug.value = route.params.slug[lastIndex - 1] } else { slug.value = route.params.slug[lastIndex] }} else { slug.value = 'home'}const { data, pending, error, refresh } = await useFetch('https:///wp-json/wp/v2/pages', { query: { slug: slug.value }})</script><template> <div> // Remove this <Header :title="data[0].title.rendered" :subtitle="data[0].content.rendered" /> // Add this <template> v-for="layout in data[0].acf.flexible"> <Flexible :layout="layout" /> </template> </div></template>Adjust Header component
We are nearly there! We just need to adjust our Header.vue component so that it can receive the layout prop. Make the following changes to the Header.vue component:
<template> <div> <div> // Remove this <h2>{{ title }}</h2> <p>{{ subtitle }}</p> // Add this <h2>{{ layout.title }}</h2> <p>{{ layout.subtitle }}</p> </div> </div></template><script setup>const props = defineProps({ title: String, // remove this subtitle: String // remove this layout: Object // add this})</script>
I have videos too!
If you found this post helpful, please consider subscribing to the @codingoblin YouTube channel 😀
Head to your home page and you should now see the header component displaying your Advanced Custom Fields flexible content header layout!
