posts.js
within an api/
directory. This file will contain all the functions needed to request Ghost post content, as well as an instance of the Ghost Content API.
Install the official JavaScript Ghost Content API helper using:
posts.js
file using a static import
statement:
url
value to the URL of the Ghost site. For Ghost(Pro) customers, this is the Ghost URL ending in .ghost.io, and for people using the self-hosted version of Ghost, it’s the same URL used to view the admin panel.
Create a custom integration within Ghost Admin to generate a key and change the key
value.
posts.browse()
endpoint can be used to get all the posts from a Ghost site. This can be done with the following code as an asynchronous function:
async
function means the Nuxt application will wait until all the content has been retrieved before loading the page. Since this function is being exported using the export
notation, it will be available throughout the application.
.vue
, files can contain HTML, CSS and JavaScript to create a neatly packaged up component. For more information check out the official Vue.js documentation.
To render out a list of posts from a Ghost site, create a new index.vue
file within a pages/
directory of your Nuxt project. Use the following code to expose the getPosts
function within the index.vue
file:
.vue
file using a asyncData
function within the Nuxt framework:
posts.read()
it’s possible to query the Ghost Content API for a particular post using a post id or slug.
Reopen the api/posts.js
file and add the following async function:
postSlug
parameter, which will be passed down by the template file using it. The page slug can then be used to query the Ghost Content API and get the associated post data back.
Nuxt provides dynamic routes for pages that don’t have a fixed URL/slug. The name of the js file will be the variable, in this case the post slug, prefixed with an underscore – _slug.vue
.
The getSinglePost()
function can be used within the _slug.vue
file like so:
<nuxt-link/>
component can be used with the post.slug
to link to posts from the listed posts in pages/index.vue
:
<nuxt-link/>
component works, check out the official documentation.
include
option within the Ghost Content API means that attribute data, such as tags and authors, will be included in the post object data:
authors.read()
endpoint.
pages/authors/_slug.vue
, which will also prevent author URLs colliding with post and page URLs:
post.published_at
, is returned as a date timestamp. Modern JavaScript methods can convert this date into a selection of human-readable formats. To output the published date as “Aug 28, 1963”:
{{post.dateFormatted}}
.