# @henrotaymcorp/nuxt-modal

> A simple package to manage modals.

Latest version **0.0.5** (published 2023-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @henrotaymcorp/nuxt-modal
pnpm add @henrotaymcorp/nuxt-modal
yarn add @henrotaymcorp/nuxt-modal
bun add @henrotaymcorp/nuxt-modal
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2023-06-23 |
| First published | 2023-06-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Henrotay Mathieu |
| Maintainers | henrotaym |

## Links

- npm: https://www.npmjs.com/package/@henrotaymcorp/nuxt-modal
- Repository: https://github.com/henrotaymcorp/nuxt-modal
- Homepage: https://github.com/henrotaymcorp/nuxt-modal#readme
- Issues: https://github.com/henrotaymcorp/nuxt-modal/issues
- npm.io page: https://npm.io/package/@henrotaymcorp/nuxt-modal

## Dependencies (2)

- [@nuxt/kit](https://npm.io/package/@nuxt/kit.md) ^3.4.2
- [@henrotaymcorp/vue-modal](https://npm.io/package/@henrotaymcorp/vue-modal.md) ^0.0.5

## Recent versions

- 0.0.5 (latest) — 2023-06-23
- 0.0.4 — 2023-06-21
- 0.0.3 — 2023-06-21
- 0.0.2 — 2023-06-21
- 0.0.1 — 2023-06-15

## README

# nuxt-modal

A simple package to manage modals.

## Installation

```shell
yarn add @henrotaymcorp/nuxt-modal
```

Add `@henrotaymcorp/nuxt-modal` to the `modules` section of `nuxt.config.ts`

```typescript
export default defineNuxtConfig({
  modules: [
    '@henrotaymcorp/nuxt-modal'
  ],
  nuxtModal: {}
})
```

That's it! You can now use `nuxt-modal` in your Nuxt app ✨

## Usage

Add `ModalsContainer` to your App.vue (or any component being global to your app)

```vue
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    <NuxtLayout>
    <ModalsContainer>
  <div>
</template>
```

Define your modal. Main container has to be one of these : StylelessModal / CenteredModal / RightModal

```vue
<template>
  <RightModal>
    <div class="flex flex-col gap-8">
      <div>name: {{ name }}</div>
      <div>lastName: {{ lastName }}</div>
      <div class="flex items-center gap-8">
        <AppButton @click="open"> open second modal </AppButton>
        <AppButton @click="close"> close modal </AppButton>
      </div>
    </div>
  </RightModal>
</template>

<script setup lang="ts">
type Props = {
  name: string;
  lastName: string;
  close: () => void; // Close is given magically by this package and allow modal removal.
};

defineProps<Props>();
</script>
```

Define a composable to use your modal

```typescript
import MyModal from "path/to/MyModal.vue"

export const useMyModal = () => useModal(MyModal);
```

Use composable in your code

```vue
<template>
  <button @click="openModal"> Open modal </button>
  <button @click="close"> Close </button>
</template>

<script setup lang="ts">
const { open, close } = useMyModal();

// Open parameters are automatically resolved using your component props (omiting close function)
const openModal = () => open({
  firstName: "Mathieu",
  lastName: "Henrotay"
})
</script>
```

## Development

```shell
./cli bootstrap #bootstrap project
./cli start #start project
./cli stop #stop project
./cli restart  #restart project
```

---
_Source: https://npm.io/package/@henrotaymcorp/nuxt-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._