Create Custom Components in Storyblok and Laravel
Storyblok is the first headless CMS that works for developers & marketers alike.
Let’s take it one step further in this part by exploring component schemas in Storyblok. We’ll learn how to modify existing components, create entirely new ones from scratch, and integrate all of these changes into our Laravel web application.
If you’re in a hurry, you can explore or fork the code from the Laravel Ultimate Tutorial GitHub Repository.
Requirements
This tutorial is part 4 of the Ultimate Tutorial Series for Laravel. We recommend that you follow the previous tutorials before starting this one.
Changing Existing Components
Adding an Image Field to the Feature Component
First of all, let’s extend one of the existing components that was created by Storyblok for us: the Feature component. Right now, the Feature components look a little bit bland, don’t they? Adding an image to them would certainly spice things up a little bit.
To modify it right from the Visual Editor, go to the Home story and click on one of the Feature components, which exist as nested blocks in the Grid component. To edit the schema, click on the three dots next to the name {1} and then on Open in Block Library {2}.
Now you immediately start typing. Let’s enter the image
as our field name and press Enter. Now you can click on the newly created field. In this menu, you want to set the Field type to Asset {1} and then choose the file type Images {2}.
And that’s that! After closing the Block Library, you’ll see the image field, providing the possibility to upload an asset. Go ahead and upload some images for the three instances of the Feature component. Of course, they won’t show up in the frontend just yet, so let’s take care of that next.
Showing the Image Field in Nuxt
In order to render the images properly in Nuxt, we have to figure out what exactly is provided by Content Delivery API after the changes to our component schema. To do that, open the Draft JSON as described in the first part of the Nuxt Ultimate Tutorial.
If you search for the term feature
now, you’ll find the image field and all of the data it provides {1}. For now, all that we need are the filename
{2} and the alt
{3} values.
Perfect. Let’s use those in Nuxt by updating the storyblok/Feature.vue
component:
What’s happening here? The blok
object contains all of the information that we need, so the image
field and its nested properties filename
and alt
are easily accessible. In Vue, we can then very easily bind these values to any HTML tag, in this case an img
.
That already looks much better, doesn’t it?
HINT: Make sure to check out the Storyblok Image Service to optimize your images on the fly. This works perfectly when used in conjunction with computed values in Vue or Nuxt.
Creating New Components
Having successfully modified an existing component, let’s now create a completely new block from scratch. Something that our website could really need is a nice looking hero component, wouldn’t you agree?
Creating a Hero Component
Before creating the schema for this new block, let’s first of all consider what we would like it to look like and what options we want to provide. I would say that a headline
, a subheadline
and a background_image
field would be a great place to start. However, let’s kick it up a notch and provide the option to make this hero component use the full width of the screen.
First, go to the Block Library {1} and create a New Block {2}.
It should be a Nested block {1} with the name hero
{2}.
Now we can create our first three fields:
headline
: field type textsubheadline
: field type textbackground_image
: field type image
The required steps for this are exactly the same we have taken to add an image
field to the Feature component earlier in this tutorial.
Once these fields are ready, we can create the layout
field to make it possible to choose between two different layouts. Let’s add the field and choose Single-Option as its type {1}.
Let's add two key value pairs which represent the possible choices {1}, hide the empty option {2} and set the default value to constrained
{3}:
Finally, save the component and add it to our Home story, right above the Teaser. You can already add some sample content to the fields. Of course, nothing will be shown in our frontend just yet. So let’s take care of that next, shall we?
Rendering the Hero Component in Nuxt
All we have to is create a new storyblok/Hero.vue
component with the following content:
At this point, you should be familiar with most of the code. The only novelty is that we create a computed property heroClasses
to determine which classes should be used depending on the value we get from the layout
field we created. This computed property is then bound dynamically using :class
.
If you refresh your Home story in the Visual Editor now, you’ll not only see the Hero component in all its glory – you can also change the layout and it will update in real-time accordingly!
Wrapping up
Congratulations, when you reached this point you have successfully adapted the schema of existing components, created new components from scratch and incorporated all of the required code changes in your Nuxt project! Great work!
Continue reading and learn Create and Render Blog Articles in Storyblok and Nuxt.
Resource | Link |
---|---|
Storyblok Nuxt 3 Ultimate Tutorial | https://www.storyblok.com/tp/storyblok-nuxt-ultimate-tutorial |
Storyblok Nuxt 3 Module | https://github.com/storyblok/storyblok-nuxt |
Storyblok Nuxt Technology Hub | https://www.storyblok.com/tc/nuxtjs |
Storyblok APIs | https://www.storyblok.com/docs/api |
Nuxt 3 | https://v3.nuxtjs.org/ |