vue-c2c

KO | EN

gitlite — search

#javascript #python #react #llm #golang #go #machine-learning #deep-learning #docker #macos #java #kubernetes #ios #open-source

(★ 130)

Transforming Vue components to composable functions

vue-c2c 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
<b>Transforming Vue components to composable functions</b><br/>
 (Draw UI with components, Access/Control with composables)
</p>

## When should I use this?

In certain use cases (e.g. confirm, dialog, toast), composable functions can provide greater flexibility and ease of use than components.

## Install

```bash
npm i vue-c2c
```

## Usage

### c2c

#### Options

```ts
interface VueC2COptions {
  /**
   * Display style of the component.
   * @default 'v-if'
   */
  display?: 'v-if' | 'v-show'
  /**
   * Visible of the component.
   * @default false
   */
  visible?: boolean
  /**
   * Return a placeholder component that allows specifying the insertion position.
   * @default false
   */
  withPlaceholder?: T
  /**
   * Function that returns an HTMLElement where the component should be appended to.
   * Only applies if `withPlaceholder` option is false.
   * @default ()=> document.body
   */
  appendTo?: () => HTMLElement
}
```

```html
<script setup>
  import { c2c } from 'vue-c2c'
  import Dialog from './Dialog.vue'

const useDialog = c2c(Dialog, VueC2COptions)

const { visible, show, hide, toggle, exposed } = useDialog(props, {
    emits: {
      onOk: () => {},
      onCancel: () => {},
    } 
  })
</script>
```

#### [Example](./examples/c2c)

### `withPlaceholder` Option

`withPlaceholder` option provides two additional features:

- Element placeholder:

> The element placeholder functionality allows us to specify the location of created elements in a more flexible manner.

- Friendly SSR support:
  
  > If you're working on an SSR project (e.g. Nuxt), use `withPlaceholder` option for better SSR support.

```html
<script setup>
  import { c2c } from 'vue-c2c'
  import Dialog from './Dialog.vue'

const useDialog = c2c(Dialog, {
    withPlaceholder: true,
  })

const { Placeholder, visible, show, hide, toggle, exposed } = useDialog(props, {
    emits: {
      onOk: () => {},
      onCancel: () => {},
    } 
  })
</script>

<template>
  <Placeholder>
    Hello World
  </Placeholder>
</template>
```

#### [Example](./examples/c2c-with-placeholder)

## License

vue-c2c

vue-c2c 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vue-c2c

vue-c2c 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README