Take your custom site to the next level with these popular Ghost + VuePress recipes.

The flexibility of the Ghost Content API allows you to feed posts, pages and any other pieces of content from your Ghost site into a VuePress front-end. Below are a few popular examples of how to customise your site.

If you just landed here, check out Working With VuePress for more context!

Post list component

Components live in a .vuepress/components/ folder. Create this folder structure and make a new file in components called PostList.vue. In that file add a <template> element add the following to list all of the posts:

PostList.vue
<template>
<div>
    <div v-for="post in posts">
        <h2>
            <router-link :to="post.path">
                <div v-if="typeof post.frontmatter.feature_image !== 'undefined'" style="max-width: 250px;">
                    <img :src="post.frontmatter.feature_image" alt="" />
                </div>
                {{ post.frontmatter.title }}
            </router-link>
        </h2>

        <p>{{ post.frontmatter.excerpt }}</p>
        <p>Published: {{ formateDate(post.frontmatter.published_at) }}</p>

        <p><router-link :to="post.path">Read more</router-link></p>
    </div>
</div>
</template>

In the same file, just below the <template> element, add a <script> element, which will contain queries that will in turn pass data to the <template> above:

PostList.vue
<script>
import moment from "moment"

export default {
    methods: {
        formateDate(date, format = 'D MMM, YY') {
            return moment(date).format(format)
        }
    },
    computed: {
        posts() {
            return this.$site.pages
                .filter(x => x.path.startsWith('/') && !x.frontmatter.index)
                .sort((a, b) => new Date(b.frontmatter.published_at) - new Date(a.frontmatter.published_at));
        },
    }
}
</script>

The last step is to reference the component in the index.md file like this:

index.md
---
index: true
sidebarDepth: 2
---

# Howdie 🤠

Ghost ❤️ VuePress

<PostList />

Restart your server and head to http://localhost:8080/ to see the posts being rendered:

VuePress demo screenshot


Further reading

Learn more about the Ghost API and specific endpoints in our API documentation or check out the VuePress docs to find out how to customize the default theme.