@vue-pivottable/nuxt 0.1.0

package/README.md

@@ -0,0 +1,169 @@
+# @vue-pivottable/nuxt
+
+Nuxt module for vue-pivottable. Supports both Nuxt 2 and Nuxt 3 with SSR-safe component registration.
+
+## Version Compatibility
+
+Nuxt is built on Vue, so each Nuxt version corresponds to a specific Vue version:
+
+| Nuxt Version | Vue Version | vue-pivottable Version | Module Path |
+|--------------|-------------|------------------------|-------------|
+| Nuxt 2.x | Vue 2 | `^0.4.69` | `@vue-pivottable/nuxt/nuxt2` |
+| Nuxt 3.x | Vue 3 | `^1.0.0` | `@vue-pivottable/nuxt` |
+
+> **Note:** Nuxt 2 uses Vue 2 internally, and Nuxt 3 uses Vue 3. Make sure to install the correct version of `vue-pivottable` that matches your Nuxt/Vue version.
+
+## Screenshots
+
+### Nuxt 3 (Vue 3)
+
+**VuePivottable** - Direct pivot table rendering
+![Nuxt 3 - VuePivottable](example/nuxt3-pretty-table.png)
+
+**VuePivottableUi** - Interactive pivot table with drag-and-drop UI
+![Nuxt 3 - VuePivottableUi](example/nuxt3-pretty-ui.png)
+
+### Nuxt 2 (Vue 2)
+
+**VuePivottable** - Direct pivot table rendering (with Totals)
+![Nuxt 2 - VuePivottable](example/nuxt2-pretty-table.png)
+
+**VuePivottableUi** - Interactive pivot table with drag-and-drop UI
+![Nuxt 2 - VuePivottableUi](example/nuxt2-pretty-ui.png)
+
+## Installation
+
+```bash
+npm install @vue-pivottable/nuxt
+
+# For Nuxt 3 (Vue 3)
+npm install vue-pivottable@^1.0.0
+
+# For Nuxt 2 (Vue 2)
+npm install vue-pivottable@^0.4.69
+```
+
+## Usage
+
+### Nuxt 3
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@vue-pivottable/nuxt']
+})
+```
+
+Then use the components in your pages:
+
+```vue
+<template>
+  <ClientOnly>
+    <VuePivottable
+      :data="data"
+      :rows="['region']"
+      :cols="['product']"
+      aggregator-name="Sum"
+      :vals="['sales']"
+    />
+  </ClientOnly>
+</template>
+```
+
+### Nuxt 2
+
+```js
+// nuxt.config.js
+export default {
+  modules: [
+    '@vue-pivottable/nuxt/nuxt2'
+  ]
+}
+```
+
+Then use the components in your pages:
+
+```vue
+<template>
+  <client-only>
+    <VuePivottable
+      :data="data"
+      :rows="['region']"
+      :cols="['product']"
+      aggregator-name="Sum"
+      :vals="['sales']"
+    />
+  </client-only>
+</template>
+```
+
+## Options
+
+### Nuxt 3
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@vue-pivottable/nuxt'],
+  pivottable: {
+    // Include CSS (default: true)
+    css: true,
+    // Register components globally (default: true)
+    global: true
+  }
+})
+```
+
+### Nuxt 2
+
+```js
+// nuxt.config.js
+export default {
+  modules: [
+    ['@vue-pivottable/nuxt/nuxt2', {
+      // Include CSS (default: true)
+      css: true
+    }]
+  ]
+}
+```
+
+## Components
+
+The module auto-registers these components:
+
+| Component | Description |
+|-----------|-------------|
+| `<VuePivottable>` | Basic pivot table without UI controls |
+| `<VuePivottableUi>` | Pivot table with drag-and-drop UI |
+
+## SSR Support
+
+This module automatically handles SSR by loading components only on the client side. No additional configuration is needed.
+
+**Important:** Wrap your pivot table components with `<ClientOnly>` (Nuxt 3) or `<client-only>` (Nuxt 2) to prevent SSR hydration issues.
+
+## Examples
+
+See the [example](./example) directory for complete working examples:
+
+- `example/nuxt3` - Nuxt 3 example
+- `example/nuxt2` - Nuxt 2 example
+
+To run the examples:
+
+```bash
+# Nuxt 3
+cd example/nuxt3
+npm install
+npm run dev
+
+# Nuxt 2
+cd example/nuxt2
+npm install
+npm run dev
+```
+
+## License
+
+MIT

package/dist/module.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+const nuxt3 = require('./nuxt3.cjs');
+require('@nuxt/kit');
+
+
+
+module.exports = nuxt3;

package/dist/module.d.cts

@@ -0,0 +1 @@
+export { ModuleOptions, default } from './nuxt3.cjs';

package/dist/module.d.mts

@@ -0,0 +1 @@
+export { ModuleOptions, default } from './nuxt3.mjs';

package/dist/module.d.ts

@@ -0,0 +1 @@
+export { ModuleOptions, default } from './nuxt3.js';

package/dist/module.mjs

@@ -0,0 +1,2 @@
+export { default } from './nuxt3.mjs';
+import '@nuxt/kit';

package/dist/nuxt2.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const path = require('path');
+
+function VuePivottableModule(moduleOptions) {
+  const options = {
+    ...this.options.pivottable,
+    ...moduleOptions
+  };
+  this.addPlugin({
+    src: path.resolve(__dirname, "plugin.cjs"),
+    fileName: "vue-pivottable.client.js",
+    mode: "client",
+    options
+  });
+  if (options.css !== false) {
+    this.options.css = this.options.css || [];
+    this.options.css.push("vue-pivottable/dist/vue-pivottable.css");
+  }
+}
+const meta = {
+  name: "@vue-pivottable/nuxt",
+  version: "0.1.0"
+};
+
+exports.default = VuePivottableModule;
+exports.meta = meta;

package/dist/nuxt2.d.cts

@@ -0,0 +1,24 @@
+import { resolve } from 'path';
+
+function VuePivottableModule(moduleOptions) {
+  const options = {
+    ...this.options.pivottable,
+    ...moduleOptions
+  };
+  this.addPlugin({
+    src: resolve(__dirname, "plugin.cjs"),
+    fileName: "vue-pivottable.client.js",
+    mode: "client",
+    options
+  });
+  if (options.css !== false) {
+    this.options.css = this.options.css || [];
+    this.options.css.push("vue-pivottable/dist/vue-pivottable.css");
+  }
+}
+const meta = {
+  name: "@vue-pivottable/nuxt",
+  version: "0.1.0"
+};
+
+export { VuePivottableModule as default, meta };

package/dist/nuxt2.d.mts

@@ -0,0 +1,24 @@
+import { resolve } from 'path';
+
+function VuePivottableModule(moduleOptions) {
+  const options = {
+    ...this.options.pivottable,
+    ...moduleOptions
+  };
+  this.addPlugin({
+    src: resolve(__dirname, "plugin.cjs"),
+    fileName: "vue-pivottable.client.js",
+    mode: "client",
+    options
+  });
+  if (options.css !== false) {
+    this.options.css = this.options.css || [];
+    this.options.css.push("vue-pivottable/dist/vue-pivottable.css");
+  }
+}
+const meta = {
+  name: "@vue-pivottable/nuxt",
+  version: "0.1.0"
+};
+
+export { VuePivottableModule as default, meta };

package/dist/nuxt2.d.ts

@@ -0,0 +1,24 @@
+import { resolve } from 'path';
+
+function VuePivottableModule(moduleOptions) {
+  const options = {
+    ...this.options.pivottable,
+    ...moduleOptions
+  };
+  this.addPlugin({
+    src: resolve(__dirname, "plugin.cjs"),
+    fileName: "vue-pivottable.client.js",
+    mode: "client",
+    options
+  });
+  if (options.css !== false) {
+    this.options.css = this.options.css || [];
+    this.options.css.push("vue-pivottable/dist/vue-pivottable.css");
+  }
+}
+const meta = {
+  name: "@vue-pivottable/nuxt",
+  version: "0.1.0"
+};
+
+export { VuePivottableModule as default, meta };

package/dist/nuxt2.mjs

@@ -0,0 +1,24 @@
+import { resolve } from 'path';
+
+function VuePivottableModule(moduleOptions) {
+  const options = {
+    ...this.options.pivottable,
+    ...moduleOptions
+  };
+  this.addPlugin({
+    src: resolve(__dirname, "plugin.cjs"),
+    fileName: "vue-pivottable.client.js",
+    mode: "client",
+    options
+  });
+  if (options.css !== false) {
+    this.options.css = this.options.css || [];
+    this.options.css.push("vue-pivottable/dist/vue-pivottable.css");
+  }
+}
+const meta = {
+  name: "@vue-pivottable/nuxt",
+  version: "0.1.0"
+};
+
+export { VuePivottableModule as default, meta };

package/dist/nuxt3.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+const kit = require('@nuxt/kit');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+const module$1 = kit.defineNuxtModule({
+  meta: {
+    name: "@vue-pivottable/nuxt",
+    configKey: "pivottable",
+    compatibility: {
+      nuxt: "^3.0.0"
+    }
+  },
+  defaults: {
+    css: true,
+    global: true
+  },
+  setup(options, nuxt) {
+    const resolver = kit.createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('nuxt3.cjs', document.baseURI).href)));
+    if (options.css) {
+      nuxt.options.css.push("vue-pivottable/dist/vue-pivottable.css");
+    }
+    kit.addPlugin({
+      src: resolver.resolve("./runtime/plugin"),
+      mode: "client"
+    });
+    if (options.global) {
+      kit.addComponent({
+        name: "VuePivottable",
+        export: "VuePivottable",
+        filePath: "vue-pivottable",
+        mode: "client"
+      });
+      kit.addComponent({
+        name: "VuePivottableUi",
+        export: "VuePivottableUi",
+        filePath: "vue-pivottable",
+        mode: "client"
+      });
+    }
+  }
+});
+
+module.exports = module$1;

package/dist/nuxt3.d.cts

@@ -0,0 +1,27 @@
+/**
+ * Nuxt 3 Module for vue-pivottable (vue3-pivottable)
+ *
+ * @example
+ * // nuxt.config.ts
+ * export default defineNuxtConfig({
+ *   modules: [
+ *     '@vue-pivottable/nuxt'
+ *   ]
+ * })
+ */
+interface ModuleOptions {
+    /**
+     * Include CSS automatically
+     * @default true
+     */
+    css?: boolean;
+    /**
+     * Register components globally
+     * @default true
+     */
+    global?: boolean;
+}
+declare const _default: any;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/nuxt3.d.mts

@@ -0,0 +1,27 @@
+/**
+ * Nuxt 3 Module for vue-pivottable (vue3-pivottable)
+ *
+ * @example
+ * // nuxt.config.ts
+ * export default defineNuxtConfig({
+ *   modules: [
+ *     '@vue-pivottable/nuxt'
+ *   ]
+ * })
+ */
+interface ModuleOptions {
+    /**
+     * Include CSS automatically
+     * @default true
+     */
+    css?: boolean;
+    /**
+     * Register components globally
+     * @default true
+     */
+    global?: boolean;
+}
+declare const _default: any;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/nuxt3.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Nuxt 3 Module for vue-pivottable (vue3-pivottable)
+ *
+ * @example
+ * // nuxt.config.ts
+ * export default defineNuxtConfig({
+ *   modules: [
+ *     '@vue-pivottable/nuxt'
+ *   ]
+ * })
+ */
+interface ModuleOptions {
+    /**
+     * Include CSS automatically
+     * @default true
+     */
+    css?: boolean;
+    /**
+     * Register components globally
+     * @default true
+     */
+    global?: boolean;
+}
+declare const _default: any;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/nuxt3.mjs

@@ -0,0 +1,41 @@
+import { defineNuxtModule, createResolver, addPlugin, addComponent } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@vue-pivottable/nuxt",
+    configKey: "pivottable",
+    compatibility: {
+      nuxt: "^3.0.0"
+    }
+  },
+  defaults: {
+    css: true,
+    global: true
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    if (options.css) {
+      nuxt.options.css.push("vue-pivottable/dist/vue-pivottable.css");
+    }
+    addPlugin({
+      src: resolver.resolve("./runtime/plugin"),
+      mode: "client"
+    });
+    if (options.global) {
+      addComponent({
+        name: "VuePivottable",
+        export: "VuePivottable",
+        filePath: "vue-pivottable",
+        mode: "client"
+      });
+      addComponent({
+        name: "VuePivottableUi",
+        export: "VuePivottableUi",
+        filePath: "vue-pivottable",
+        mode: "client"
+      });
+    }
+  }
+});
+
+export { module as default };

package/dist/plugin.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const Vue = require('vue');
+const vuePivottable = require('vue-pivottable');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const Vue__default = /*#__PURE__*/_interopDefaultCompat(Vue);
+
+Vue__default.component("VuePivottable", vuePivottable.VuePivottable);
+Vue__default.component("VuePivottableUi", vuePivottable.VuePivottableUi);
+
+exports.VuePivottable = vuePivottable.VuePivottable;
+exports.VuePivottableUi = vuePivottable.VuePivottableUi;

package/dist/plugin.d.cts

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import { VuePivottable, VuePivottableUi } from 'vue-pivottable';
+export { VuePivottable, VuePivottableUi } from 'vue-pivottable';
+
+Vue.component("VuePivottable", VuePivottable);
+Vue.component("VuePivottableUi", VuePivottableUi);

package/dist/plugin.d.mts

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import { VuePivottable, VuePivottableUi } from 'vue-pivottable';
+export { VuePivottable, VuePivottableUi } from 'vue-pivottable';
+
+Vue.component("VuePivottable", VuePivottable);
+Vue.component("VuePivottableUi", VuePivottableUi);

package/dist/plugin.d.ts

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import { VuePivottable, VuePivottableUi } from 'vue-pivottable';
+export { VuePivottable, VuePivottableUi } from 'vue-pivottable';
+
+Vue.component("VuePivottable", VuePivottable);
+Vue.component("VuePivottableUi", VuePivottableUi);

package/dist/plugin.mjs

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import { VuePivottable, VuePivottableUi } from 'vue-pivottable';
+export { VuePivottable, VuePivottableUi } from 'vue-pivottable';
+
+Vue.component("VuePivottable", VuePivottable);
+Vue.component("VuePivottableUi", VuePivottableUi);

package/dist/runtime/plugin.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+const _app = require('#app');
+
+const plugin = _app.defineNuxtPlugin((nuxtApp) => {
+  return {
+    provide: {
+      pivottable: {
+        // Expose utilities if needed
+      }
+    }
+  };
+});
+
+module.exports = plugin;

package/dist/runtime/plugin.d.cts

@@ -0,0 +1,7 @@
+/**
+ * Vue Pivottable Plugin for Nuxt 3
+ * Client-side only plugin
+ */
+declare const _default: any;
+
+export { _default as default };

package/dist/runtime/plugin.d.mts

@@ -0,0 +1,7 @@
+/**
+ * Vue Pivottable Plugin for Nuxt 3
+ * Client-side only plugin
+ */
+declare const _default: any;
+
+export { _default as default };

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Vue Pivottable Plugin for Nuxt 3
+ * Client-side only plugin
+ */
+declare const _default: any;
+
+export { _default as default };

package/dist/runtime/plugin.mjs

@@ -0,0 +1,13 @@
+import { defineNuxtPlugin } from '#app';
+
+const plugin = defineNuxtPlugin((nuxtApp) => {
+  return {
+    provide: {
+      pivottable: {
+        // Expose utilities if needed
+      }
+    }
+  };
+});
+
+export { plugin as default };

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@vue-pivottable/nuxt",
+  "version": "0.1.0",
+  "description": "Nuxt module for vue-pivottable (Nuxt 2/3 compatible)",
+  "author": "Seungwoo321",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    },
+    "./nuxt2": {
+      "import": "./dist/nuxt2.mjs",
+      "require": "./dist/nuxt2.cjs"
+    },
+    "./nuxt3": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/nuxt3.mjs",
+      "require": "./dist/nuxt3.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "module": "./dist/module.mjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "nuxt": "^2.0.0 || ^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "nuxt": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^3.9.0",
+    "@nuxt/schema": "^3.9.0",
+    "release-it": "^17.0.0",
+    "typescript": "^5.0.0",
+    "unbuild": "^2.0.0"
+  },
+  "keywords": [
+    "nuxt",
+    "nuxt2",
+    "nuxt3",
+    "nuxt-module",
+    "vue-pivottable",
+    "pivottable"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vue-pivottable/nuxt.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}