https://github.com/sxzz/vue-simple-props

Remove emits, slots, and attrs concepts in Vue.
https://github.com/sxzz/vue-simple-props

Last synced: about 21 hours ago
JSON representation

Remove emits, slots, and attrs concepts in Vue.

• Host: GitHub
• URL: https://github.com/sxzz/vue-simple-props
• Owner: sxzz
• License: mit
• Created: 2023-10-30T11:51:38.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-28T06:37:26.000Z (about 2 months ago)
• Last Synced: 2024-10-29T14:45:50.322Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 482 KB
• Stars: 83
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-simple-props [![npm](https://img.shields.io/npm/v/vue-simple-props.svg)](https://npmjs.com/package/vue-simple-props)

[![Unit Test](https://github.com/sxzz/vue-simple-props/actions/workflows/unit-test.yml/badge.svg)](https://github.com/sxzz/vue-simple-props/actions/workflows/unit-test.yml)

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

```bash

npm i vue-simple-props

```

## Usage

### Conventions

- Starts with `on` for event handlers.

- Starts with `render` for slots.

- Others are props.

### Functional Component (Stateful)

```tsx

import { defineFunctionalComponent, useClassAndStyle } from 'vue-simple-props'

interface Props {

  foo: string

  onClick: () => void

  renderDefault?: () => JSX.Element

}

const Comp = defineFunctionalComponent(

  (props: Props) => {

    const styles = useClassAndStyle()

    return () => 
...

  },

  {

    // other options, e.g. name, inheritAttrs, etc.

  },

)

```


```vue

  slot

```

### Options Component

```tsx

import {

  defineSimpleComponent,

  useClassAndStyle,

  useProps,

} from 'vue-simple-props'

interface Props {

  foo: string

  onClick: () => void

  renderDefault?: () => JSX.Element

}

export const Comp = defineSimpleComponent({

  setup() {

    const props = useProps()

    const styles = useClassAndStyle()

    return () => 
...

  },

})

```


### HMR support

```ts

// vite.config.ts

import vueJsx from '@vitejs/plugin-vue-jsx'

import { defineConfig } from 'vite'

export default defineConfig({

  plugins: [

    // ...

    vueJsx({

      defineComponentName: [

        'defineComponent',

        'defineFunctionalComponent',

        'defineSimpleComponent',

      ],

    }),

  ],

})

```

## Caveats

- `inheritAttrs` is `false` by default.

## Sponsors



  

    

  



## License

[MIT](./LICENSE) License © 2023-PRESENT [三咲智子 Kevin Deng](https://github.com/sxzz)