# @croud-ui/vue-3-components

> Vue 3 components and associated composables

Latest version **0.0.3** (published 2023-01-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @croud-ui/vue-3-components
pnpm add @croud-ui/vue-3-components
yarn add @croud-ui/vue-3-components
bun add @croud-ui/vue-3-components
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2023-01-13 |
| First published | 2023-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 40.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Harry Davies |
| Maintainers | mitchreece, brockreece |

## Links

- npm: https://www.npmjs.com/package/@croud-ui/vue-3-components
- Repository: https://github.com/CroudTech/croud-design-system
- Homepage: https://github.com/CroudTech/croud-design-system#readme
- Issues: https://github.com/CroudTech/croud-design-system/issues
- npm.io page: https://npm.io/package/@croud-ui/vue-3-components

## Dependencies (9)

- [ky](https://npm.io/package/ky.md) ^0.33.1
- [vue](https://npm.io/package/vue.md) ^3.2.45
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [@types/node](https://npm.io/package/@types/node.md) ^18.11.18
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^9.10.0
- [element-plus](https://npm.io/package/element-plus.md) ^2.2.28
- [@vueuse/shared](https://npm.io/package/@vueuse/shared.md) ^9.10.0
- [vue-concurrency](https://npm.io/package/vue-concurrency.md) ^4.0.0
- [@croud-ui/utilities](https://npm.io/package/@croud-ui/utilities.md) ^0.4.1

## Recent versions

- 0.0.3 (latest) — 2023-01-13
- 0.0.2 — 2023-01-13
- 0.0.1 — 2023-01-12

## README

# @croud-ui/vue-3-components

A selection of components and associated composables built with the Vue 3 composition API.

### Components

- CuiDataTable
- CuiDataTableCard
- CuiDataTableCell
- CuiDataTableRow

### Composables

- usePagination
- useFetchList
- useBreakpoints

## Install

To use these components in your vue app, install the component via the npm registery:

```bash
npm install @croud-ui/vue-3-components
```

## Usage

### Components

Import the component into the .vue file where you want to render it.

```javascript
<script lang='ts' setup>
import { CuiDataTableCard } from "@croud-ui/vue-3-components";
</script>

<template>
  <CuiDataTableCard
    :headers="tableHeaders"
    heading="Current tasks"
    :fetch="fetchCurrentTasks"
    :filters="searchParams"
    :filtersMissing="filtersMissing"
    :fetchOptions="fetchOptions"
  />
</template>


```

### Composables

Import the composable into the .vue file where you want to use it.

```javascript
<script lang='ts' setup>
import { useFetchList } from "@croud-ui/vue-3-components";

const { results, loading } = useFetchList(
    () => fetchResource(),
    {},
    { skip: computed(() => shouldSkipRef) }
  );
</script>

```

## License

Licensed under the MIT License

---
_Source: https://npm.io/package/@croud-ui/vue-3-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._