Table of contents
Multiple versions of ACF flexible content block with Nuxt 3
In this post we are going to look at how to make multiple versions of an ACF flexible content block and switch between them easily.
This technique is going to involve adding an option to our ACF flexible content layout that lets us switch versions. We will then check which version is selected in Nuxt 3, then output the correct component depending on the version selected!
Add version option to ACF flexible content layout
The first thing we need to do is an an ‘option’ field to our flexible content layouts in Advanced Custom Fields. So head over to your flexible content field and select the layout you wish to have multiple versions of. In our example we will be using the ‘cta’ (Call to action) layout.
In our ‘cta’ layout we are going to add our ‘option’ field with the field type Radio Button. And we will give it the options:
- one : Version One
- two : Version Two
Notice the gaps around the colon (:), these gaps are required for it to work! Now click “Save Changes”. Thats our Advanced Custom Field sorted. Now we need to head over to our page and select one of the versions we just created with our radio button. From our WordPress backend we are all setup and now ready to move on to sorting our Nuxt 3 application!
Create different component versions in Nuxt 3
We now need to head back over to our Nuxt 3 application. We currently have 1 Cta.vue component, but we need another one. One for each version we wish to create. To keep things clean, its best to create a folder for each ACF Layout. So in our components folder, create a new folder called ‘Cta’. Now move your existing Cta.vue component into the new Cta folder, and rename the Cta.vue component One.vue. Now when we want to output this component, we do so by doing <CtaOne />.
In our Cta folder, we need to make another component, called Two.vue. We now need to create add the code for this second call to action component. You can either code this yourself or use a component library. I am using Tailwind UI, so I am going to copy the code for a different Cta component, and paste it into my component. I am then going to make sure I define the layout prop, like in my One.vue call to action component. Your two Cta components should look like this:
One.vue
<template> <div> <div> <h2>{{ layout.headline }}</h2> <div> <a :href="layout.link_1.url">{{ layout.link_1.title }}</a> <a :href="layout.link_2.url">{{ layout.link_2.title }} <span aria-hidden="true">→</span></a> </div> </div> </div></template><script setup>const props = defineProps({ layout: Object})</script>Two.vue
<template> <div> <div class="lg:flex lg:items-center lg:justify-between"> <h2>{{ layout.headline }}</h2> <div> <a :href="layout.link_1.url">{{ layout.link_1.title }}</a> <a :href="layout.link_2.url">{{ layout.link_2.title }} <span aria-hidden="true">→</span></a> </div> </div> </div></template><script setup>const props = defineProps({ layout: Object})</script>We now have 2 versions of our Cta component. It is worth noting that you can achieve the thing by conditionally outputting classes on just 1 component. However this is a matter of personal preference. And depending on the complexity of your components it is sometimes cleaner to separate them out into different components like we have done above.
Flexible component setup
We now need to make a slight adjustment to our main Flexible.vue component. Previously, we were outputting the only Cta.vue component, when the layout.acf_fc_layout prop was equal to ‘cta’. Now we have 2 cta components we need to do another check to see which cta component we need to render. Change your Flexible.vue component to look like this:
<script setup>const props = defineProps({ layout: Object})</script><template> <template v-if="layout.acf_fc_layout == 'header'"> <Header :layout="layout" /> </template> <template v-if="layout.acf_fc_layout == 'cta'"> <CtaOne v-if="layout.option == 'one'" :layout="layout" /> <CtaTwo v-if="layout.option == 'two'" :layout="layout" /> </template></template>We are now all sorted. So we can now switch between versions of the same Advanced Custom flexible content layout. This means that if we want to test new styles or layouts, we don’t need to rewrite our entire field to do so. We can simple click the radio button to select the version we want!
I have videos too!
If you found this post helpful, please consider subscribing to the @codingoblin YouTube channel 😀
