@edgedev/edgecomponents

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

📦 Installation

pnpm add @edgedev/edgecomponents

or

npm install @edgedev/edgecomponents

🧩 Usage (Nuxt 3)

1. Register the components in a Nuxt plugin:

// 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)
})

1. Update your tailwind.config.ts to include the package:

// 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: [],
}

1. 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