Templates are just like pages, except they will not get a path based on the file location. Instead, they'll be used to render pages from data sources in your project. The filename must match the GraphQL node type it will be a template for. If you have a node type called WordPressPost, then you can create a file in src/templates/WordPressPost.vue.

Template components must have a <page-query> block which fetches the source node for the current page. You can use the path variable to get the node.

<!-- src/templates/WordPressPost.vue -->

  <Layout :title="$page.post.title">
    <div v-html="$page.post.content">

query Post ($path: String!) {
  post: wordPressPost (path: $path) {

export default {
  metaInfo () {
    return {
      title: this.$page.post.title

Edit this page on GitHub