Embed Templating with Vue.js

The Embed field will let content writers paste an oEmbed supported service resource URL (YouTube, Vimeo, Soundcloud, etc.) for adding the embedded content to your website.

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.

Warning

When outputting embedded content on the client side, scripts inside the embedded HTML will not be executed unless it is an iframe. In some cases you might want to write some custom code in your application instead of using the Embed field. For example for a Twitter embed, you can use the vue-tweet-embed package along with a Key Text field for setting the ID of a Tweet.

Usage

Here's an example of how to integrate an Embed field into your template.
In this example, the Embed field has the API ID of video.

Copy
<template>
  <div>
    <prismic-embed :field="fields.video"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fields: {
        video: null
      }
    };
  },
  methods: {
    // This is an example query, the important part is above.
    getContent () {
      this.$prismic.client.getSingle('example')
        .then((document) => {
          this.fields.video = document.data.video;
        })
    }
  },
  created () {
    this.getContent();
  }
};
</script>

To learn more about the Embed field check out the user guide.