DEV Community

Cover image for Static Site using Nuxt.js with Storyblok CMS
Silas Getachew
Silas Getachew

Posted on

Static Site using Nuxt.js with Storyblok CMS

#nuxt #storyblok #staticsite #javascript

You want to build fast and secure website?

This guide show how to develop full-blown website using Nuxt.js, Storyblok and Tailwind CSS.

Introduction

**What is Jamstack?

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity.

  • Better Performance

  • Higher Security

  • Cheaper, Easier Scaling

  • Better Developer Experience

Site Generators

**Nuxt.js **is a free and open source JavaScript library based on Vue.js,

BTW: Easy to learn. Easy to master, Zero Configuration, SEO friendly

Headless CMS

A headless CMS is any type of back-end content management system where the content repository โ€œbodyโ€ is separated or decoupled from the presentation layer โ€œhead.โ€ Content that is housed in a headless CMS is delivered via APIs for seamless display across different devices.

StoryBlok

The first component-based headless CMS with Visual Editor.

Let's Start coding

Installation

Requirement

Nuxt.js v2.14.0
Nodejs v12.3.1
Npm v6.9.0
Enter fullscreen mode Exit fullscreen mode 
yarn create nuxt-app my-nuxt-app // npx create-nuxt-app my-nuxt-app
cd my-nuxt-app
yarn dev // npm run dev
Enter fullscreen mode Exit fullscreen mode

I prefer yarn.

Install Storyblok package.

yarn add @storyblok/nuxt //for nuxt v3
yarn add  @storyblok/nuxt-2 //for nuxt-2
Enter fullscreen mode Exit fullscreen mode

Next step is add to nuxt module in nuxt.config.js

['@storyblok/nuxt/module', { accessToken: process.env.YOUR_STORYBLOK_API_KEY }],
Enter fullscreen mode Exit fullscreen mode

To get this stroyblok API key get to your space in Storyblok and copy the preview api key.

*From Storyblok side
*

  1. Create Space in Storyblok
    Image description

  2. Create component
    Image description

  3. Define component schema
    Image description

In the Code(Nuxt.js)

Create Page component in components/Page.vue

<template>
  <div
    v-editable="blok"
    class="px-6">
    <component
      v-for="blok in blok.body"
      :key="blok._uid"
      :blok="blok"
      :is="blok.component" />
  </div>
</template>

<script>
export default {
  props: {
    blok: {
      type: Object,
      required: true
    }
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

To make access component to globaly
Add component to plugins/components.js

import Page from '~/components/Page.vue'

Vue.component('Page', Page)
Enter fullscreen mode Exit fullscreen mode

Then add this plugin to nuxt.config

plugins: ['~/plugins/components']
Enter fullscreen mode Exit fullscreen mode

Let's create index page and fetch the content from Storyblok

<template>
  <div>
    <component :is="story.content.component" v-if="story.content.component" :key="story.content._uid" :blok="story.content" />
  </div>
</template>

<script>
import { useStoryblokBridge } from '@storyblok/nuxt'

export default {
  middleware: 'fetchGlobalLayout',
  asyncData: (context) => {
    const version = context.query._storyblok || context.isDev ? 'draft' : 'published'

    const language = context.app.i18n.locale // this i18n, i will get back this. 

    return context.app.$storyapi
      .get('cdn/stories/home', {
        language,
        version,
      })
      .then((res) => {
        return res.data
      })
      .catch((res) => {
        if (!res.response) {
          context.error({
            statusCode: 404,
            message: 'Failed to receive content from api',
          })
        } else {
          context.error({
            statusCode: res.response.status,
            message: res.response.data,
          })
        }
      })
  },

  mounted() {
    useStoryblokBridge(this.story.id, (newStory) => (this.story = newStory))
  },
}
</script>
Enter fullscreen mode Exit fullscreen mode

To be continued

Top comments (1)

Collapse
 
kissu profile image
Konstantin BIFERT •

Hi, thanks for the article! ๐Ÿ™๐Ÿป
Do you think that you could edit your post with a async/await syntax (more modern and actually recommended over .then)?
Also, I'm not sure if code highlight is possible here but that would probably make it perfect!

Read next

bslaven profile image

Razlika izmeฤ‘u 'type' i 'interface' u TypeScriptu

Slaven Bunijevac -

sh20raj profile image

Facebook post UI clone! ๐Ÿš€ - Tailwind

Sh Raj -

melihs profile image

Web Development with Web Components: The New Way of Modularity

Melih ลžahin -

aneeqakhan profile image

How to Add Markers to Google Maps in React.js

Aneeqa Khan -