Templating the Color field
The Color field allows content writers to select a color through a color picker or to manually write a hexadecimal value.
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.
Here's an example of how to integrate a Color field into your template.
In this example, the Color field has the API ID of color.
Copy
<template>
<div>
<h1 :style="{ color: fields.color }">Colorful title</h1>
</div>
</template>
<script>
export default {
data () {
return {
fields: {
color: null
}
};
},
methods: {
// This is an example query, the important part is above.
getContent () {
this.$prismic.client.getSingle('example')
.then((document) => {
this.fields.color = document.data.color;
})
}
},
created () {
this.getContent();
}
};
</script>