Add the default Library to your project

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 teach you how to add and customize the default library in your project.


Connect the default Library

The hard work here is already done for you. The default library will be automatically added and set up for you in your project if you're using the pre-configured project or the automatic setup command. The library Slices will also be added to your default Page custom type in your Prismic repository.


Customize the default library

You've built a page with the library., now it's time to give them to touch. We provide a few different ways to make these awesome components your own:

  • Variations
  • CSS Variables
  • Themes

Variations

The simplest way to customize the vue-essential-slices library is to add different content to the components in Prismic. The components have been created to transform as your content does. So check out our Storybook page and see all of the components and their variations here.

CSS Variables

We've included some global classes in the components for you to make quick styling changes.

One way to do this is to create a _global.css file in the root of your application and add the CSS root selector and change the pre-defined CSS variables. For example, the following will change all buttons to the color red:

Copy
:root {
    --color--secondary: #ff1515;
}

Add its path to the css property of your nuxt.config file:

Copy
css: ["vue-essential-slices/src/styles/styles.scss", "_global.css"]

Themes

CSS variables help you define the color of a primary button, while the theme defines if the button should be primary or not (while being able to override everything if it needs to). It's not perfect though, having the right structure takes time.

Each slice takes an optional theme prop as an argument. Inspired by css-in-js solutions like Emotion, it's meant to provide quick access to deeply-nested style properties. We are currently on the path to unify defined properties, across various Slice Machine libraries.

At the moment, these theme properties should be available for all components:

align

It defines the alignment of the text.

color

It defines the text color.

wrapper

The object bound to the wrapper component of each slice.

title

The object passed to titles in the section. Accepted keys: align, color, and background.

description

The object passed to descriptions in the section. Accepted keys: align, color, and background.

eyebrow

The object passed to eyebrow headlines in the section. Accepted keys: align, color, and background.

Update the Vue.js files with the theme prop and data:

Copy
<template>
  <slice-zone type="page" :uid="$route.params.uid" :theme="theme" />
</template>

<script>
import SliceZone from "vue-slicezone";

const theme = {
  align: "left",
  CallToAction: {
    align: "right",
    color: "#FFF",
    wrapper: {
      style: "background: tomato"
    },
    eyebrow: {
      color: "pink"
    }
  }
};

export default {
  components: {
    SliceZone
  },
  data() {
    return {
      theme
    };
  }
};
</script>

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.