@edgedev/edgecomponents

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

📦 Installation

1pnpm add @edgedev/edgecomponents

or

1npm install @edgedev/edgecomponents

🧩 Usage (Nuxt 3)

1. Register the components in a Nuxt plugin:

1// plugins/edgecomponents.client.ts
2import { Flipbook, Magazine } from '@edgedev/edgecomponents'
3import { defineNuxtPlugin } from '#app'
4
5export default defineNuxtPlugin((nuxtApp) => {
6  nuxtApp.vueApp.component('edge-flipbook', Flipbook)
7  nuxtApp.vueApp.component('edge-magazine', Magazine)
8})

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

1// tailwind.config.ts
2export default {
3  content: [
4    './components/**/*.{vue,js,ts}',
5    './layouts/**/*.{vue,js,ts}',
6    './pages/**/*.{vue,js,ts}',
7    './app.vue',
8    './node_modules/@edgedev/edgecomponents/**/*.{js,vue}' // ✅ Include package files
9  ],
10  theme: {
11    extend: {},
12  },
13  plugins: [],
14}

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