Minimal Dokoo Blog Example

In this article, we will create a minimal blog example using Dokoo and Nuxt JS. 

Here is the final result.

You can find all the code of this example on this Github repository: https://github.com/Dokoo-io/dokoo-blog-example

Dokoo is a headless CMS that will help you handle content and process it the way you want. If you are a FrontEnd Developer, it means that you won't have to deploy a complete Wordpress or any other fat CMS to enable your clients to update their content on a very basic project like a static website. 

The idea behind this is simple: Instead of choosing the most complete software solution that hopefully handles most of your use-cases, you choose smaller, minimal solutions and deploy every functionality only when you need one of them.

The goal here is to delegate responsibilities when building a digital solution to better focus on your own value. And if you're a modern front-end developer I'm sure that creating Wordpress themes every day bothers you more than once a day.

In this article, we're creating a minimal Blog to publish articles once in a while.

Requirements to understand this article:

• Understanding NuxtJS mechanisms
• Believing that earth is round

---

Configuring Dokoo

Configuring Dokoo for a blog is divided in two parts:

• Creating the data model (Think of it like an old fashioned SQL Schema where you would create an articles table with a title and a content column.)
• Creating an output feed (Think of it like an inverted GraphQL endpoint. You choose the fields that will end up in your API endpoint.)

Configuring the data model

In order to create our blog, we'll need to configure a Dokoo Space that will represent our data model for our blog.

1. Log in to Dokoo
2. Create a Space named "My Cooking Blog"
3. Create a Custom Type named "Articles"
4. In this newly created Custom Type, create a new text attribute named Content, and choose the Markdown Editor (I'm sure you all love markdown)

Configuring the output feed

Now that our data model is ready, we need to create an output feed of our articles. On the Custom Type dashboard, click on "Feeds" and "Create a new feed".

1. Add the native attribute "ID"
2. Add "Title", "Cover" and "Content" attributes to the feed.

Generating an access token to access the feed.

We'll need an access token to access our feed. To generate this, go on the "API Tokens" page and generate a token granting the "read_feed" scope. This token will only be able to access the output feed. Basically this is a read-only token that you can make public.

Copy and save this access token, you will need it later on.

---

Integrating Dokoo in a NuxtJS App

To create our minimal Blog, we'll use a free Tailwind template. Everybody loves tailwind right?

The template we'll be using is this one. A template created by davidgrzyb, a full stack developer in Ontario. Shoot out to him for creating this minimal yet very effective template for our use-case.

Creating the NUXT App

First of all, we need to create our Nuxt project:

npx create-nuxt-app dokoo-blog-example

We need to add the @nuxtjs/tailwindcss package to our project to make all of this work:

cd dokoo-blog-example
yarn add @nuxtjs/tailwindcss

and register it in our nuxt.config.js file:

{
  ...
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    '@nuxtjs/tailwindcss' // -> This is the line we need to add
  ],
  ...
}

Then, we'll need to decompose our template in multiple components to better organise our code. We'll create a default layout containing all the common markup of our blog:

layouts/default.vue

Connecting with Dokoo's Nuxt module

Installing the Module

yarn add @dokoo/nuxt

Configure @dokoo/nuxt by registering it in your nuxt.config.js and adding your credentials:

export default {
  ...
  modules: [
    '@dokoo/nuxt'
  ],
  dokoo: {
    clients: {
      myCookingBlog: {
        token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ5ZWxsYXctY21zIiwianRpIjoiZTE0MGNjOTEtZTkxMi00MjlkLTlmOWMtNTE3YjEwZjlkNGRlIiwic3ViIjoidTI4UFZTQ0ZwME45dkt2SjQzMnlLSHd4WUVFMiIsInNwYWNlX2lkIjoiOGU0NTg5MjMtNjRjOC00MDJlLWE2YTUtNDhiMWJlNDY3N2ZmIiwiaWF0IjoxNjQ1MDQzMTEwfQ.f7LVoyInTldO8ajSSx3zvNsZn7YPfoTBXmlQW3hQzCU'
      }
    }
  },
  ...
}

If you just want to test the integration, you can use those credentials ;)

Fetching the articles feed

Now, we just have to fetch the articles feed from the index.vue page and display the articles:

Et voilà! We have implemented a basic dynamic website with Dokoo and NuxtJS.

Conclusion

If you are a front-end developer, you might be in three different situations after reading this article:

• You never heard about Headless CMS before and your mind is blown. You just discovered that you can build dynamic websites with the technologies you love, without firing a full featured Wordpress website.
• You know the fantastic world of Headless CMS and you are just wondering why we created Dokoo and why we think we achieve some tasks better than leaders like Contentful or Strapi. The response to this question will come in a future post so stay tuned :) Or shoot me a message if you want to chat, I'm really curious about all the questions you could have after testing our service.
• You know the world of Headless CMS and you don't care about it. That's entirely fine. I'm not sure why you're still reading this article tho...