@nookuio/vue 1.0.0 → 1.0.2

package/README.md

@@ -1,57 +1,73 @@
-# nooku Nuxt Module
+# @nookuio/vue
 
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
+Lightweight Vue plugin + Vite plugin to connect your Vue 3 application to the Nooku editor.
 
-[Nuxt](https://nuxt.com/) module for [nooku](https://nooku.io) ⚡️
+This package provides:
+- A Vue 3 plugin that wires up the client-side runtime pieces used by Nooku.
+- A Vite plugin to enable the inspector integration during local development.
 
-This Nuxt module enables connection and interaction between your nuxt app and nooku.
+Prerequisites
+- Vue 3 project (Vue 3.x)
 
--   [ Learn more about nooku](https://nooku.io)
+---
 
-## Quick Setup
-
-1. Install: Add `@nooku/nuxt` to your project
+## 1) Install
 
+Using npm:
 ```bash
-# Using npm
-npm install -D @nooku/nuxt
+npm install -D @nookuio/vue
+```
 
-# Using pnpm
-pnpm add -D @nooku/nuxt
+Using pnpm:
+```bash
+pnpm add -D @nookuio/vue
 ```
 
-2. Configure: Add `@nooku/nuxt` to your Nuxt Integrations array `nuxt.config.{js,ts}`
-
-```js
-//nuxt.config.js (or) nuxt.config.ts
-
-export default defineNuxtConfig({
-	modules: [
-		'@nooku/nuxt',
-		//...
-	],
-	nooku: {
-		enabled: true // default true
-	},
-	//...
-})
+---
+
+## 2) Register the Vue plugin (runtime)
+
+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`).
+
+Example main.ts:
+
+```main.ts
+import './assets/main.css';
+
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import nookuPlugin from '@nookuio/vue';
+
+const app = createApp(App);
+
+app.use(router);
+if (import.meta.env.DEV) app.use(nookuPlugin);
+app.mount('#app');
 ```
 
-Now, open your Nuxt project in nooku. ✨
+---
+
+## 3) Add the Vite plugin
 
-## License
+This package also exposes a Vite plugin (exported from `@nookuio/vue/vite-plugin`). Add it to your `vite.config.ts` file.
 
-[MIT License](./LICENSE)
+Example `vite.config.ts`:
 
-Copyright (c) nooku
+```vite.config.ts
+import { fileURLToPath, URL } from 'node:url';
 
-<!-- Badges -->
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { nookuViteInspectorPlugin } from '@nookuio/vue/vite-plugin';
 
-[npm-version-src]: https://img.shields.io/npm/v/@nooku/nuxt/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/@nooku/nuxt
-[npm-downloads-src]: https://img.shields.io/npm/dm/@nooku/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/@nooku/nuxt
-[license-src]: https://img.shields.io/npm/l/@nooku/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/@nooku/nuxt
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), nookuViteInspectorPlugin(),],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+});
+```

package/dist/index.js

@@ -12,20 +12,20 @@ var _tailwind = require("./runtime/utils/tailwind");
 var _useQuery = require("./runtime/composables/useQuery");
 var _iframe = require("@nookuio/iframe");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function w(n, i, e) {
-  const o = typeof n == "string" ? document.querySelector(n) : n;
-  if (!o) {
-    const u = typeof n == "string" ? `Failed to mount app: mount target selector "${n}" returned null.` : "Failed to mount app to the target element";
-    console.warn(u);
+function w(t, u, e) {
+  const n = typeof t == "string" ? document.querySelector(t) : t;
+  if (!n) {
+    const r = typeof t == "string" ? `Failed to mount app: mount target selector "${t}" returned null.` : "Failed to mount app to the target element";
+    console.warn(r);
     return;
   }
-  const t = (0, _vue.createVNode)(i, e || {});
-  return (0, _vue.render)(t, o), t.component;
+  const o = (0, _vue.createVNode)(u, e || {});
+  return (0, _vue.render)(o, n), o.component;
 }
 const y = {
-  install(n, i) {
-    window === void 0 || !(0, _helpers.isInsideNookuEditor)() || window.location.pathname === _iframe.EDITOR_PAGE_PATH && (n.mount = function (e) {
-      n._component = {
+  install(t, u) {
+    process.env.DEV && (window === void 0 || !(0, _helpers.isInsideNookuEditor)() || window.location.pathname === _iframe.EDITOR_PAGE_PATH && (t.mount = function (e) {
+      t._component = {
         render() {
           return (0, _vue.h)(_vue.Suspense, {}, {
             default: () => (0, _vue.h)(_Renderer.default),
@@ -33,10 +33,12 @@ const y = {
           });
         }
       };
-      const o = (0, _useQuery.getQuery)(),
-        t = o.injectTailwind === "true" && (o.tailwindVersion === "3" || o.tailwindVersion === "4") ? Number(o.tailwindVersion) : void 0;
-      return (0, _tailwind.injectTailwind)(t), (0, _utils.initializeClient)(n), w(e, n._component)?.proxy;
-    });
+      const n = (0, _useQuery.getQuery)(),
+        o = n.injectTailwind === "true" && (n.tailwindVersion === "3" || n.tailwindVersion === "4") ? Number(n.tailwindVersion) : void 0;
+      (0, _tailwind.injectTailwind)(o);
+      const r = w(e, t._component);
+      return (0, _utils.initializeClient)(t), r?.proxy;
+    }));
   }
 };
 module.exports = y;

package/dist/index.mjs

@@ -1,38 +1,40 @@
-import { createVNode as d, h as r, render as m, Suspense as s } from "vue";
+import { createVNode as m, h as i, render as d, Suspense as s } from "vue";
 import l from "./runtime/components/Renderer.vue";
 import { isInsideNookuEditor as p } from "./runtime/utils/helpers.mjs";
 import { initializeClient as a } from "./runtime/utils/index.mjs";
-import { injectTailwind as c } from "./runtime/utils/tailwind.mjs";
-import { getQuery as f } from "./runtime/composables/useQuery.mjs";
+import { injectTailwind as f } from "./runtime/utils/tailwind.mjs";
+import { getQuery as c } from "./runtime/composables/useQuery.mjs";
 import { EDITOR_PAGE_PATH as g } from "@nookuio/iframe";
-function w(n, i, e) {
-  const o = typeof n == "string" ? document.querySelector(n) : n;
-  if (!o) {
-    const u = typeof n == "string" ? `Failed to mount app: mount target selector "${n}" returned null.` : "Failed to mount app to the target element";
-    console.warn(u);
+function w(t, u, e) {
+  const n = typeof t == "string" ? document.querySelector(t) : t;
+  if (!n) {
+    const r = typeof t == "string" ? `Failed to mount app: mount target selector "${t}" returned null.` : "Failed to mount app to the target element";
+    console.warn(r);
     return;
   }
-  const t = d(i, e || {});
-  return m(t, o), t.component;
+  const o = m(u, e || {});
+  return d(o, n), o.component;
 }
 const y = {
-  install(n, i) {
-    window === void 0 || !p() || window.location.pathname === g && (n.mount = function(e) {
-      n._component = {
+  install(t, u) {
+    import.meta.env.DEV && (window === void 0 || !p() || window.location.pathname === g && (t.mount = function(e) {
+      t._component = {
         render() {
-          return r(
+          return i(
             s,
             {},
             {
-              default: () => r(l),
-              fallback: () => r("div", "Loading...")
+              default: () => i(l),
+              fallback: () => i("div", "Loading...")
             }
           );
         }
       };
-      const o = f(), t = o.injectTailwind === "true" && (o.tailwindVersion === "3" || o.tailwindVersion === "4") ? Number(o.tailwindVersion) : void 0;
-      return c(t), a(n), w(e, n._component)?.proxy;
-    });
+      const n = c(), o = n.injectTailwind === "true" && (n.tailwindVersion === "3" || n.tailwindVersion === "4") ? Number(n.tailwindVersion) : void 0;
+      f(o);
+      const r = w(e, t._component);
+      return a(t), r?.proxy;
+    }));
   }
 };
 export default y;

package/dist/runtime/components/Renderer.vue

@@ -1,43 +1,43 @@
 <script setup>
-import { computed as o, watch as s, shallowRef as i } from "vue";
-import { useQuery as m } from "../composables/useQuery";
-import "./NotFound.vue";
-const { query: e } = m(), a = o(() => e.value.path || ""), p = i(await u(a.value)), d = o(() => {
-  if (!e.value.props) return {};
+import { computed, watch, shallowRef } from "vue";
+import { useQuery } from "../composables/useQuery";
+import ErrorComponent from "./NotFound.vue";
+const { query } = useQuery(), componentPath = computed(() => query.value.path || ""), componentToRender = shallowRef(await importVueComponent(componentPath.value)), componentProps = computed(() => {
+  if (!query.value.props) return {};
   try {
-    return new Function(`return ${e.value.props}`)();
+    return new Function(`return ${query.value.props}`)();
   } catch {
     return {};
   }
 });
-async function u(n) {
-  if (!n) return;
-  const r = window?.__buildAssetsURL;
+async function importVueComponent(path) {
+  if (!path) return;
+  const buildAssetsURL = window?.__buildAssetsURL;
   try {
-    return r ? await import(
+    return buildAssetsURL ? await import(
       /* @vite-ignore */
-      r(n)
+      buildAssetsURL(path)
     ).then(
-      (t) => e.value.name ? t?.[e.value.name] : t.default
+      (c) => query.value.name ? c?.[query.value.name] : c.default
     ) : await import(
       /* @vite-ignore */
-      "/@fs/" + n
+      "/@fs/" + path
     ).then(
-      (t) => e.value.name ? t?.[e.value.name] : t.default
+      (c) => query.value.name ? c?.[query.value.name] : c.default
     );
   } catch {
     try {
       return await import(
         /* @vite-ignore */
-        n
-      ).then((t) => e.value.name ? t?.[e.value.name] : t.default);
-    } catch (t) {
-      console.log("Error importing component:", t);
+        path
+      ).then((c) => query.value.name ? c?.[query.value.name] : c.default);
+    } catch (err) {
+      console.log("Error importing component:", err);
       return;
     }
   }
 }
-s(a, async (n) => p.value = await u(n));
+watch(componentPath, async (path) => componentToRender.value = await importVueComponent(path));
 </script>
 
 <template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nookuio/vue",
   "description": "",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {