Vue Storefront Sanity

# Creating content in Sanity CMS

The content that you'll create will be strictly connected with your application codebase and the integration. It's super important to keep consistency and overall order.

# Adding content schema in Sanity Studio

To create and manage content in the Sanity you need to install and set Sanity Studio - a free and open source tool that will help you create and manage you content remote or locally. All you need to know about you can find here (opens new window).

So let's start by going into the Sanity Studio codebase. In the schemas/components/ folder, add new file banner.js.

// schemas/components/banner.js
export default {
  title: 'Banner',
  name: 'banner',
  type: 'document',
  i18n: true,
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
    },
    {
      title: 'Subtitle',
      name: 'subtitle',
      type: 'string',
    },
    {
      title: 'Description',
      name: 'description',
      type: 'string',
    },
    {
      title: 'Button Text',
      name: 'button_text',
      type: 'string',
    },
    {
      title: 'Button Link',
      name: 'button_link',
      type: 'string',
    },
    {
      title: 'Image',
      name: 'image',
      type: 'image',
    },
    {
      title: 'Background',
      name: 'background',
      type: 'string',
    },
  ],
}

This step added the first schema for our content. Now we have to register this schema in the schemas/schema.js file:

// schemas/schema.js
import createSchema from 'part:@sanity/base/schema-creator'
import schemaTypes from 'all:part:@sanity/base/schema-type'
import banner from './components/banner.js'

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([
    // rest of the schemas
    banner,
  ]),
})

# Adding components in Vue Storefront

Now as the schemas are ready, we can add a Vue component to render the content based on our banner.js schema.

Create a Banner.vue component in the components/cms folder in your Vue Storefront project. It might look similar to the one below, but you should keep consistency between the Vue component and the one in the Sanity.

<template>
  <Banner
    :title="title"
    :subtitle="subtitle"
    :description="description"
    :button-text="banner_text"
    :link="banner_link"
    :image="image"
    :background="background"
  />
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Banner',
  props: {
    title: {},
    subtitle: {},
    description: {},
    banner_text: {},
    banner_link: {},
    image: {},
    background: {}
  }
})
</script>

Now when you open the Sanity Studio, you should see a new component. You can start using it by filling in with the values.

Mapping is based on the name

Mapping between the schema and component is based on the name field in the schema. Remember to set this field to match the name of the Vue component.

You can assume that the content you'll receive from the Sanity integration will look like the one below. You can read more about content rendering in the Usage tab.

{
  content: [
    {
       _type: 'banner', // name mapped to the Banner.vue
       title: 'Your title',
       ...
    }
  ]
}

For this Content Type - Banner - you can create that many components as you want to use along with your final content structure.

Pages (available only for the enterprise edition).

Go back to the Sanity Studio and select the Page from the list, click the icon to add a new page.

In the Page content creating panel, you can define page url and components structure. Add a new component from the list at the bottom and fill it with data.

When your content is ready, you can click the Publish button in the bottom panel.

Awesome 🎉  . Now you can move forward and learn about the content fetching and rendering covered on the Usage page.

← Usage →