Using Notion as a Headless CMS with Nuxt

Read Time:3 Minute, 37 Second

Notion has become increasingly popular as a versatile tool for everything from taking notes to managing projects, and when combined with it’s API we’re able to automate workflows, create custom apps, and even use Notion as a headless CMS for websites and blogs.

With the help of tools like Nuxt, we can easily create dynamic websites and blogs that are powered by Notion. In this tutorial, we will explore how to use Notion as a headless CMS with Nuxt 3. We will cover setting up the Notion API, creating a database of images in Notion, and building a simple website that displays our content.

By the end of this tutorial, you should have a good understanding of how to use Notion as a headless CMS with Nuxt 3.

Create a new Nuxt project and install dependencies:

Enter fullscreen mode Exit fullscreen mode

Run locally:

Enter fullscreen mode Exit fullscreen mode

Using Notion as a Headless CMS with Nuxt

From here, we can begin configuring notion.

Create a new Notion page. This page will house our image database:

Image description

Add an inline database called ‘Images’ using the gallery layout:

Image description

Next, we’ll create a ‘Files & media’ property to upload an image:

Image description

We can set the gallery preview thumbnail to display the uploaded file:

Image description

Let’s upload a few more for good measure:

Image description

Our database it looking great! However, we need to hook up the database to an integration before we can access it from the API.

Visit notion.so/my-integrations to create a new integration.

Once it’s created, an ‘Internal Integration Token’ will be generated:

Image description

We’ll need this token later on to access the database from the client, so we can copy and paste it somewhere secure for now.

I’ve named my integration ‘CMS’ with a custom thumbnail:

Image description

Set integration type as ‘internal’:

Image description

Since we only want to fetch images and not update or delete anything from the client, we’ll just check ‘Read Content’:

Image description

Head back to the database page we created in Step 2.

From here, we can click ‘Add connections’ where we’ll find the ‘CMS’ integration we created in Step 3:

Image description

With that, we’re all set on the Notion side. Let’s switch gears and jump into the code.

This is where our ‘Internal Integration Token’ from Step 3 comes in:

Image description

In the root of your nuxt project, create a .env file. This file will contain our internal integration token and the ID of the database we created in Step 2.

Image description

The ID of the database can be found in the URL:

Image description

NOTION_API_KEY should be set as the secret internal integration key.

Your .env file should look something like this:

Image description

Create a new file server/api/gallery.get.js:

Image description

The handler in this file will be called when the user hits the endpoint localhost:3000/api/gallery

Let’s return the following dummy data to check if it’s working:

Enter fullscreen mode Exit fullscreen mode

We should be able to see the JSON response in the browser now 🙌🏾

Image description

From here, we can install the Notion client and begin making requests.

Install the notion client:

Enter fullscreen mode Exit fullscreen mode

Let’s pull in the environment variables for authorization and try fetching the database matching the ID in our .env:

Enter fullscreen mode Exit fullscreen mode

Now when we visit localhost:3000/api/gallery, we can see the data returned from our Notion database \( ̄▽ ̄)/

Image description

We don’t need quite so much data though… we only care about the image url in this case, so let’s isolate the data we need before sending back to the front-end:

Image description

Now we only receive the neccesary data from Notion:

Image description

Finally, we can fetch the image URLs from the server and render them on the front-end ~ let’s add a bit of styling as well:

Enter fullscreen mode Exit fullscreen mode

We can now see the images rendered on the front-end:

Image description

Notion is a powerful tool and works surprisingly well as a headless CMS.

My personal website is powered by Notion, and while there are some trade-offs, Notion has become my goto for projects requiring a light weight CMS.

I would love to try some alternatives so please let me know your favorite CMS for small-scale projects!

Full Source Code

Source: https://dev.to/trentbrew/using-notion-as-a-headless-cms-with-nuxt-3mk

Tag Cloud

Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
C elements that are not supported in C++🚫 Previous post C elements that are not supported in C++🚫
Importing SVG files as React components with Vite Next post Importing SVG files as React components with Vite

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.