In-Website Edit Button

You can display an edit button on your live website only for your content writers, so they can easily jump from the live website to the Prismic writing room to edit the corresponding document.

Before Reading

This page assumes that you have already included the prismic-vue plugin in your project or that you are using the Prismic Vue.js starter. Check out the Integrating with existing project page to learn how to get setup.

Configure your website for previews

Before configuring an edit button, make sure that your website is configured for previews. It's a requirement for the edit button functionality.

Adding an edit button in your template

Where you want to have an edit button, insert a <prismic-edit-button/> component with a Prismic document ID as prop. You can have several edit buttons on the same page.
See this example:

Copy
<template>
  <div>
    <prismic-edit-button :documentId="documentId"/>
    <p>Lorem ipsum...</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      documentId: ''
    };
  },
  methods: {
    getContent () {
      this.$prismic.client.getSingle('example')
        .then((document) => {
          this.documentId = document.id;
        })
    }
  },
  created () {
    this.getContent();
  }
};
</script>

The Prismic Toolbar will add an <a> element with the class wio-link. You're free to style it as you want to integrate it in your design.