@edgedev/edgecomponents/README.md

Reusable flipbook and magazine Vue components

# @edgedev/edgecomponents

Reusable Vue 3 components for interactive magazines and flipbooks, powered by Swiper.js.

## 📦 Installation

```bash
pnpm add @edgedev/edgecomponents
```

or

```bash
npm install @edgedev/edgecomponents
```

## 🧩 Usage (Nuxt 3)

1. **Register the components in a Nuxt plugin**:

```ts
// plugins/edgecomponents.client.ts
import { Flipbook, Magazine } from '@edgedev/edgecomponents'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('edge-flipbook', Flipbook)
  nuxtApp.vueApp.component('edge-magazine', Magazine)
})
```

2. **Update your `tailwind.config.ts` to include the package**:

```ts
// tailwind.config.ts
export default {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.{vue,js,ts}',
    './pages/**/*.{vue,js,ts}',
    './app.vue',
    './node_modules/@edgedev/edgecomponents/**/*.{js,vue}' // ✅ Include package files
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

3. **Make sure Tailwind CSS is already set up in your project**.  
This library **does not** bundle Tailwind styles. It expects your project to already include and process Tailwind.

## 🧪 Components

### `<edge-flipbook />`

Props:
- `magazine`: Object – Required
- `flipDuration`, `zoomDuration`, `zoomLevels`, `nPolygons`, `clickToZoom`, etc.

### `<edge-magazine />`

Simplified static magazine layout with basic paging.

## 🛠 Build Notes

Tailwind CSS utilities used in this package must be included via your project’s Tailwind build.  
This ensures your production CSS includes the necessary classes like `right-0`, `top-1/2`, `z-10`, etc.

If these styles aren't applying, confirm the package path is listed in your Tailwind `content` array.

## 🪪 License

MIT – © Edge Marketing & Design