Full Static with NuxtJS and Storyblok
A boilerplate project designed to demonstrate the benefits of using Jamstack and the easy configuration of a project with NuxtJS and Storyblok.
Storyblok space Setup
In this section we are going to look at how to define the component schemas needed for this project in our Storyblok space. What properties, type of fields, we have in each one and, finally, we will see an example of using these components to create a new page.
Create an account and start an space in Storyblok
Go to app.storyblok.com, select Sign up and create an account. When it's ready, create an empty space and follow the next steps.
Blocks schema
Content type
1. Page template
| Field Name | Field Type | Options |
|---|---|---|
| title | Text | |
| body | Blocks | Allow only specific components to be inserted: Groups -> Organisms |
Body
Nestable Molecules
1. Heading Section
| Field Name | Field Type |
|---|---|
| subtitle | Text |
| title | Text |
| intro | Textarea |
2. Benefit Card
| Field Name | Field Type | Options |
|---|---|---|
| icon | Asset | Images |
| color | Single-Option | Source: self; Options (name/value): orange/orange, purple/purple, blue/blue, green/green |
| name | Text | |
| description | Textarea |
Color single-option definition:
3. Tech Card
| Field Name | Field Type | Options |
|---|---|---|
| logo | Asset | Images |
| name | Text | |
| url | Link |
Nestable Organisms
1. Benefits
| Field Name | Field Type | Options |
|---|---|---|
| heading | Blocks | Allow only specific components to be inserted: Component -> Heading Section (1 max) |
| benefits | Blocks | Allow only specific components to be inserted: Component -> Benefit Card (6 max) |
| Heading | Benefits |
|---|---|
 |
 |
2. Tech Stack
| Field Name | Field Type | Options |
|---|---|---|
| heading | Blocks | Allow only specific components to be inserted: Component -> Heading Section (1 max) |
| stack | Blocks | Allow only specific components to be inserted: Component -> Tech Card |
| Heading | Benefits |
|---|---|
 |
 |
Components use case: Homepage
For the homepage we will fill in the title field and choose the organisms we want in the body.
In this example, as in the live demo, we'll add Benefits and Tech Stack organisms.
And this is how the home Config tab will look like:
For the organisms, let's see which blocks to add to them:
Benefits Organism Content
1. Adding a Heading Section molecule
2. Adding Benefit Card molecules
Tech Stack Organism Content
1. Adding a Heading Section molecule
2. Adding Tech Card molecules
Frontend Build Setup
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn dev
# build for production and launch server
$ yarn build
$ yarn start
# generate static project
$ yarn generateFor detailed explanation on how things work, check out Nuxt.js docs.