@nookuio/vue 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +56 -40
  2. package/dist/index.js +16 -14
  3. package/dist/index.mjs +21 -19
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,57 +1,73 @@
1
- # nooku Nuxt Module
1
+ # @nookuio/vue
2
2
 
3
- [![npm version][npm-version-src]][npm-version-href]
4
- [![npm downloads][npm-downloads-src]][npm-downloads-href]
5
- [![License][license-src]][license-href]
3
+ Lightweight Vue plugin + Vite plugin to connect your Vue 3 application to the Nooku editor.
6
4
 
7
- [Nuxt](https://nuxt.com/) module for [nooku](https://nooku.io) ⚡️
5
+ This package provides:
6
+ - A Vue 3 plugin that wires up the client-side runtime pieces used by Nooku.
7
+ - A Vite plugin to enable the inspector integration during local development.
8
8
 
9
- This Nuxt module enables connection and interaction between your nuxt app and nooku.
9
+ Prerequisites
10
+ - Vue 3 project (Vue 3.x)
10
11
 
11
- - [ Learn more about nooku](https://nooku.io)
12
+ ---
12
13
 
13
- ## Quick Setup
14
-
15
- 1. Install: Add `@nooku/nuxt` to your project
14
+ ## 1) Install
16
15
 
16
+ Using npm:
17
17
  ```bash
18
- # Using npm
19
- npm install -D @nooku/nuxt
18
+ npm install -D @nookuio/vue
19
+ ```
20
20
 
21
- # Using pnpm
22
- pnpm add -D @nooku/nuxt
21
+ Using pnpm:
22
+ ```bash
23
+ pnpm add -D @nookuio/vue
23
24
  ```
24
25
 
25
- 2. Configure: Add `@nooku/nuxt` to your Nuxt Integrations array `nuxt.config.{js,ts}`
26
-
27
- ```js
28
- //nuxt.config.js (or) nuxt.config.ts
29
-
30
- export default defineNuxtConfig({
31
- modules: [
32
- '@nooku/nuxt',
33
- //...
34
- ],
35
- nooku: {
36
- enabled: true // default true
37
- },
38
- //...
39
- })
26
+ ---
27
+
28
+ ## 2) Register the Vue plugin (runtime)
29
+
30
+ The package's default export is a Vue plugin. Register the plugin with `app.use(...)` in your app's entry file (e.g. `main.js` / `main.ts`).
31
+
32
+ Example main.ts:
33
+
34
+ ```main.ts
35
+ import './assets/main.css';
36
+
37
+ import { createApp } from 'vue';
38
+ import App from './App.vue';
39
+ import router from './router';
40
+ import nookuPlugin from '@nookuio/vue';
41
+
42
+ const app = createApp(App);
43
+
44
+ app.use(router);
45
+ if (import.meta.env.DEV) app.use(nookuPlugin);
46
+ app.mount('#app');
40
47
  ```
41
48
 
42
- Now, open your Nuxt project in nooku. ✨
49
+ ---
50
+
51
+ ## 3) Add the Vite plugin
43
52
 
44
- ## License
53
+ This package also exposes a Vite plugin (exported from `@nookuio/vue/vite-plugin`). Add it to your `vite.config.ts` file.
45
54
 
46
- [MIT License](./LICENSE)
55
+ Example `vite.config.ts`:
47
56
 
48
- Copyright (c) nooku
57
+ ```vite.config.ts
58
+ import { fileURLToPath, URL } from 'node:url';
49
59
 
50
- <!-- Badges -->
60
+ import { defineConfig } from 'vite';
61
+ import vue from '@vitejs/plugin-vue';
62
+ import { nookuViteInspectorPlugin } from '@nookuio/vue/vite-plugin';
51
63
 
52
- [npm-version-src]: https://img.shields.io/npm/v/@nooku/nuxt/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
53
- [npm-version-href]: https://npmjs.com/package/@nooku/nuxt
54
- [npm-downloads-src]: https://img.shields.io/npm/dm/@nooku/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
55
- [npm-downloads-href]: https://npmjs.com/package/@nooku/nuxt
56
- [license-src]: https://img.shields.io/npm/l/@nooku/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
57
- [license-href]: https://npmjs.com/package/@nooku/nuxt
64
+ // https://vite.dev/config/
65
+ export default defineConfig({
66
+ plugins: [vue(), nookuViteInspectorPlugin(),],
67
+ resolve: {
68
+ alias: {
69
+ '@': fileURLToPath(new URL('./src', import.meta.url))
70
+ }
71
+ }
72
+ });
73
+ ```
package/dist/index.js CHANGED
@@ -12,20 +12,20 @@ var _tailwind = require("./runtime/utils/tailwind");
12
12
  var _useQuery = require("./runtime/composables/useQuery");
13
13
  var _iframe = require("@nookuio/iframe");
14
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
- function w(n, i, e) {
16
- const o = typeof n == "string" ? document.querySelector(n) : n;
17
- if (!o) {
18
- const u = typeof n == "string" ? `Failed to mount app: mount target selector "${n}" returned null.` : "Failed to mount app to the target element";
19
- console.warn(u);
15
+ function w(t, u, e) {
16
+ const n = typeof t == "string" ? document.querySelector(t) : t;
17
+ if (!n) {
18
+ const r = typeof t == "string" ? `Failed to mount app: mount target selector "${t}" returned null.` : "Failed to mount app to the target element";
19
+ console.warn(r);
20
20
  return;
21
21
  }
22
- const t = (0, _vue.createVNode)(i, e || {});
23
- return (0, _vue.render)(t, o), t.component;
22
+ const o = (0, _vue.createVNode)(u, e || {});
23
+ return (0, _vue.render)(o, n), o.component;
24
24
  }
25
25
  const y = {
26
- install(n, i) {
27
- window === void 0 || !(0, _helpers.isInsideNookuEditor)() || window.location.pathname === _iframe.EDITOR_PAGE_PATH && (n.mount = function (e) {
28
- n._component = {
26
+ install(t, u) {
27
+ process.env.DEV && (window === void 0 || !(0, _helpers.isInsideNookuEditor)() || window.location.pathname === _iframe.EDITOR_PAGE_PATH && (t.mount = function (e) {
28
+ t._component = {
29
29
  render() {
30
30
  return (0, _vue.h)(_vue.Suspense, {}, {
31
31
  default: () => (0, _vue.h)(_Renderer.default),
@@ -33,10 +33,12 @@ const y = {
33
33
  });
34
34
  }
35
35
  };
36
- const o = (0, _useQuery.getQuery)(),
37
- t = o.injectTailwind === "true" && (o.tailwindVersion === "3" || o.tailwindVersion === "4") ? Number(o.tailwindVersion) : void 0;
38
- return (0, _tailwind.injectTailwind)(t), (0, _utils.initializeClient)(n), w(e, n._component)?.proxy;
39
- });
36
+ const n = (0, _useQuery.getQuery)(),
37
+ o = n.injectTailwind === "true" && (n.tailwindVersion === "3" || n.tailwindVersion === "4") ? Number(n.tailwindVersion) : void 0;
38
+ (0, _tailwind.injectTailwind)(o);
39
+ const r = w(e, t._component);
40
+ return (0, _utils.initializeClient)(t), r?.proxy;
41
+ }));
40
42
  }
41
43
  };
42
44
  module.exports = y;
package/dist/index.mjs CHANGED
@@ -1,38 +1,40 @@
1
- import { createVNode as d, h as r, render as m, Suspense as s } from "vue";
1
+ import { createVNode as m, h as i, render as d, Suspense as s } from "vue";
2
2
  import l from "./runtime/components/Renderer.vue";
3
3
  import { isInsideNookuEditor as p } from "./runtime/utils/helpers.mjs";
4
4
  import { initializeClient as a } from "./runtime/utils/index.mjs";
5
- import { injectTailwind as c } from "./runtime/utils/tailwind.mjs";
6
- import { getQuery as f } from "./runtime/composables/useQuery.mjs";
5
+ import { injectTailwind as f } from "./runtime/utils/tailwind.mjs";
6
+ import { getQuery as c } from "./runtime/composables/useQuery.mjs";
7
7
  import { EDITOR_PAGE_PATH as g } from "@nookuio/iframe";
8
- function w(n, i, e) {
9
- const o = typeof n == "string" ? document.querySelector(n) : n;
10
- if (!o) {
11
- const u = typeof n == "string" ? `Failed to mount app: mount target selector "${n}" returned null.` : "Failed to mount app to the target element";
12
- console.warn(u);
8
+ function w(t, u, e) {
9
+ const n = typeof t == "string" ? document.querySelector(t) : t;
10
+ if (!n) {
11
+ const r = typeof t == "string" ? `Failed to mount app: mount target selector "${t}" returned null.` : "Failed to mount app to the target element";
12
+ console.warn(r);
13
13
  return;
14
14
  }
15
- const t = d(i, e || {});
16
- return m(t, o), t.component;
15
+ const o = m(u, e || {});
16
+ return d(o, n), o.component;
17
17
  }
18
18
  const y = {
19
- install(n, i) {
20
- window === void 0 || !p() || window.location.pathname === g && (n.mount = function(e) {
21
- n._component = {
19
+ install(t, u) {
20
+ import.meta.env.DEV && (window === void 0 || !p() || window.location.pathname === g && (t.mount = function(e) {
21
+ t._component = {
22
22
  render() {
23
- return r(
23
+ return i(
24
24
  s,
25
25
  {},
26
26
  {
27
- default: () => r(l),
28
- fallback: () => r("div", "Loading...")
27
+ default: () => i(l),
28
+ fallback: () => i("div", "Loading...")
29
29
  }
30
30
  );
31
31
  }
32
32
  };
33
- const o = f(), t = o.injectTailwind === "true" && (o.tailwindVersion === "3" || o.tailwindVersion === "4") ? Number(o.tailwindVersion) : void 0;
34
- return c(t), a(n), w(e, n._component)?.proxy;
35
- });
33
+ const n = c(), o = n.injectTailwind === "true" && (n.tailwindVersion === "3" || n.tailwindVersion === "4") ? Number(n.tailwindVersion) : void 0;
34
+ f(o);
35
+ const r = w(e, t._component);
36
+ return a(t), r?.proxy;
37
+ }));
36
38
  }
37
39
  };
38
40
  export default y;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nookuio/vue",
3
3
  "description": "",
4
- "version": "1.0.1",
4
+ "version": "1.0.2",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
7
7
  "exports": {