Vue.js Logo

Vue.js CMS

Powerful CMS. Zero headache.

Drop our API-based CMS into your Vue.js app in minutes.

Try ButterCMS free

ButterCMS provides a CMS and content API for Vue.js apps. Use ButterCMS with Vue.js to enable dynamic content in your apps for page content, blogs, and more. Check out out this Vue.js Github Repo for a full example.

Above is quick video of integrating Butter's Pages API into an application.

Butter's API slides right into our apps and lets us avoid having yet another WordPress site.

Daniel, Founder of Collective Idea

Marketers love Butter

  • ButterCMS Feature Image SEO Landing Pages
  • ButterCMS Feature Image Customer Case Studies
  • ButterCMS Feature Image Company News & Updates
  • ButterCMS Feature Image Events + Webinar Pages
  • ButterCMS Feature Image Education Center
  • ButterCMS Feature Image Location Pages
  • ButterCMS Feature Image and more...

Butter saves you development time

Save thousands of dollars worth of development time with our easy setup.

Integrating Butter into our application took less than an hour and most of that time was spent on design work.

Luke Brean, Legally

Everything you need

  • ButterCMS Feature Image Custom Page Types
  • ButterCMS Feature Image Custom Content Modeling
  • ButterCMS Feature Image Preview changes
  • ButterCMS Feature Image Media library
  • ButterCMS Feature Image CDN for assets
  • ButterCMS Feature Image Testing environment
  • ButterCMS Feature Image Localization
  • ButterCMS Feature Image Webhooks

Beautiful admin interface

Easy to use. Easy to customize.

Integrates with Vue.js

Our CMS has a simple content API and drop-in Vue.js SDK.

Butter requires zero maintenance

Never worry about security upgrades, hosting, or performance.

Try ButterCMS in your Vue.js app

Setup in minutes

Official Vue.js Guide


Integrating Butter into your Vue.js app is dead simple. Here's a mini tutorial to get a feel for adding marketing pages to your app. You can also use our Content Fields to do advanced content modeling. For full a integration guide check out our Official Vue.js Guide

First you would set up a new Customer Case Study page type in Butter and create a page. With your page defined, the ButterCMS API will return it in JSON format like this:

{
    "data": {
        "slug": "acme-co",
        "fields": {
            "facebook_open_graph_title": "Acme Co loves ButterCMS",
            "seo_title": "Acme Co Customer Case Study",
            "headline": "Acme Co saved 200% on Anvil costs with ButterCMS",
            "testimonial": "<p>We've been able to make anvils faster than ever before! - <em>Chief Anvil Maker</em></p>\r\n<p><img src=\"https://cdn.buttercms.com/NiA3IIP3Ssurz5eNJ15a\" alt=\"\" caption=\"false\" width=\"249\" height=\"249\" /></p>",
            "customer_logo": "https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV",
        }
    }
}

Then query Butter from your project: src/buttercms.js

import Butter from 'buttercms';
const butter = Butter('your_api_token');

Update the routes in your app: router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import CustomersHome from '@/components/CustomersHome'
import CustomerPage from '@/components/CustomerPage'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/customers/',
      name: 'customers-home',
      component: CustomersHome
    },
    {
      path: '/customers/:slug',
      name: 'customer-page',
      component: CustomerPage
    }
  ]
})

Setup the Customers Page to list all our customers. In components/CustomersHome.vue we define a getPages() method to get all customer pages

<script>
  // import ButterCMS from 
  import { butter } from '@/buttercms'
  export default {
    name: 'customers-home',
    data() {
      return {
        page_title: 'Customers',
        // Create array to hold the pages from ButterCMS API
        pages: []
      }
    },
    methods: {
      // Get List of Customer Pages
      getPages() {
        butter.page.list('customer_case_study')
          .then((res) => {
            // console.log(res.data.data) // Check the results in the console
            this.pages = res.data.data
          })
      }
    },
    created() {
      // Fire on page creation
      this.getPages()
    }
  }
</script>

Display the results

<template>
  <div id="customers-home">
    <h1>{{ page_title }}</h1>
    <div v-for="(page,index) in pages" :key="page.slug + '_' + index">
      <router-link :to="'/customers/' + page.slug">
        <div>
          <img :src="page.fields.customer_logo" alt="">
          <h2>{{ page.fields.headline }}</h2>
        </div>
      </router-link>
    </div>
  </div>
</template>

Setup the Customer Page to view single customer. In components/CustomerPage.vue we define a getPage() method to get a particular page based on it's slug.

<script>
  import { butter } from '@/buttercms'
  export default {
    name: 'customer-page',
    data() {
      return {
        slug: this.$route.params.slug,
        page: {
          slug: '',
          fields: {}
        }
      }
    },
    methods: {
      getPage() {
        butter.page.retrieve('customer_case_study', this.slug)
          .then((res) => {
            console.log(res.data.data)
            this.page = res.data.data
          }).catch((res) => {
            console.log(res)
          })
      }
    },
    created() {
      this.getPage()
    }
  }
</script>

Display the result

<template>
  <div id="customer-page">
    <figure>
      <img :src="page.fields.customer_logo">
    </figure>
    <h1>{{ page.fields.headline }}</h1>
    <h3>Testimonials</h3>
    <div v-html="page.fields.testimonial"></div>
    <div v-html="page.fields.body"></div>
  </div>
</template>
Try ButterCMS in your Vue.js app

About ButterCMS

ButterCMS is an API-based, or "headless", CMS. We're a hosted service and we maintain all of the infrastructure. For more information on how we compare to a traditional CMS check out API-based CMS vs Traditional CMS.

How do you compare to Wordpress?

In short, we offer all the same easy-to-use editing capabilities of Wordpress but are significantly easier for developers to setup and maintain. This means you spend less time working on your CMS and more time focusing on things important to your business.

Do you host my templates?

Unlike CMS's you might be used to, we don't control or host any of your templates. The design of your app (HTML + CSS) lives in your application along side the rest of your app. Your application calls our Content API and we return your content in JSON format. You can then render this content in any way you'd like.

Can I import my content?

Yep. To import existing content from another platform, simply send us an email.

What kind of database can I use?


No database required! We're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.

Can I host this?


No, we're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.

I have other questions


We're happy to help.

Chat with us

About Vue.js

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Headless CMS for these technologies and more

Ruby, Rails, Node.js, Python, ASP.NET, Flask, Django, Go, PHP, Laravel, Angular, React, Elixir, Phoenix, Meteor, Vue.js, Heroku

Try Butter free for 30-days

Try ButterCMS in your Vue.js app

Get started now

Sign up with Google Sign up with Github
or