Using Shared Blocks of Content

You can define blocks of content which can be shared on multiple pages. These are Vue Single File Components. Which you should put in the directory .vuepress/components.

For example here is the VuePressVersioning component which is also used on the Home page.

Using vuepress version 1.0.2

The VuePressVersioning component's code looks like this:

<template>
  <small id='VuePressVersioning'>
    Using vuepress version {{loc.version}}
    <span v-if="raw">
      <span v-if="upToDate >= 0"></span>
      <span v-else>⚠️</span>
      , latest version is {{raw.version}}
      </span>
  </small>
</template>

<script>
const axios = require("axios");
const cmp = require("semver-compare");
const loc = require("vuepress/package.json");
const src =
  "https://raw.githubusercontent.com/vuejs/vuepress/master/lerna.json";
export default {
  name: "VuePressVersioning",
  data() {
    return {
      loc,
      raw: null
    };
  },
  computed: {
    upToDate() {
      return cmp(this.loc.version, this.raw.version);
    }
  },
  async beforeMount() {
    try {
      let res = await axios.get(src);
      this.$data.raw = res.data;      
    } catch (error) {
      console.err(e)
    }
  }
};
</script>

<style scoped>
#vuepress_versioning {
  color: grey;
  border-top: 2px solid grey;
}
</style>

You insert a component in the markdown like this (the surrounding div is just for styling purposes):

<div class="highlighted">
    <VuePressVersioning/>
</div>

Vue components can be as simple as a text block that you want to reuse, or they can be much more complex. However, if they start to get really complex then perhaps it's time to just start using the Vue Framework itself.