[Proposal] Component morph based on layout

[imsus]

Imagine we have this kind of content:

---
title: Hello World
theme: '~layout/default.vue'
---

# Hello World

Here is some image

<Image layout="theme.name" src="~static/image1.jpg" />

Morphing component

We have this <Image /> component inside markdown content. Imagine that the component will change based on the layout provided from front matter.

For Example: Image.vue

<template>
  <div>
    <img v-if="layout === 'default'" :src="src" />

    <amp-img v-if="layout === 'amp'" :src="src"></amp-img>

    <figure v-if="layout === 'instant-article'">
      <img :src="src" />
    </figure>
  </div>
</template>

<script>
  export default {
    name: 'image',
    props: ['layout', 'src']
  }
</script>

---

The question is, how to retrieve theme object from frontmatter? So this code will work in any content.

<Image layout="theme.name" src="~static/image1.jpg" />

[egoist]

ah I think something like this would work for you:

---
title: This is a post
compileTemplate: true
---

<Image :layout="page.attributes.layout" />

https://github.com/egojump/peco/blob/master/docs/using-vue-template-in-markdown.md