vue-simple-props v0.3.1

vue-simple-props

Remove emits, slots, and attrs concepts in Vue.

Features

• 🤐 No need to define props, emits, slots, and attrs in runtime.
• 🦾 Fully TypeScript support.
• 👾 Non-invasive.

Install

npm i vue-simple-props

Usage

Note For HMR to work properly, you need to rename helper function to defineComponent. See https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx#hmr-detection

Functional Component (Stateful)

import { defineFunctionalComponent as defineComponent } from 'vue-simple-props'

interface Props {
  foo: string
  onClick: () => void
  renderDefault?: () => JSX.Element
}

const Comp = defineComponent<Props>(
  (props) => {
    return () => <div>...</div>
  },
  { inheritAttrs: false }
)

Options Component

import {
  defineSimpleComponent as defineComponent,
  useProps,
} from 'vue-simple-props'

interface Props {
  foo: string
  onClick: () => void
  renderDefault?: () => JSX.Element
}

export const Comp = defineComponent<Props>({
  inheritAttrs: false,
  setup() {
    const props = useProps<Props>()
    return () => <div>...</div>
  },
})

Sponsors

License

MIT License © 2023 三咲智子 Kevin Deng