Templating the Embed field

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 @prismicio/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.


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.


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.

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

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