articles.md

layout	headerImage	title
Post	/assets/skew.jpg	Articles

enhanceApp.js

export default ({
    Vue, // the version of Vue being used in the VuePress app
    options, // the options for the root Vue instance
    router, // the router instance for the app
    siteData // site metadata
}) => {
    // this requires every post to be in a folder called /articles and
    // that the layout is 'Post'
    // Example frontmatter looks like this:
    // ---
    // layout: Post
    // headerImage: /assets/forminputs.jpg
    // published: 2018-04-18
    // title: Using noUiSlider as range slider to filter between two numbers
    // description: Do you know these fancy range sliders that can filter items with the blink of an eye? You move around a handle and get the desired results right away. In this article, you are going to learn how to implement a range slider to filter your data.
    // ---
    Vue.prototype.$getPosts = (maxPosts = 10) => {
        let posts = siteData.pages
            .filter(page =>
                page.frontmatter.layout == 'Post' &&
                page.path.startsWith('/articles/') &&
                !page.frontmatter.hidden
            )
            .sort((a,b) => new Date(a.frontmatter.published) - new Date(b.frontmatter.published))
            .reverse()
        if (maxPosts == -1) return posts
        return posts.slice(0, maxPosts)
    }
    Vue.mixin({
        computed: {
            $title() {
                return `${this.$page.title} | ${this.$siteTitle}`
            }
        }
    })
}

Post.vue

<template>
    <div class="page">
        <Header
            v-if="title"
            :title="title"
            :description="$page.frontmatter.description"
            :header-image="$page.frontmatter.headerImage"
            :header-position="$page.frontmatter.headerPosition"
        />
        <div class="content">
            <Content/>
        </div>
    </div>
</template>

<script>
export default {
    props: ['sidebarItems'],
    computed: {
        image() {
            return this.$page.frontmatter.headerImage
        },
        title() {
            return this.$page.frontmatter.title
        }
    }
}
</script>

Teaser.vue

<template>
    <!-- Used in /articles -->
    <div class="card">
        <h3>
            <router-link :to="data.path">
                {{data.frontmatter.title}}
            </router-link>
        </h3>
        <p>{{data.frontmatter.description}}</p>
    </div>
</template>

<script>
export default {
    props: ['page', 'link'],
    computed: {
        data() {
            if (this.page) return this.page
            if (this.link) return this.$site.pages.find(page => page.path == this.link)
        }
    }
}
</script>