[Vue @Component] Write Vue Functional Components Inline

Vue's functional components are small and flexible enough to be declared inside of .vue file next to the main component. This allows you to mix jsx and Vue's templates so you have complete control over how to render your content.

 

Robot.vue:

<script>
export default {
    functional: true,
    render: (h, {props, data}) => {
        return props.names.map(
            name => `https://robohash.org/${name}?set=set${props.num}`
        ).map(
            url => <div><img src={url} alt="" /></div>
        );
    }
}
</script>

 

Using:

<template>
       <section slot="content" class="flex flex-row flex-no-wrap">
          <Robot :names="names" :num="2"></Robot>
        </section>
</template>

<script>
@Component({
  components: {
    Layout,
    Settings,
    Robot
  }
})
export default class HelloWorld extends Vue {
  @Prop({
    default: ["mindy", "john", "kim", "joel", "ben"]
  }) names
}
</script>