Example - using vue to pull in and render images and text via wp rest api and acf

acf-to-vue-via-wp-rest-api.js

/*- - (in router.js) - -  */

  routes: [
    ...
    {
      path: '/:which',
      name: 'home',
      component: Home
    }
	  
/*- - - - - - - - - - - -  */
// Home.vue

<template>
  <div class="label-rendering-app" :class="{ 'zoomed': zoomed, 'half': !zoomed }">
    
	<div v-if="!ishome">
			<div class="img-wrap wrap" id="theimgwrap">
				<img id="theimage" ref="iz"
					:src="imgsArray[this.currentImgIndex].url" 
					:alt="imgsArray[this.currentImgIndex].alt"
					@click="zoomToggle" 
					:class="{ zoomed : zoomed, landscape : imgsArray[this.currentImgIndex].landscape }"
				>

				<div id="theimgnav" v-if="isSeries">
					<button id="left-button" @click="imgIndexDown">←</button>
					<button id="right-button" @click="imgIndexUp">→</button>
					image {{currentImgIndex + 1}} of {{imgsArray.length}}
				</div>

			</div>
			
			<div v-if="!zoomed" class="label-wrap wrap" id="thelabelwrap">
				{{artist}}<br>
				<em>{{ title }}</em>, {{date}}<br>
				{{media}}<br>
				{{credit}}<br>
				{{ac_num}}<br>
				<div v-html="postcontent"></div>
			</div>
    </div>

    <div v-if="ishome">
      <h2>Welcome to the post label rendering application.</h2>
      <p>Add a post id to the url like this: <code>/141</code></p>
    </div>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  	name: 'home',
  
  	data (){ 
          return {
          baseurl : 'your/wordpress/site-here/wp-json/wp/v2',
          postcontent: '',
          title:'',
          artist:'',
          media:'',
          date: '',
          credit:'',
          ac_num: '',
          zoomed:false,
          vw: 0,
          vh: 0,
          currentImgIndex: 0,
          imgsArray: [],
    	  }
  	},

  	computed: {
		whichpost(){
			return this.$route.params.which;
		},

		ishome(){
			return Object.keys(this.$route.params).length === 0;
		},

		isSeries(){
			return this.imgsArray.length > 1;
		}

  	},

	mounted(){
		//last minute data change to trigger rehydration
		this.vw = window.innerWidth; //1230
		this.vh = window.innerHeight; //970
		document.body.style.backgroundColor = 'white';

		var posturl = this.baseurl + '/posts/' + this.whichpost + '?_embed';
   		axios.get(posturl).then(response => {
			//console.log("response.data", response.data);

			if (response.data.acf.image_collection){
				this.imgsArray = response.data.acf.image_collection;
			};
			
			const firstImgObj = {
				alt: response.data._embedded['wp:featuredmedia'][0].alt_text,
				height: response.data._embedded['wp:featuredmedia'][0].media_details['height'],
				width: response.data._embedded['wp:featuredmedia'][0].media_details['width'],
				url: response.data._embedded['wp:featuredmedia'][0].source_url,
				url: response.data.jetpack_featured_media_url
			};

			this.imgsArray.push(firstImgObj)
			this.imgsArray.reverse();

			this.imgsArray.forEach(element => {
				let th = element.height;
				let tw = element.width;
				console.log(th, tw);
				if ( tw > th ){
					element.landscape = true;
				} else {
					element.landscape = false;
				};
			});

			this.title = response.data.title.rendered;
			this.postcontent = response.data.content.rendered;
			this.ac_num = response.data.acf.accession_number;
			this.artist = response.data.acf.artist;
			this.media = response.data.acf.media;
			this.date = response.data.acf.date;
			this.credit = response.data.acf.credit;
		
		}).catch( error => { console.log('There was an error:', error.response) })
	},

	methods:{
		zoomToggle(){
			if (this.zoomed == true ){
				this.zoomed = false;
				document.body.style.backgroundColor = 'white';
				document.body.querySelector('#theimgwrap img').style.height = 'auto';
			} else {
				this.zoomed = true;
				document.body.style.backgroundColor = 'black';
				let heightNum = this.vh - 100;
				let heightStr = heightNum.toString() + 'px';
				document.querySelector('#theimgwrap img').style.height = heightStr;
			}
		},

		imgIndexUp(){
			this.currentImgIndex++;
			if (this.currentImgIndex == this.imgsArray.length){
		 		this.currentImgIndex = 0;
			}
		},

		imgIndexDown(){
			this.currentImgIndex--;
			if (this.currentImgIndex < 0){
				this.currentImgIndex = this.imgsArray.length - 1;
			}
		},

		sayIfTooWide(){
			const widthNow = this.$refs.iz.width;
			if (widthNow > this.vw){
				console.log('it is too wide');
			} else {
				console.log('it is not too wide');
			}
		}
	}
}
</script>

<style lang="scss">

body {
	text-align: center;
}

div {
	box-sizing: border-box;
}

#theimgnav button {
	border:0px;
	border-radius:20px;
	padding:3px;
	font-size:20px;
	color:#2c3e50;
	&:focus {
		outline:none;
	}
	&:hover {
		background-color:lighten($color: #2c3e50, $amount: 50);
	}
}
/* seeing both */
.half {
	padding:30px;
	#theimgwrap {
		width:50%;
		float:left;
		img {
			width:90%;
		}

		button {
			position: relative;
    		top: 2px;
		}
	}

	#thelabelwrap {
		width:50%;
		float:right;
	}
}
/* when zoomed */
.zoomed {
	//transition: all .3s ease;
	#theimgwrap {
		width:100%;
		margin-top:25px;
		vertical-align: middle;
		position:relative;
	}

	.landscape {
		height:auto !important;
		width:92%;
		max-width: 1200px;
	}

	#theimgnav button {
		position: absolute;
	}

	#theimgnav {
		#left-button {
			left:4px;
			top:50%;
		}

		#right-button {
			right: 4px;
			top:50%;
		}
	}
}

#thelabelwrap {
	text-align: left;
}

#theimage {
	//max-height:900px;
}

</style>