Add content and query the CMS

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 step is where we will put it all together and see live data from Prismic being used in our components.


Local Custom Types

Custom Types are models for your documents, they function as layouts for your content creators to build content pages from i.e. 'Homepage', 'About' etc. We will explore further uses for Custom Types later, but let's concentrate on pages for now. They are the place where you define and configure which Fields and Slices to use with which Custom Types, thereby controlling the design of different sections of your website. With the latest versions of Slice Machine, you will now be able to manage your Custom Types locally.

To give some context to this, Custom Types used to be configured in the Prismic Dashboard alongside your documents. While this worked well, bringing Custom Types locally brings more advantages to you as a developer, such as the ability to use content relationships in 'Slice Machine Slices' and even more powerfully, versioning of your Custom Types along with changes in your code using the versioning tool of your choice.

Update the default Custom Type

Now that you've created your components we'll need to link them to our 'page' Custom Type, so head to the Custom Types section in the sidebar. Here you'll see that a 'page' Custom Type has already been created for you.

The Custom Types tab in the Prismic Builder
The Custom Types tab in the Prismic Builder

Click into the 'page' Custom Type, then from here click the 'Add Slices' Slices button that's shown on the 'Slice Zone' bar to open the 'Update SliceZone' window. In this window, you'll see all the Slices that you just created, select the ones you want and click 'Save'. Finally, in the top right click 'Save to File System' + 'Push to Prismic' to add them to this Custom Type for your content writers to use when creating documents.

For our example let's select all the Slices, except the 'BannerSlice' which we only want to use on our homepage, then 'Save'.

The 'Update SliceZone' window in the Prismic Builder
The 'Update SliceZone' window in the Prismic Builder

Now click 'Save to File System' to save your changes locally and finally click 'Push to Prismic' to send this updated Custom Type to Prismic so your content creators can use it in their Custom Types.

Create a new Custom Type

For our Home Page document, we're going to create a new Custom Type. We're doing this as we want to restrict the Slices available for this page and it also makes creating routing for our application easier.

Back in the Custom Types section in the sidebar, you'll see a purple '+' button, click this to create a new Custom Type. Make the Custom Type a 'Single Type' as we'll only use it once, give it the name 'Home Page' and the API of home-page.

The 'Create a new custom type' screen
The 'Create a new custom type' screen

Then once you create this Type, in the Static Zone add a UID field with the API ID uid, then connect all the Slice you created to this type. Then click 'Save to File System' and 'Push to Prismic'. You can then move on to adding content for your documents.

Create a Type video example


Create and publish your documents

When you visit your Prismic repository for the first time you'll need to choose your main language, then you'll be greeted by the empty document creation screen.

To create a new document select one of the green pencil icons. Here you can start using the Slices to add content, but first add the UID (Unique Identifier) for this document, this will act as the URL. In the video below we create the homepage document and add the Banner Slice and its content.

Once you've added your content click 'Save' and 'Publish' to send you content to the API. Repeat this step for all your content and pages. You can add your own content or use the content from our demo.


Add pages & query content in your app

Now it's time to jump back into your code editor and query your content from Prismic. This has already been partly done for you in the boilerplate you're using to build this project, but since we have created a new 'Home Page' Custom Type we'll have to update the query in that file.

The Homepage

Go to your page directory in your Nuxt.js project and go to the index.vue file. You'll see that we query by the type: page and the uid: homepage. Now because we created our new 'Home Page' Custom Type as a single type, it means that...
<slice-zone type="page" uid="homepage" /> will be change to <slice-zone type="home-page" queryType="single" />

Our full documentation about querying the API with Nuxt explains this in more detail.

You can see the full code needed below.

Copy
<template>
  <section>
    <slice-zone type="home-page" queryType="single" />
  </section>
</template>

<script>
import SliceZone from "vue-slicezone";
export default {
  name: "Homepage",
  components: {
    SliceZone
  }
};
</script>

vue-slicezone version

The following example uses the latest version of the vue-slicezone package, which changes how values from the parameters are called.

If it's not already, install this by running npm install vue-slicezone@latest

Now if you run the command below and visit http://localhost:3000/ you'll see your live content from Prismic being used with your components.

  • npm
  • Yarn
Copy
npm run dev
Copy
yarn dev

The dynamic pages

In the repeatable _uid.vue dynamic pages, such as the 'About' page, we do our query a little different. We take the input from the URL route and pass it to the uid attribute, read our detailed documentation about querying the API with Nuxt.js.

You can see the full code needed below.

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

<script>
import SliceZone from "vue-slicezone";
export default {
  name: "Homepage",
  components: {
    SliceZone
  }
};
</script>

_uid.vue

The underscore in the file is how you declare a dynamic page in Nuxt.js, you can read more about that here. So again you can visit http://localhost:3000/ to now see your dynamic page. In the next article we'll learn about links and querying the menu.


Next and previous 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.