Add support for functional components

[skateborden]

I'm relatively new to Vue and TypeScript, but it looks like the Component constructor can also take FunctionalComponentOptions to create functional components. It would be cool to have nice way to do that in TypeScript :)

[ktsn]

dup of #120

[mika76]

Since I can't comment in #120 I thought I'd put this here, functional components would be really useful when you want to keep them in the same file as the main component class. If you compile with lang="ts", even if you use the Vue.extend syntax it still gives typescript errors when adding functional: true...

It might not have much functional use (see what I did there) but it keeps our syntax consistent - currently writing functional components is the only reason why I would have to go back to the extend syntax. Horrible 🤢

So I vote yes please add functional to the @component decorator 😄

[MrJmpl3]

You can use Template Functional and Component decorator , and works like functional component

For example: I use Nuxt.js

<template functional>
  <v-sheet :color="props.backgroundColor" class="tw-flex tw-items-center tw-text-white tw-max-w-full pa-2">
    <span class="tw-text-2xl tw-flex-auto">{{ props.amountInvoices }}</span>
    <span class="tw-text-lg tw-flex-auto">invoices</span>
    <span class="tw-text-lg tw-flex-auto">x</span>
    <span class="tw-text-xl tw-flex-auto">$/ {{ props.amountToPay }}</span>
  </v-sheet>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'nuxt-property-decorator';

@Component
export default class AmountToPayCard extends Vue {
  @Prop({
    required: true,
    type: String
  })
  public backgroundColor: string;

  @Prop({
    required: true,
    type: Number
  })
  public amountToPay: string;

  @Prop({
    required: true,
    type: Number
  })
  public amountInvoices: string;
}
</script>

<style scoped></style>

[mika76]

Thanks @MrJmpl3 I'll give it a try...

[avxkim]

@MrJmpl3 if we have a template part in our SFC, then <template functional> is enough to declare it as functional? I just saw an example, where people declaring "functional" in a template and also in a script section functional: true

[mika76]

@webcoderkz If you look at https://vuejs.org/v2/guide/render-function.html#Functional-Components it seems like you don't need to do it in both. But I don't know for sure.