Build a recipe-sharing site with Nuxt & BCMS (Under an Hour)

Creating a recipe-sharing website using Nuxt and BCMS will be an exciting project, allowing users to share their favorite recipes and discover new ones. On the other hand, if you structure your recipe website or app, you can organize content management and publishing to monetize your recipe-sharing platform.

To create a recipe-sharing platform, you can leverage the power of Nuxt.js, a popular Vue.js framework for building web applications, and BCMS, which provides a flexible and scalable backend infrastructure.

Nuxt.js supports building a fast and dynamic frontend interface for our recipe-sharing platform. It provides features like server-side rendering, static site generation, and routing capabilities that enhance the user experience and make the platform easily navigable.

BCMS serves as the backend system that powers our recipe-sharing platform. It enables us to handle recipe data storage and retrieval and facilitate user interaction through features like comments and likes.

By combining Nuxt.js and BCMS, you can create a powerful and user-friendly recipe-sharing platform that caters to the needs of both recipe creators and food enthusiasts.

Below is a step-by-step tutorial on creating a recipe-sharing platform that covers the basic features of recipe posting and retrieval using Nuxt and BCMS.

You can view the finished version of the application here.

As with any building process, a workflow needs to be followed. Luckily, this one is simple with easy-going logic.

When it comes to using BCMS, you have two possibilities. You can use it either on the cloud or locally (https://docs.thebcms.com/install/locally#install-bcms-cli).

Using BCMS on the cloud simplifies your tasks. It handles server setup and maintenance and ensures continuous uptime, allowing you to concentrate on frontend development. The API URL is the same from development to production.

Using it locally or self-hosted implies that we run the program locally on our machine and then host it on a server of our choice, such as DigitalOcean.

Now, let's dive in and explore how you can host on the cloud.

To host it on the cloud, you can log in to your bcms dashboard and then create an instance on our dashboard.

An instance is essentially a container that stores all the specific application data. When you initially log in, your dashboard will resemble this, except the instances tab might be empty if you haven't created an instance before.

To create a new instance, click "Create instance".

On the following page, you will be brought to a phase where you can select self-hosted or cloud. Select cloud and begin your free trial.

Simply follow this guide to host BCMS yourself. If everything is in order, your bcms application should be running at [localhost:8080].

Now, it is time to model data on the BCMS.

In a headless CMS, data modeling entails specifying content types, properties, and relationships in an organized manner. Specific fields define content types, such as articles and blog entries, and relationships between them are built. This technique enables flexible content retrieval via APIs, allowing it to be presented across multiple platforms independent of the CMS.

BCMS makes specifying property fields and their types really easy. On the left side of your BCMS dashboard is an administration panel containing Templates, Widgets, and Groups, and then further Down, you will find entries. What does this all mean, and how do they come together?

Templates - These are the places where you define the structure of your content and where you specify what fields a blog article may carry, for example. From this content structure, you create your entries, which are dynamic information based on those fields.

Entries - An Entry is basically a simple record of a template, a dynamic piece of content that follows the content structure you defined in your template.

Groups - Groups in BCMS are reusable building blocks made of multiple properties. Groups can be included in any template, widget, or other group.

So you need to create a new template for the recipes, define all the fields that need to be there(Might Contain groups), and then create dynamic entries.

Look at the finished application to see what fields you'll need. First, look at the home page displaying the list of recipes and see the first things you'll need there.

From the image above, you can see what you need already, such as a cover photo, the recipe name, the food category, and a short description.

Now, click on a recipe and view the details to get the other fields you need.

From the Above video and earlier picture, these are all the dynamic fields you'll need to live on your BCMS Instance. Here is a list containing the properties and their types.

Title - String - Required

Now is the time to start by creating all the groups and then creating the template consisting of the groups.

To create a group, go to your dashboard, click on groups, and add a new group.

The groups you need are:

SEO, with the properties being

Recipe Step

QA Item - Group View

Now, you'll create a template for the category, not a group, because the categories will also be a template. You will create new categories based on that, and categories on articles serve as a grouping where you can fetch all posts within that category.

In BCMS, you'll need to create a category template to link to our recipe template. Very soon, you'll roll out a tag feature in your entries, automatically categorizing articles and tags.

With that done, you can now go ahead and create our Recipe Template and link the necessary group pointers to the groups we just created.

You can now go ahead and create a few entries using the Recipe template that was just created.

Please ensure that all property names and types match those shown in the pictures; this will be useful when we integrate with our RecipeUI.

To further get a feel for the amazing features BCMS Provides, you will go ahead and make other parts of your website dynamic. These include the Footer, the Header navigation, and the Home and Legal pages.

Let's start with the Header. This template will only be one entry, so you can't create more than one entry based on this template because you'll only have one navigation in our app.

By default, when you create the template, you'll already get the title and the slug fields; all that you need next is a logo(media) and a nav(Rich text Array)

Now, create a new entry based on it and repopulate the required fields with the fields that will live on the application header.

Proceed further to do the same for the application footer, a single template entry Containing the fields you need for the footer.

It is time to model the content for the recipes page.

Looking at the picture, that page's major content is the headline.

So now, you need to model it with an optional SEO Optimization. Create a single-entry template and add SEO and headline fields alongside the defaults.

Now, go ahead and create the entry for it.

The Legal Pages are the pages in the footer Under Legal Tab.

These are just basic Pages that link to pieces of legal information. So all you need is just the title and the Slug for its templates. This will be a multi-entry template because we have more than one legal page.

This will do just fine, as you can type the pieces of information you need in the automatic text field BCMS provides in the entry creation window.

You can view this Recipe CMS on the BCMS Starter’s Page on GitHub.

So this is the part where you create the Nuxt application and pull in these dynamic contents from the BCMS backend to the Nuxt frontend.

If you have been creating your own BCMS Recipe backend from scratch, the next thing to do is to create an API key.

You need an API key to be able to access the backend. BCMS API keys prevent the backend from unauthorized access.

To create an API key, go to your BCMS dashboard, and then under key managers, create an API key named Development Key. You can now enable the functions you want to carry out with this API key.

For this tutorial, I only want to access resources and not to update or delete resources from the frontend using the API key. So, I’ll only check the box for getting resources for all templates.

At this point in time, you can take two options: when creating the Nuxt application, you can either create the application from the start or clone the BCMS Recipe Starter from GitHub. Let’s see how to do both.

Follow the BCMS Nuxt documentation to learn how to create a BCMS Nuxt application. Link the API key, you created in the previous step with this application so you can access your template entries.

You can clone the BCMS Recipe Starter from GitHub and follow these instructions to run it.

You can find the key secret and ID in the Key Management tab in your BCMS.

Run npm run dev to spin up the Nuxt server.

This repo has been fully built, and upon running the server, you can see that it connects to your backend and pulls the data from your backend already, but how does it work, and how can you do it in a new project? You will learn that next.

To get data from Nuxt, use The BCMS Client Methods, which are available automatically after creating a Nuxt project with BCMS. Please take note that, at this time, it only works in Typescript and not Javascript.

Let’s see the BCMS client methods in action.

To get all the entries of a template, all you have to do is:

What is going on in the above code?

First, you imported a RecipeEntry Typescript type. This type was automatically generated by BCMS when you created your application. In TypeScript, a type is a convenient way to refer to a value's different properties and functions.

In this case, the type refers to all the properties in our template, and these are the properties you created when modeling your data. If you click on the file in your code editor, it will open up bcms/types/entry/recipe.d.ts, and you will find the file's content to be the properties you modeled earlier and their property types.

Secondly, you created a Nuxt Async Method used for fetching data. Inside this method, you can access the Nuxt runtime app config, also known as nuxtApp. There, you can access methods and functions that have been injected into the Nuxt context, either during installation or manually installed. And then named it ctx for a short and better naming convention.

const { data } = useAsyncData(async (ctx) =>

In this case, the bcms function was automatically installed when you created the application with the BCMS CLI. Now, from that ctx object, you can access the bcms object, which was injected into it by the BCMS CLI. From there, you can access bcms Client Methods, in this case, the entry.getAll function and then model the response to model the RecipeEntryMeta Type.

You can access the result of the function by console logging the data variable and expanding further from the browser console to see what you can access from it.

To get a single entry from a template, in this case, the recipe page, you can use the entry.get function and pass in the template name and the entry slug or ID. Then, also map the results to the RecipesPageEntry type.

With these client methods, you can get all the data you need from your bcms, be it the legal page, header footer, or any other detail you need, which you can then organize into components and/or pages. Dive into the folder structure of the Official BCMS Recipe-Sharing Website with Nuxt to learn how the application is structured.

Deploying a BCMS Nuxt Project is super easy and fast. But if your BCMS backend is running on your machine locally, you’ll first have to deploy it to a live URL instead of localhost:8080.

Here is the official documentation on how to host your application on DigitalOcean, for now, we only have documentation for DigitalOcean, but we plan to update it with more very soon.

If your application was not cloud-hosted by BCMS and you just deployed it yourself to DigitalOcean, this means your application URL has now changed, and you’ll have to update your .envvariables to connect to the new URL.

You can update these variables in only two files, which are .env and nuxt.config.ts

On these files, find the lines of code where NUXT_PUBLIC_BCMS_API_ORIGIN or VITE_BCMS_API_ORIGIN appears and then update it with the new cloud application.

Nuxt 3 can be deployed to several cloud providers with minimal configuration. Visit nuxt.com/deploy to learn how to deploy to your cloud provider easily.

In conclusion, building a recipe-sharing website with Nuxt 3 and BCMS demonstrates the power and versatility of these tools. BCMS headless CMS, provides a robust and flexible foundation for managing content, while Nuxt 3 offers a modern and performant framework for building user-friendly web applications. Together, these tools enable developers to create engaging and interactive experiences that cater to a wide range of users.

The recipe-sharing website presented in this article serves as a starting point for exploring the endless possibilities of BCMS. With its modular architecture and rich ecosystem of extensions, BCMS can be adapted to various use cases and seamlessly integrated with other popular tools and frameworks.

I encourage you to embark on your own BCMS journey and discover the transformative power of headless content management. By leveraging BCMS's capabilities, developers can build innovative and scalable solutions that empower users to create, manage, and share content easily.