Wordpress + Nuxt

_.vue

<template>
	<BuildSections
		v-if="page && page.fields && page.fields.layout_content"
		:sections="page.fields.layout_content"
	></BuildSections>
</template>

<script>
import BuildSections from '~/components/build-sections.vue';
export default {
	components: {
		BuildSections
	},
	head() {
		return {
			title: this.pageTitle,
			titleTemplate: '%s - Website title'
		};
	},
	computed: {
		pageTitle() {
			if (this.page && this.page.title && this.page.title.rendered) {
				return this.page.title || this.page.title.rendered;
			} else if (this.page && this.page.title) {
				return this.page.title;
			} else {
				return '';
			}
		},
		page() {
			let route;
			if (this.$route.params.pathMatch) {
				route = this.$route.params.pathMatch.replace('/','');
			} else {
				route = 'home';
			}
			return this.$store.state.pages.pages[route];
		}
	},
	async asyncData({ store, params, error }) {
		await store.dispatch('pages/fetchPage', params.pathMatch).catch((e) => {
			error(e);
		});
	},
	created() {
		this.$store.dispatch('pages/fetchPage', this.$route.params.pathMatch).catch(() => {
			this.$nuxt.error({ statusCode: 404, message: 'Page not found' });
		});
	}
};
</script>

basic-content.vue

<template>
	<div class="basic-content__wrapper">
		<div class="row center">
			<div class="column small-full medium-two-third large-10">
				<div class="basic-header__content">
					<h3 v-if="basicTitle">{{ basicTitle }}</h3>
					<h4 v-if="basicSubtitle">{{ basicSubtitle}}</h4>
					<template v-if="basicContent">{{ basicContent }}</template>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		content: {
			type: [String, Object],
			default: () => {}
		}
	},
	computed: {
		basicTitle() {
			return this.$props.content.block_title || null;
		},
		basicSubtitle() {
			return this.$props.content.block_subtitle || null;
		},
		basicContent() {
			if (typeof this.$props.content === 'string') {
				return this.$props.content;
			}
			return this.$props.content.block_content || null;
		}
	},
	created() {}
};
</script>

<style lang="css">
.basic-content {
	//styling here
}
</style>

build-sections.vue

<template>
	<main class="page">
		<template v-for="(section, idx) in sections">
			<section
				v-if="section.acf_fc_layout !== 'repeating-block'"
				:key="idx"
				:class="section.acf_fc_layout"
				:index="idx"
			>
				<component
					:is="section.acf_fc_layout"
					:key="idx"
					:index="idx"
					:content="section"
				/>
			</section>
			<template v-else-if="section.layout_content.fields">
				<template v-for="(subSection, index) in section.layout_content.fields.layout_content">
					<section :key="`${index}sub`" :class="subSection.acf_fc_layout">
						<component
							:is="subSection.acf_fc_layout"
							:index="index"
							:content="subSection"
						/>
					</section>
				</template>
			</template>
		</template>
	</main>
</template>

<script>
export default {
	components: {
		OneColumn: () => import('~/components/section/one-column.vue'),
		TwoColumn: () => import('~/components/section/two-column.vue'),
		CenterColumn: () => import('~/components/section/center-column.vue'),
		BasicContent: () => import('~/components/section/basic-content.vue'),
	},
	props: {
		sections: {
			type: Array,
			default: () => []
		}
	}
};
</script>

index.vue

<template>
	<MainLayout></MainLayout>
</template>

<script>
import MainLayout from './_.vue';
export default {
	components: { MainLayout },
	async asyncData({ store, params }) {
		await store.dispatch('pages/fetchPage', params.pathMatch);
	}
};
</script>

<style></style>

pages.js

import Vue from 'vue';

const storeCache = 300; // 300 in sec is 5 min
Date.time = function() {
	const now = new Date();
	return now.getTime() / 1000;
};

export const state = () => ({
	pages: {}
});

export const mutations = {
	setPage(state, page) {
		page.lastFetched = Date.time();

		if (page.slug) {
			if (page.slug.indexOf('/') > -1) {
				Vue.set(state.pages, page.uri.replace('/', ''), page);
			}
		} else {
			Vue.set(state.pages, page.name, page);
		}
	}
};

export const actions = {
	async fetchPage({ state, commit }, page) {
		let slug;
		if (page !== undefined) {
			slug = page.replace('/', '');
		} else {
			slug = 'home';
			page = 'home';
		}
		if (!state.pages[slug] || state.pages[slug].lastFetched + storeCache < Date.time()) {
			const content = await this.$axios.$get(`/pages/page?slug=${page}`);

			commit('setPage', content);
		}
	}
};

pages.php

<?php
function get_pages_categories($ID)
{
	$cats = array();
	foreach (wp_get_post_categories($ID) as $cat) {
		$cats[] = get_category($cat)->slug;
	}
	return $cats;
}

function get_pages_tags($ID)
{
	$tags = array();
	foreach (wp_get_post_tags($ID) as $tag) {
		$tags[] = $tag->name;
	}
	return $tags;
}


function get_pages_all()
{
	$pages = array();
	$i = 0;
	foreach (get_pages(array('numberpages' => 999)) as $post) {
		if ($post->post_status === "publish") {
			$pages[$i] = (object)array();
			$pages[$i]->ID = $post->ID;
			$pages[$i]->title = $post->post_title;
			$pages[$i]->name = $post->post_name;
			$pages[$i]->slug = $post->post_name;
			$pages[$i]->uri = get_page_uri($post->ID);
			$pages[$i]->content = wpautop($post->post_content);
			$pages[$i]->excerpt = wpautop($post->post_excerpt);
			$pages[$i]->date = $post->post_date;
			$pages[$i]->date_modified = $post->post_modified;
			$pages[$i]->title = $post->post_title;
			$pages[$i]->status = $post->post_status;
			$pages[$i]->categories = get_pages_categories($post->ID);
			$pages[$i]->tags = get_pages_tags($post->ID);
			$pages[$i]->fields = get_fields($post->ID);
			$pages[$i]->featured_image = get_the_post_thumbnail_url($post->ID);
			$i++;
		}
	}
	return $pages;
}

function get_pages_tag()
{
	$pages = array();
	$i = 0;
	foreach (get_pages(array(
		'tag' => $_GET['tag'],
		'post_status' => 'publish'
	)) as $post) {
		if ($post->post_status === "publish") {
			$pages[$i] = (object)array();
			$pages[$i]->ID = $post->ID;
			$pages[$i]->title = $post->post_title;
			$pages[$i]->name = $post->post_name;
			$pages[$i]->slug = $post->post_name;
			$pages[$i]->content = wpautop($post->post_content);
			$pages[$i]->excerpt = wpautop($post->post_excerpt);
			$pages[$i]->date = $post->post_date;
			$pages[$i]->date_modified = $post->post_modified;
			$pages[$i]->title = $post->post_title;
			$pages[$i]->status = $post->post_status;
			$pages[$i]->categories = get_pages_categories($post->ID);
			$pages[$i]->tags = get_pages_tags($post->ID);
			$pages[$i]->fields = get_fields($post->ID);
			$pages[$i]->featured_image = get_the_post_thumbnail_url($post->ID);
			$i++;
		}
	}
	return $pages;
}
function get_page_by_slug($slug = null)
{
	$page = array();
	if (gettype($slug) === 'object') {
		$slug = $_GET['slug'];
	}
	$post = get_page_by_path($slug);
	if ($post && $post->post_status === "publish") {
		$page = get_page_fields($post);
		// Get recurring fields; 
		foreach($page['fields']['layout_content'] as $key => $value){
			if($value['acf_fc_layout'] == 'repeating-block'){
				$page['fields']['layout_content'][$key]['layout_content']->fields = get_fields($value['layout_content']->ID);
			}
		}		
	} else {
		$page404 = get_page_by_path('404-page');
		if ($page404->ID) {
			$page = get_page_fields($page404);
		} else {
			$page['type'] = '404';
		}
	}
	return $page;
}

function get_page_fields($post)
{
	$page = array();
	if ($post) {
		$page['id'] = $post->ID;
		$page['title'] = $post->post_title;
		$page['name'] = $post->post_name;
		$page['content'] = wpautop($post->post_content);
		$page['excerpt'] = wpautop($post->post_excerpt);
		$page['date'] = $post->post_date;
		$page['date_modified'] = $post->post_modified;
		$page['title'] = $post->post_title;
		$page['status'] = $post->post_status;
		$page['categories'] = get_pages_categories($post->ID);
		$page['tags'] = get_pages_tags($post->ID);
		$page['fields'] = get_fields($post->ID);
		$page['featured_image'] = get_the_post_thumbnail_url($post->ID);
	}
	return $page;
}

add_action('rest_api_init', function () {

	register_rest_route('pages', '/all', array(
		'methods' => 'GET',
		'callback' => 'get_pages_all',
	));

	register_rest_route('pages', '/page', array(
		'methods' => 'GET',
		'callback' => 'get_page_by_slug'
	));
	register_rest_route('pages', '/tag', array(
		'methods' => 'GET',
		'callback' => 'get_post_by_slug',
	));
});