Looks like Axios isn't used anywhere. My guess is we used the Nuxt app creator and checked that box assuming we'd need it.
Here's the directory structure for pages.
├── about.vue
├── get-started.vue
├── index.vue
├── privacy.vue
├── resources
│ ├── _uid.vue
│ └── index.vue
├── services.vue
└── why-coaching.vue
Here's the _uid.vue page (what's not getting generated). The most complex part is the Open Graph injection into the header...
<template>
<div id="resource">
<section id="top" class="header_dark_bg">
<HeaderAcrew />
</section>
<section id="main">
<h2 class="blog-title">{{ $prismic.asText(pageContent.headline) }}</h2>
<prismic-rich-text class="content-prime" :field="pageContent.content" />
</section>
</div>
</template>
<script>
import HeaderAcrew from '~/components/HeaderAcrew.vue'
export default {
name: 'resource_item',
components: {
HeaderAcrew,
},
head () {
let pageTitle = 'Birch Cove Financial Coaches - ' + this.pageContent.headline[0].text
let headerBlock = {
title: pageTitle,
meta: [
{ hid: 'og:title', name: 'og:title', content: pageTitle },
{ hid: 'og:type', name: 'og:type', content: 'article'}
]
}
if(this.pageContent.seo_description) {
headerBlock.meta.push(
{ hid: 'description', name: 'description', content: this.pageContent.seo_description },
{ hid: 'og:description', name: 'og:description', content: this.pageContent.seo_description }
)
}
if(this.pageContent.seo_keywords) {
headerBlock.meta.push(
{ hid: 'keywords', name: 'keywords', content: this.pageContent.seo_keywords }
)
}
if(this.pageContent.preview_image && Object.entries(this.pageContent.preview_image).length > 0) {
headerBlock.meta.push(
{ hid: 'og:image', name: 'og:image', content: this.pageContent.preview_image.url },
{ hid: 'og:image:secure_url', name: 'og:image:secure_url', content: this.pageContent.preview_image.url },
{ hid: 'og:image:width', name: 'og:image:width', content: this.pageContent.preview_image.dimensions.width +'' },
{ hid: 'og:image:height', name: 'og:image:height', content: this.pageContent.preview_image.dimensions.height+'' },
)
}
return headerBlock
},
async asyncData({ $prismic, params, error }) {
try{
// Query to get post content
const pageContent = (await $prismic.api.getByUID('resource_item', params.uid)).data
return {
pageContent
}
} catch (e) {
error({ statusCode: 404, message: 'Page not found' })
}
},
}
</script>
Here's the page that shows the listing
<template>
<div id="resources">
<section id="top" :class="'header_' + pageContent.background_color">
<div class="inner" :style="'background-image: url(' + bgImage + ');'">
<HeaderAcrew />
<h2>{{ $prismic.asText(pageContent.title) }}</h2>
</div>
</section>
<section>
<prismic-rich-text :field="pageContent.content" />
</section>
<section id="resourceList" v-if="resources.length !== 0">
<resourceList class="resourceItem" v-for="r in resources" :key="r.id" :resource="r"></resourceList>
</section>
</div>
</template>
<script>
import HeaderAcrew from '~/components/HeaderAcrew.vue'
import resourceList from '~/components/resourceList.vue'
export default {
name: 'resources-landing',
components: {
HeaderAcrew, resourceList
},
data: function() {
return {
}
},
head () {
...
return headerBlock
},
async asyncData({ $prismic, error }) {
try{
const pageContent = (await $prismic.api.getSingle('resources_landing')).data
const resources_list = await $prismic.api.query(
$prismic.predicates.at("document.type", "resource_item"),
{ orderings : '[document.first_publication_date desc]' }
)
return {
pageContent,
resources: resources_list.results,
bgImage: pageContent.header_image.url,
}
} catch (e) {
error({ statusCode: 404, message: 'Page not found' })
}
},
methods: {
}
}
</script>