A simple helper to create functional Vue components with CSS modules and Typescript.

styled-wrapper.tsx

import { componentFactory } from 'vue-tsx-support';
import { VNode } from 'vue';

type Styles = string | Array<string>;

interface WrapperProps {
  as?: string;
}

export default (
  styles: Styles,
  tag: string = 'div',
) => componentFactory.create<object & WrapperProps, {}>({
  functional: true,
  render(h, context): VNode {
    const { props, children, data } = context;
    const elementName = tag || props.as;

    return h(elementName, { attrs: data.attrs, props, class: styles }, children);
  },
});