In this article we're going to look at what we did to create the features used in the blog example.

Note: Before we go any further if you haven't already read our article on getting our sample blog up and running, then we really recommend that you take a look. If you have already read the article or if you prefer to just get down to the mechanics behind the blog straight away, keep reading. Also if you haven't, you should download the project files so you can follow along clearly with everything being explained.

 

Querying the API

Querying the Prismic API is quite straight forward with Vue.js. We'll take the Blog home page query as an example. You can find this page in the application files at: src/views/BlogHome.vue.

First inside the methods  handle we create a function called getContent, inside this function we use the the Query Helper Function to query the api for the 'blog_home' single custom type and set the response as document, which we then use to access our data.

Then we create an if statement so if we get a response we can set our fields, i.e. document.id and document.data.headline, as variables or if there's no response return an error.

Finally we use the data  function to return everything we've just requested from the API and make it available to use in the <template> section of our document.

data () {
  return {
    documentId: '',
    fields: {
      headline: null,
    },
  }
},
methods: {
  getContent () {
    this.$prismic.client.getSingle('blog_home')
    .then((document) => {
      if (document) {
        this.documentId = document.id
        this.fields.headline = document.data.headline;
      } else {
        //returns error page
        this.$router.push({ name: 'not-found' })
      }
    })
},

src/views/BlogHome.vue

 

The Template

So now that we have our data from the API available we can use the UIHelpers from the Prismic Vue.js Kit to template the data on the page, in this case using the examples we retrieved previously.

Again using the Blog Home page as an example, we insert a <prismic-edit-button/> component and populate it with the Prismic document ID as prop. It's important to note the project must be set-up to use previews for the edit button to work.

Then we output the headline  field as plain text so that we have more control of the styling in the template.

<template>
  <div class="home">
    <prismic-edit-button :documentId="documentId"/>
    <h1 class="blog-title">
      {{ $prismic.richTextAsPlain(fields.headline) }}
    </h1>
  <blog-posts/>
</template>

src/views/BlogHome.vue

 
Finally and most interestingly we insert what looks like a HTML tag <blog-posts/> . This is actually a reusable Vue.js component that we have created to deliver the blog posts to our page. Let's explore this in more detail.

 

Components

Components are one of the most powerful things about using Vue.js. In general we suggest breaking up your slices into components as we did in this project. This matches well with the ethos behind slices, as they allow you to compartmentalize and reuse these component parts of your website whenever needed.

This saves us time and us many lines of code. It also means that if we need to make changes to these sections then we only need to do that in one place, making maintenance much easier. It also means that if one part of our website breaks then it won't break our entire website.

There's two ways we can create a component:

  1. As a completely self contained component that works the same as a page and queries the API for the content it needs and can be used anywhere in the views without extra information.
  2. As a 'Child Component' that is dependent on the data queried in the view, this data is then passed to the component.

Self Contained

The 'Blog Posts' component falls into the first category. So all we need to do is create it in the components folder, build it like a normal view and in the <script>  pay attention to the name of the component, as this is what dictates the tag <blog-posts/> that we use on the page. You can find this component in the application files at: src/components/BlogPosts.vue.

name: 'blog-posts',

src/components/BlogPosts.vue

 
Then in the script section of the 'Blog Home' page, we need to import the component to the page to make it available.

import BlogPosts from '../components/BlogPosts.vue'

src/views/BlogHome.vue

 
Then we need to name it as a component to be used in the template.

components: {
  BlogPosts
},

Then we come full circle to the final step where we add the blog posts tag to the template as we have already seen.

<blog-posts/>

That's it we have a fully independent component that can be used on any page.

Child Component

When you need to pass data to the component, depending on the page, things are slightly different. To get this information we use Vue.js props. We'll use the 'Text Slice' component used in the Post.vue page as example to see how to do this. You can find this component in the application files at: src/components/slices/TextSlice.vue.

In the <script> section we simply give the component a name and add any 'props' which will come from the page.

We also create a simple template this time with a DIV and inside we use the <prismic-rich-text> UIHelper and pass in the 'text' prop to populate the field.

<template>
  <div class='post-part single container'>
    <prismic-rich-text :field="text"/>
  </div>
</template>

<script>
export default {
  props: ['text'],
  name: 'text-slice'
}
</script>

src/components/slices/TextSlice.vue

 
Then in the 'Post' page we again import the component.

import TextSlice from '../components/slices/TextSlice.vue'

src/views/Post.vue

 
Export it to be used in the template.

components: {
  TextSlice,
},

The templating part is slightly different because we are accessing the data from the slices we create a v-for to return the different slices and then loop through and return each instance of a certain slice type.

So for each 'text' slice we use the <text-slice> component and send the information slice.primary.text to the prop :text. It's that simple.

<section v-for="(slice, index) in slices" :key="'slice-' + index">
    <template v-if="slice.slice_type === 'text'">
        <text-slice :text="slice.primary.text"/>
    </template>
</section>

src/views/Post.vue

 

Conclusion

I hope this helped you understand a bit better what's going on inside the Blog and how it works with Vue.js.

Try recreating some of the things that we looked at, specifically components and for more information check out our full Vue.js documentation.

Did this answer your question?