How to create slideshow using storyblok and nuxt

  0 comments

I am going to elaborate how to create simple slideshow in nuxt using storyblock with the help of “bootstrap-vue” plugin.

To achieve this requirement we will need to follow these steps.

Step 1: Install nuxt-app using create-nuxt-app

npm init nuxt-app

Use the above command and then you will prompt to give the following details as below.

  1. Then you will prompt to choose the “programming language” chose “JavaScript”
  2. Then you will prompt to choose the “Package manager” chose “Npm”
  3. Then you will prompt to choose the “UI framework” chose “Bootstrap Vue”
  4. Then you will prompt to choose the “Nuxt.js modules” chose “Axios - Promise based HTTP client”
  5. Then you will prompt to choose the “Linting tools” chose “ESLint”
  6. Then you will prompt to choose the “Testing framework” chose “None”
  7. Then you will prompt to choose the “Rendering mode” chose “Universal (SSR / SSG)”
  8. Then you will prompt to choose the “Deployment target” chose “Server (Node.js hosting)”
  9. Then you will prompt to choose the “Development tools” chose “jsconfig.json (Recommended for VS Code if you're not using typescript)”
  10. Then you will prompt to choose the “What is your GitHub username?” you can give right user name or you can leave it blank.

Below is the screenshot of all settings which I did above:

image_2021_02_09T11_38_09_820Z

After filling all the required settings it will install the all related plugins/ modules which will need in nuxt-app development.

To get started:

cd test-app
npm run dev

After running above command you will access dummy site on http://localhost:3000/

When you will open this link then you will get the same screen as below:

image_2021_02_09T12_13_44_513Z

Step 2: Create and account on http://app.storyblok.com/ and configure it.

These are the following step to connect Storyblok with Nuxt.js

  • Create new space with name ”test-app”
  • Then click on setting tab and do the following changes according to below screenshot and save the change you did on this page.image_2021_02_09T12_18_04_992Z
  • Then go to content section and click on home page.image_2021_02_09T12_21_01_625Z
  • Then you will get this screen.

    image_2021_02_09T12_21_01_625Z

  • As you are seeing that we are getting the message “This page could not be found” to remove this error click on config tab and add “/” to “Real Path” and save it
  • Use the below command to install “storyblok-nuxt” modules that will help in integration. npm install storyblok-nuxt --save

    And do the following changes in nuxt.config.js

    Screenshot 5

    Replace the STORYBLOK_SPACE_TOKEN with a preview access token of your space. You can find all tokens of your space in Settings under API-Key tab.

  • Now when you will come back to story block You will get below screen

    image_2021_02_09T12_33_14_232Z

Step 3: Create a slide show component on storyblok.com.

Below are the following steps which you will perform from storyblock.com side

  • Got to “Components” section and click on “new” button and define a name “slide” and click on next button.

    image_2021_02_09T12_18_04_992Z

  • And click on “schema” tab and add “Image” field and save the new schema.
  • Add name field as text field and save it.
  • And now go to home page component and add slide block and upload images and save it.

    image_2021_02_09T11_38_09_820Z

Step 4: Create a slide show component on nuxt.js.

Follow the below steps from nuxt.js side

1) Create a file “Slide.vue” within components folder and use the below code.

slide

2) Create a file “Page.vue” within components folder and use the below code.

page

3) Create components.js file within plugin folder with below code.

component

4) And replace the code of index.vue within pages folder with below code.

index

5) And add below code in nuxt.config.js plugins: [ '~/plugins/components', ],

After all these steps restart the app using “npm run dev” command and you will get the below screen that will have slideshow.

image_2021_02_09T12_21_01_625Z

Add new comment