brussell98/VMAd.vue

## default.vue
<script>
export default {
	watch: {
		$route() {
			if (this.$store.state.isFirstRender) // Add necessary things to store for this to work
				this.$store.commit('routeChanged');
		}
	}
};
</script>

## index.vue
<template>
<div>
	<div class="ad-unit container">
		<v-m-ad v-if="$device.isDesktop" adId="leaderboard-id"></v-m-ad>
		<v-m-ad v-if="!$device.isDesktop" adId="300-width-id"></v-m-ad>
	</div>

	<v-m-ad v-if="$device.isDesktop" adId="footer-float-id" rich></v-m-ad>
</div>
</template>

<script>
import VMAd from '@/components/VMAd';

export default {
	components: { VMAd }
};
</script>

<script lang="sass" scoped>
.ad-unit
	margin-top: 40px
	margin-bottom: 40px
	text-align: center
	// &:empty // Need to make this work with venatus still
	// 	margin-top: 0
	// 	margin-bottom: 0
	// & ::v-deep iframe // Testing with blocked ads fill-in
	// 	background-color: darkred !important
div:last-child > .ad-unit
	margin-bottom: 0

</script>

## nuxt.config.js
module.exports = {
	// Headers of the page
	head: {
		script: /*process.env.NODE_ENV === 'development' ? [] : */[{
			vmid: 'vntsm',
			innerHTML: `(function() { document.write('<div id="vmv3-ad-manager" style="display:none"></div>'); document.getElementById("vmv3-ad-manager").innerHTML = '<iframe id="vmv3-frm" src="javascript:\\'<html><body></body></html>\\'" width="0" height="0" data-mode="scan" data-site-id="site-id"></iframe>'; var loaderFrame = document.getElementById("vmv3-frm"); var loaderFrameWindow = loaderFrame.contentWindow ? loaderFrame.contentWindow : loaderFrame.contentDocument; loaderFrameWindow.document.open(); loaderFrameWindow.document.write('<scr'+'ipt src="https://hb.vntsm.com/v3/live/ad-manager.min.js" type="text/javascript" async>'+'</scr'+'ipt>'); loaderFrameWindow.document.close(); })();`
		}],
		__dangerouslyDisableSanitizers: ['script']
		// __dangerouslyDisableSanitizersByTagID: { // Disabled because it didn't work
		// 	vntsm: ['innerHTML'],
		// 	mtrka: ['innerHTML']
		// }
	},

	// Nuxt.js modules
	modules: [
		'nuxt-device-detect'
	]
};

## VMAd.vue
<template>
	<div class="vm-placement" :data-id="adId" :style="rich ? { display: 'none' } : { }" :data-refid="refid"></div>
</template>

<script>
export default {
	props: {
		adId: String,
		rich: Boolean
	},

	data() {
		return {
			refid: Math.floor(Math.random() * 10000)
		};
	},
	mounted() {
		if (this.$store.state.isFirstRender)
			return;

		// Needed for venatus ad-manager to detect new ads with Vue
		window.top.__vm_add = window.top.__vm_add || [];
		const el = document.querySelector(`.vm-placement[data-refid="${this.refid}"]`);
		window.top.__vm_add.push(el);
	}
};
</script>

<style lang="sass" scoped>
// You can ignore this. Just know that normalize.css will mess up iframes when used
.vm-placement ::v-deep iframe
	height: attr(height)
	display: block

</style>
	<script>
	export default {
	watch: {
	$route() {
	if (this.$store.state.isFirstRender) // Add necessary things to store for this to work
	this.$store.commit('routeChanged');
	}
	}
	};
	</script>
	<template>
	<div>
	<div class="ad-unit container">
	<v-m-ad v-if="$device.isDesktop" adId="leaderboard-id"></v-m-ad>
	<v-m-ad v-if="!$device.isDesktop" adId="300-width-id"></v-m-ad>
	</div>

	<v-m-ad v-if="$device.isDesktop" adId="footer-float-id" rich></v-m-ad>
	</div>
	</template>

	<script>
	import VMAd from '@/components/VMAd';

	export default {
	components: { VMAd }
	};
	</script>

	<script lang="sass" scoped>
	.ad-unit
	margin-top: 40px
	margin-bottom: 40px
	text-align: center
	// &:empty // Need to make this work with venatus still
	// margin-top: 0
	// margin-bottom: 0
	// & ::v-deep iframe // Testing with blocked ads fill-in
	// background-color: darkred !important
	div:last-child > .ad-unit
	margin-bottom: 0

	</script>
	module.exports = {
	// Headers of the page
	head: {
	script: /process.env.NODE_ENV === 'development' ? [] : /[{
	vmid: 'vntsm',
	innerHTML: `(function() { document.write('<div id="vmv3-ad-manager" style="display:none"></div>'); document.getElementById("vmv3-ad-manager").innerHTML = '<iframe id="vmv3-frm" src="javascript:\\'<html><body></body></html>\\'" width="0" height="0" data-mode="scan" data-site-id="site-id"></iframe>'; var loaderFrame = document.getElementById("vmv3-frm"); var loaderFrameWindow = loaderFrame.contentWindow ? loaderFrame.contentWindow : loaderFrame.contentDocument; loaderFrameWindow.document.open(); loaderFrameWindow.document.write('<scr'+'ipt src="https://hb.vntsm.com/v3/live/ad-manager.min.js" type="text/javascript" async>'+'</scr'+'ipt>'); loaderFrameWindow.document.close(); })();`
	}],
	__dangerouslyDisableSanitizers: ['script']
	// __dangerouslyDisableSanitizersByTagID: { // Disabled because it didn't work
	// vntsm: ['innerHTML'],
	// mtrka: ['innerHTML']
	// }
	},

	// Nuxt.js modules
	modules: [
	'nuxt-device-detect'
	]
	};
	<template>
	<div class="vm-placement" :data-id="adId" :style="rich ? { display: 'none' } : { }" :data-refid="refid"></div>
	</template>

	<script>
	export default {
	props: {
	adId: String,
	rich: Boolean
	},

	data() {
	return {
	refid: Math.floor(Math.random() * 10000)
	};
	},
	mounted() {
	if (this.$store.state.isFirstRender)
	return;

	// Needed for venatus ad-manager to detect new ads with Vue
	window.top.__vm_add = window.top.__vm_add \|\| [];
	const el = document.querySelector(`.vm-placement[data-refid="${this.refid}"]`);
	window.top.__vm_add.push(el);
	}
	};
	</script>

	<style lang="sass" scoped>
	// You can ignore this. Just know that normalize.css will mess up iframes when used
	.vm-placement ::v-deep iframe
	height: attr(height)
	display: block

	</style>