Build a Custom App using the Storyblok Management API and Nuxt.js
Storyblok is the first headless CMS that works for developers & marketers alike.
This article is outdated. Please refer to our Nuxt 3 Starter for Custom Sidebar Applications while we are working on updating this tutorial.
In this guide, we will demonstrate how to get started with the Storyblok Management API while creating a custom application using Nuxt 2. Together, we will build a simple application directly within Storyblok where users have a complete overview of the SEO data for all stories which can be revised and saved by combining both the power of the Storyblok Management API and Nuxt 2. All the code written for this guide can be found in this repository.
For this specific custom app, the SEO data is stored using the SEO field type app and for this example we will just be covering two text fields: meta title and meta description. Once you’re inside your newly created Storyblok space, navigate to the Apps section, find the SEO app and click install.
Install TailwindCSS
We are using Tailwind for quick styling of the application. The official guide on connecting TailwindCSS with Nuxt.js can be read here.
Connect Nuxt.js App with Storyblok
Install the @storyblok/nuxt-auth package to connect and authenticate your Nuxt.js project with Storyblok. You can read more about that here.
After installing ngrok we can run it in our terminal using the path from which your current project resides relative to where ngrok was installed:
Inside the Partner Portal, navigate to the Apps tab and select 0auth2 and paste the ngrok URL from your running ngrok server. In the input with the label URL to your app, we need to append: /auth/connect/storyblok
to the end of the URL. And for the label 0Auth2 callback URL /auth/callback
has to be appended as well.
If you restart the NGROK service, you must refresh all NGROK URLs inside the .env file and in the app settings in Storyblok.
We need the auth callback URI, Client Secret and the Client ID from the 0Auth 2 settings for the .env file, which should look like this:
And inside nuxt.config.js we should have the following:
Be sure to have both the Nuxt.js app and the NGROK tunnel running with an established connected to the Storyblok app. Clear cookies if you are receiving a tunnel error when visiting the custom app in the left sidebar.
Next we can retrieve some data from Storyblok, so add or replace the pages/index.vue
with the following code:
And instead of adding our functions to the index.vue
file, we can extract the 2 main functions of the application by creating a lib
folder in the root of the project and create a utils.js
file so we can export and distribute the methods where needed throughout the application:
Above, we are mapping over all the stories and request data in the getStories function by calling a GET request to:
/auth/spaces/${this.$route.query.space_id}/stories/${story.id}
There’s no need for a token when using the Storyblok Management API Client with OAuth, as the auth/
URL handles that for us. We then map over all the stories and retrieve the stories, paginate them and then request each story one by one. When using the Storyblok Management API it isn't possible to retrieve the content with the stories/
endpoint, so we need to query each entry after retrieving the list of items of the current page and set the SEO content we want to target by creating the title and description string variables. This is made possible via the SEO app we installed previously.
We will use the saveData
function to read the content body within our stories and use a PUT for updating the inputs in the 'draft' and 'published' JSON of Storyblok using the same /auth
URL.
To get the final part of the application functioning, let's create a new component called StoryCard.vue
and paste the following:
Inside the saveStoryData
method we are importing the saveData
function with the parameters it takes from the utils file. And for a better user experience we also want to trigger that an action has in fact happened when either draft or published changes have occurred once an input is edited and an action happens; here we are doing this by simulating a notification when the boolean value is changed.
Open the App from the Sidebar. If you are opening it for the first time, you will be asked if you want to give access to this app. We should now have something that looks similar to the following:
Conclusion
This guide showcased an example of creating custom applications in Storyblok. Using these techniques you can create your own apps and host them for authenticated users using technologies you’re most comfortable with. This opens the door for you to create custom apps and features to solve your users’ problems. Using our Management API you are better able to handle the content of your space.
Related Resources | Links |
---|---|
Storyblok Management API | https://www.storyblok.com/docs/api/management |
Github Repository | https://github.com/storyblok/custom-app-examples/tree/main/seo-data-app |
TailwindCSS with Nuxt.js | https://tailwindcss.com/docs/guides/nuxtjs |
How to Build a Serverless Custom App with Netlify | https://www.storyblok.com/tp/serverless-custom-app-netlify |
Custom Application | https://www.storyblok.com/docs/plugins/custom-application |
SEO App | https://www.storyblok.com/apps/seo |
Storyblok Nuxt.js Auth | https://www.npmjs.com/package/@storyblok/nuxt-auth |
ngrok | https://ngrok.com/ |
Nuxt.js 2.x Documentation | https://nuxtjs.org/ |