logo

Setup

1. Obtain Storyblok Access Token

To consume content from your Storyblok Project you will need to connect your Storyblok API Key to nujek. We do this safely via .env file and call this environment variable in nuxt.config.js.

Lets create an .env file in your project root directory and add the following line to it.

If you need more info how to obtain the Access Token from Storyblok then read this guide

.env
SB_CLIENT_ACCESS_TOKEN=<your access token>

2a) Quick Installation with @nujek/bundle

First install a new nuxt project with TailwindCSS pre-installed.

npx create-nuxt-app my-website

? Project name: my-website
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Tailwind CSS
? Nuxt.js modules: -
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using
typescript)
? Continuous integration: None
? Version control system: None

Install nujek bundle in the root directory of your project.

yarn add -D @nujek/bundle
nuxt.config.js
export default {
  buildModules: [
    '@nujek/bundle',
  ],

  nujekStoryblok: {
    storyblokConfig: {
      accessToken: process.env.SB_CLIENT_ACCESS_TOKEN
    },
    debug: true
  }  
}
In development mode set debug: true for @nujek/storyblok module. Debugging allows you to get a visual representation of all available bloks from storyblok.

Configuration

Add @nujek modules to your nuxt.config.js file. We will make use of process.env to read the Storyblok API Key from the previous created .env file.

export default {
    tailwindcss: {
        // @nuxtjs/tailwindcss options
    },
    nujekUi: {
        // @nujek/ui options
    }
    nujekStoryblok: {
        // @nujek/storyblok options
    },
}

See nujek module options for available options.

Since nujek bundle includes @nuxtjs/tailwindcss by default, lookup the respective module options on their documentation page.

3a) Manual Installation

Instead of using @nujek/bundle you can gain full control of your modules with the manual installation. Here we go.

Part 1.

For those of you who prefers video tutorials. This guide contains Steps {1} - {4} of the documentation.

3.1 Create new nuxt project

First install a new nuxt project with TailwindCSS pre-installed.

npx create-nuxt-app my-website

? Project name: nujek-landingpage
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Tailwind CSS
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert se
lection)
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using
typescript)
? Continuous integration: None
? Version control system: None
  • Install @nujek modules and its dependencies.
yarn add -D @nujek/ui @nujek/storyblok @nuxtjs/composition-api @nuxtjs/tailwindcss @tailwindcss/aspect-ratio @tailwindcss/forms
* If you start from an existing project make sure @nuxtjs/tailwindcss gets installed too. yarn add -D @nuxtjs/tailwindcss

3.2 Module Setup

Add @nujek modules to your nuxt.config.js file. We will make use of process.env to read the Storyblok API Key from the previous created .env file.

nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/composition-api/module',
    '@nuxtjs/tailwindcss',
    '@nujek/storyblok'
    '@nujek/ui'
  ],

  nujekStoryblok: {
    storyblokConfig: {
      accessToken: process.env.SB_CLIENT_ACCESS_TOKEN
    },
    debug: true
  }
}
In development mode set debug: true for @nujek/storyblok module. Debugging allows you to get a visual representation of all available bloks from storyblok.

4. Add Tailwind Config

Create a tailwind.config.js in the root directory of the project and add the following boilerplate code to it.

  • Important: The plugins aspect-ratio and forms are mandatory!

Tailwind 2.0

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: {
    content: [
      'node_modules/@nujek/**/*.vue'
    ]
  },  
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms')
  ],
}

Tailwind 3.0 (experimental)

// tailwind.config.js
module.exports = {
  mode: 'jit',
  content: [
    'node_modules/@nujek/**/*.vue'
  ],
  safelist: [
    'font-bold',
    'text-center',
    { pattern: /bg-(red|blue|green)/, variants: ['hover', 'focus'] },
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms')
  ],
}

Read more here Tailwindcss alpha

5. Add a catch all route to render Storyblok bloks

You can now build your nuxt routes and /pages as you like. In the following example we just use a catch all route to render bloks dynamically from storyblok. Add a page called pages/_.vue to your project.

pages/_.vue
<template>  
  <Blok v-if="story" :blok="story" />
  <!-- you can even just use story.content as param -->
  <!-- <Blok v-if="story.content" :blok="story.content" /> -->
</template>
<script>

export default {
  components: {},
  async asyncData({ $storyapi, error, route }) {
    try {
      const fullSlug = (route.path === '/' || route.path === '') ? 'home' : route.path

      const currentPage = await $storyapi.getStory(
        fullSlug,
        {
          resolve_links: 'url'
        }
      )

      // alternative: if you plan to use nuxt-storyblok-queries
      // const { story } = await $storyblok.getCurrentStory({
      //   resolve_links: 'url',
      // })      

      return {
        story: currentPage.data.story
      }
    } catch (e) {
      console.error('Exception', e)
      error({
        statusCode: 404,
        message: e.message
      })
    }
  }
}
</script>

6. Theming Setup

If you don't plan to use any global theming you can skip this part

We we're searching for a reasonable way to style components globally. So we adapt vue-tailwinds theme system approach. To use global styling for components add a nujek-ui.js file in plugins/ folder.

my-project/
 -- components/
 -- pages/
 -- plugins/
   -- nujek-ui.js # <- add this file
 -- store/
plugins/nujek-ui.js
import Vue from 'vue'
import Nujek from '~nujek-ui/plugin'
import { NjSection } from '~nujek-ui/components'

const settings = {
  // your settings
}

Vue.use(Nujek, settings)

Since nujek-ui.js is a plugin file you need to activate it in your config file

nuxt.config.js
{
  plugins: [{ src: '~/plugins/nujek-ui.js' }],
}

Read more about Theming components in Theme Guide

Finished. Happy coding. 🎉

Installation Overview