Update & Style Components (Storybook)

Beta

These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

This article will show you how to build & style components in isolation using the mock data generated in The Slice Builder & Storybook.


⚠️ Before You Start

If you haven't generated a component, along with the model and data, then please visit the Generate and Model a Component article first.

What is Storybook?

Storybook is a UI component explorer for frontend developers. For more information, check out the official Storybook documentation.

What that means in our case is that Storybook basically combines the local mock data and the vue.js component so you will be able to develop your component and preview how it will look without having to to publish content in the CMS, thus speeding up your development process.


Install and/or run Storybook

First time install

If you haven't already installed storybook then you'll need to open a new terminal window and run the following command inside your Slice Machine project. This command will install Storybook, register stories, add configurations to the nuxt-config.js file and run Storybook.

*If you're using the boiler plate project you can skip this step and simply run Storybook.

Copy
prismic sm --add-storybook

After installing the storybook module, you need to make sure your nuxt.config.js and your sm.json files have been updated:

  • nuxt.config.js
  • sm.json
Copy
module.exports = {  
   storybook: {
    stories: ["~/slices/**/*.stories.js"]
  },  
}
Copy
{
  "libraries": [
    "@/slices",
    "vue-essential-slices"
  ],
  "_latest": "0.0.43",
  "storybook": "http://localhost:3003"
}

Run Storybook

To access the Storybook interface, open a second terminal and run the following command:

  • npm
  • Yarn
Copy
npm run storybook
Copy
yarn run storybook

Update & Add Style to the Component

Now Storybook is launched, we can begin working on our component. For this example we're going to continue working on our Hero Slice component from the Generate and Model a Component article.

Update Your Component Code

An excellent feature with The Slice-Builder is that it generates suggested code snippets for the fields you create. When you click on the 'Show code widgets' checkbox, you'll find the code snippets for your framework with API IDs that you created previously.

Click the 'Copy code' button on the code snippets and copy the code. Open your component file, in this case, ~/slices/HeroSlice/index.vue, and paste this code into your index.vue file.

In our example, there is one difference from the suggested code snippets. We want the image to be the background image of the <section> block. To do this we need to retrieve the url of the Image field and add it to the inline CSS property of the <section> block. This is because it’s not possible to pass the slice.primary.image.url variable to the <style> section of the vue file. You’ll learn more about this section below.

Here are the code snippets for the fields we added in The Slice Builder:

Copy
<template>
  <section :style="{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(' + slice.primary.image.url + ')' }">        
    <prismic-rich-text :field="slice.primary.title" />
    <prismic-rich-text :field="slice.primary.description" />
    <p> Release date:{{slice.primary.date}} </p>
  </section>
</template>

💡 See more examples

You can see how we create templated other components in our tutorial series here.

Style Your Component

In the style section of the index.vue file, we will add the CSS to style our component. Here, we add the scoped attribute for the <style> element that targets a specific element and its children. Add a class name to each of the fields and style your component:

Copy
<template>
  <section class="hero-image" :style="{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(' + slice.primary.image.url + ')' }">
    <prismic-rich-text :field="slice.primary.title" class="hero-title" />
    <prismic-rich-text :field="slice.primary.description" class="hero-desc"/>
    <p class= "release-date"> Release date:{{slice.primary.date}} </p>
  </section>
</template>

<script>
export default {
  props: {
    slice: {
      type: Object,
      required: true,
      default() {
        return {}
      },
    },
  },
}
</script>

<style scoped>
 .hero-image {
  margin: 29px 250px 100px;
  padding: 6em 0px 22em;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  line-height: 1.75;
}
.hero-title {
  margin-left: 4%;
  font-size: 60px;
  margin-top: 8%;
}
.hero-desc {
  max-width: 490px;
  margin-left: 4%;
  width: 90%;
}
.release-date {
  margin-top: 3px;
  margin-left: 36px;
}

</style>

Preview with Mock Data

Once you've made you changes visit the Storybook interface, default http://localhost:3003, you'll be able to see what you component with the updated style will look like with the mock data from The Slice Builder.

Now you can quickly make changes to component locally before sending your Slices to Prismic, which we will learn about next!

Component Editing Example Video:


Related Articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.