@nara-web/inertia-vue 0.1.0

package/README.md

@@ -0,0 +1,57 @@
+# @nara/inertia-vue
+
+Vue 3 + Inertia.js adapter for the NARA framework.
+
+## Installation
+
+```bash
+npm install @nara/inertia-vue @inertiajs/vue3 vue
+```
+
+## Usage
+
+### Server-side
+
+Register the Vue adapter in your NARA application:
+
+```typescript
+// app/index.ts or server.ts
+import { vueAdapter } from '@nara/inertia-vue';
+
+const app = new Nara({
+  adapter: vueAdapter({
+    rootView: 'inertia.html',
+  }),
+});
+```
+
+### Client-side
+
+Initialize the Inertia app in your client entry point:
+
+```typescript
+// resources/js/app.ts
+import { initInertiaApp } from '@nara/inertia-vue';
+
+initInertiaApp({
+  resolve: (name) => import(`./pages/${name}.vue`),
+});
+```
+
+### Vite Configuration
+
+Use the provided helper to configure Vite:
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { createViteConfig } from '@nara/inertia-vue';
+
+export default defineConfig(
+  createViteConfig()
+);
+```
+
+## License
+
+MIT

package/dist/chunk-ZSN4VNUJ.js

@@ -0,0 +1,22 @@
+// src/client/app.ts
+import { createApp, h } from "vue";
+import { createInertiaApp } from "@inertiajs/vue3";
+function initInertiaApp(options = {}) {
+  const {
+    el = "#app",
+    resolve = (name) => {
+      const pages = import.meta.glob("./pages/**/*.vue", { eager: true });
+      return pages[`./pages/${name}.vue`];
+    }
+  } = options;
+  createInertiaApp({
+    resolve,
+    setup({ el: element, App, props, plugin }) {
+      createApp({ render: () => h(App, props) }).use(plugin).mount(element);
+    }
+  });
+}
+
+export {
+  initInertiaApp
+};

package/dist/client/app.cjs

@@ -0,0 +1,47 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client/app.ts
+var app_exports = {};
+__export(app_exports, {
+  initInertiaApp: () => initInertiaApp
+});
+module.exports = __toCommonJS(app_exports);
+var import_vue = require("vue");
+var import_vue3 = require("@inertiajs/vue3");
+var import_meta = {};
+function initInertiaApp(options = {}) {
+  const {
+    el = "#app",
+    resolve = (name) => {
+      const pages = import_meta.glob("./pages/**/*.vue", { eager: true });
+      return pages[`./pages/${name}.vue`];
+    }
+  } = options;
+  (0, import_vue3.createInertiaApp)({
+    resolve,
+    setup({ el: element, App, props, plugin }) {
+      (0, import_vue.createApp)({ render: () => (0, import_vue.h)(App, props) }).use(plugin).mount(element);
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  initInertiaApp
+});

package/dist/client/app.d.cts

@@ -0,0 +1,17 @@
+interface InitOptions {
+    /**
+     * Resolve a page component by name
+     */
+    resolve?: (name: string) => any;
+    /**
+     * Element selector to mount the app
+     * @default '#app'
+     */
+    el?: string;
+}
+/**
+ * Initializes the Inertia app for Vue 3
+ */
+declare function initInertiaApp(options?: InitOptions): void;
+
+export { type InitOptions, initInertiaApp };

package/dist/client/app.d.ts

@@ -0,0 +1,17 @@
+interface InitOptions {
+    /**
+     * Resolve a page component by name
+     */
+    resolve?: (name: string) => any;
+    /**
+     * Element selector to mount the app
+     * @default '#app'
+     */
+    el?: string;
+}
+/**
+ * Initializes the Inertia app for Vue 3
+ */
+declare function initInertiaApp(options?: InitOptions): void;
+
+export { type InitOptions, initInertiaApp };

package/dist/client/app.js

@@ -0,0 +1,6 @@
+import {
+  initInertiaApp
+} from "../chunk-ZSN4VNUJ.js";
+export {
+  initInertiaApp
+};

package/dist/index.cjs

@@ -0,0 +1,146 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  createViteConfig: () => createViteConfig,
+  initInertiaApp: () => initInertiaApp,
+  vueAdapter: () => vueAdapter
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/middleware.ts
+function inertiaMiddleware(options = {}) {
+  const { rootView = "inertia.html", version = "1.0.0" } = options;
+  return async (req, res, next) => {
+    res.inertia = async (component, inertiaProps = {}, viewProps = {}) => {
+      const url = `${req.protocol}://${req.get("host")}${req.originalUrl}`;
+      const props = {
+        user: req.user || {},
+        ...inertiaProps,
+        ...viewProps,
+        error: req.cookies?.error || null
+      };
+      if (req.cookies?.error) {
+        res.clearCookie("error");
+      }
+      const inertiaObject = {
+        component,
+        props,
+        url,
+        version
+      };
+      if (!req.header("X-Inertia")) {
+        try {
+          const viewService = await import("@services/View").catch(() => null);
+          if (!viewService || !viewService.view) {
+            throw new Error("View service unavailable");
+          }
+          const html = await viewService.view(rootView, {
+            page: JSON.stringify(inertiaObject),
+            title: process.env["TITLE"] || "Nara App"
+          });
+          return res.type("html").send(html);
+        } catch (e) {
+          return res.status(500).send("Root view not found or View service unavailable");
+        }
+      }
+      res.setHeader("Vary", "Accept");
+      res.setHeader("X-Inertia", "true");
+      res.setHeader("X-Inertia-Version", version);
+      return res.json(inertiaObject);
+    };
+    next();
+  };
+}
+
+// src/adapter.ts
+function vueAdapter(options = {}) {
+  return {
+    name: "vue-inertia",
+    /**
+     * Factory that returns the adapter's global middleware
+     */
+    middleware: () => inertiaMiddleware(options),
+    /**
+     * Method called during app initialization to extend the NaraResponse
+     */
+    extendResponse: (_res) => {
+    }
+  };
+}
+
+// src/vite.ts
+var import_plugin_vue = __toESM(require("@vitejs/plugin-vue"), 1);
+function createViteConfig(options = {}) {
+  return {
+    plugins: [
+      (0, import_plugin_vue.default)(options.vueOptions)
+    ],
+    resolve: {
+      alias: {
+        "@": "/resources/js"
+      }
+    },
+    build: {
+      outDir: "public/build",
+      manifest: true,
+      rollupOptions: {
+        input: "resources/js/app.ts"
+      }
+    }
+  };
+}
+
+// src/client/app.ts
+var import_vue = require("vue");
+var import_vue3 = require("@inertiajs/vue3");
+var import_meta = {};
+function initInertiaApp(options = {}) {
+  const {
+    el = "#app",
+    resolve = (name) => {
+      const pages = import_meta.glob("./pages/**/*.vue", { eager: true });
+      return pages[`./pages/${name}.vue`];
+    }
+  } = options;
+  (0, import_vue3.createInertiaApp)({
+    resolve,
+    setup({ el: element, App, props, plugin }) {
+      (0, import_vue.createApp)({ render: () => (0, import_vue.h)(App, props) }).use(plugin).mount(element);
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createViteConfig,
+  initInertiaApp,
+  vueAdapter
+});

package/dist/index.d.cts

@@ -0,0 +1,64 @@
+import { UserConfig } from 'vite';
+export { InitOptions, initInertiaApp } from './client/app.cjs';
+
+/**
+ * Nara Request and Response minimal interfaces for the adapter
+ */
+interface NaraRequest {
+    protocol: string;
+    get(header: string): string | undefined;
+    header(header: string): string | undefined;
+    originalUrl: string;
+    cookies: Record<string, any>;
+    [key: string]: any;
+}
+interface NaraResponse {
+    type(type: string): this;
+    send(body: any): any;
+    json(body: any): any;
+    setHeader(name: string, value: string): this;
+    status(code: number): this;
+    cookie(name: string, value: any, options?: any): this;
+    clearCookie(name: string): this;
+    inertia?: (component: string, props?: Record<string, any>, viewProps?: Record<string, any>) => Promise<any>;
+    [key: string]: any;
+}
+type AdapterMiddlewareHandler = (req: NaraRequest, res: NaraResponse, next: () => void) => unknown | Promise<unknown>;
+interface FrontendAdapter {
+    name: string;
+    middleware: () => AdapterMiddlewareHandler;
+    extendResponse: (res: NaraResponse) => void;
+}
+
+interface VueAdapterOptions {
+    /**
+     * The root view template file name
+     * @default 'inertia.html'
+     */
+    rootView?: string;
+    /**
+     * The version of the assets
+     * @default '1.0.0'
+     */
+    version?: string;
+}
+
+/**
+ * Vue 3 adapter for Inertia.js
+ *
+ * Provides Inertia.js support for Vue 3 components.
+ */
+declare function vueAdapter(options?: VueAdapterOptions): FrontendAdapter;
+
+interface ViteOptions {
+    /**
+     * Options for the Vue plugin
+     */
+    vueOptions?: any;
+}
+/**
+ * Creates a Vite configuration for NARA + Vue 3
+ */
+declare function createViteConfig(options?: ViteOptions): UserConfig;
+
+export { type ViteOptions, type VueAdapterOptions, createViteConfig, vueAdapter };

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+import { UserConfig } from 'vite';
+export { InitOptions, initInertiaApp } from './client/app.js';
+
+/**
+ * Nara Request and Response minimal interfaces for the adapter
+ */
+interface NaraRequest {
+    protocol: string;
+    get(header: string): string | undefined;
+    header(header: string): string | undefined;
+    originalUrl: string;
+    cookies: Record<string, any>;
+    [key: string]: any;
+}
+interface NaraResponse {
+    type(type: string): this;
+    send(body: any): any;
+    json(body: any): any;
+    setHeader(name: string, value: string): this;
+    status(code: number): this;
+    cookie(name: string, value: any, options?: any): this;
+    clearCookie(name: string): this;
+    inertia?: (component: string, props?: Record<string, any>, viewProps?: Record<string, any>) => Promise<any>;
+    [key: string]: any;
+}
+type AdapterMiddlewareHandler = (req: NaraRequest, res: NaraResponse, next: () => void) => unknown | Promise<unknown>;
+interface FrontendAdapter {
+    name: string;
+    middleware: () => AdapterMiddlewareHandler;
+    extendResponse: (res: NaraResponse) => void;
+}
+
+interface VueAdapterOptions {
+    /**
+     * The root view template file name
+     * @default 'inertia.html'
+     */
+    rootView?: string;
+    /**
+     * The version of the assets
+     * @default '1.0.0'
+     */
+    version?: string;
+}
+
+/**
+ * Vue 3 adapter for Inertia.js
+ *
+ * Provides Inertia.js support for Vue 3 components.
+ */
+declare function vueAdapter(options?: VueAdapterOptions): FrontendAdapter;
+
+interface ViteOptions {
+    /**
+     * Options for the Vue plugin
+     */
+    vueOptions?: any;
+}
+/**
+ * Creates a Vite configuration for NARA + Vue 3
+ */
+declare function createViteConfig(options?: ViteOptions): UserConfig;
+
+export { type ViteOptions, type VueAdapterOptions, createViteConfig, vueAdapter };

package/dist/index.js

@@ -0,0 +1,91 @@
+import {
+  initInertiaApp
+} from "./chunk-ZSN4VNUJ.js";
+
+// src/middleware.ts
+function inertiaMiddleware(options = {}) {
+  const { rootView = "inertia.html", version = "1.0.0" } = options;
+  return async (req, res, next) => {
+    res.inertia = async (component, inertiaProps = {}, viewProps = {}) => {
+      const url = `${req.protocol}://${req.get("host")}${req.originalUrl}`;
+      const props = {
+        user: req.user || {},
+        ...inertiaProps,
+        ...viewProps,
+        error: req.cookies?.error || null
+      };
+      if (req.cookies?.error) {
+        res.clearCookie("error");
+      }
+      const inertiaObject = {
+        component,
+        props,
+        url,
+        version
+      };
+      if (!req.header("X-Inertia")) {
+        try {
+          const viewService = await import("@services/View").catch(() => null);
+          if (!viewService || !viewService.view) {
+            throw new Error("View service unavailable");
+          }
+          const html = await viewService.view(rootView, {
+            page: JSON.stringify(inertiaObject),
+            title: process.env["TITLE"] || "Nara App"
+          });
+          return res.type("html").send(html);
+        } catch (e) {
+          return res.status(500).send("Root view not found or View service unavailable");
+        }
+      }
+      res.setHeader("Vary", "Accept");
+      res.setHeader("X-Inertia", "true");
+      res.setHeader("X-Inertia-Version", version);
+      return res.json(inertiaObject);
+    };
+    next();
+  };
+}
+
+// src/adapter.ts
+function vueAdapter(options = {}) {
+  return {
+    name: "vue-inertia",
+    /**
+     * Factory that returns the adapter's global middleware
+     */
+    middleware: () => inertiaMiddleware(options),
+    /**
+     * Method called during app initialization to extend the NaraResponse
+     */
+    extendResponse: (_res) => {
+    }
+  };
+}
+
+// src/vite.ts
+import vue from "@vitejs/plugin-vue";
+function createViteConfig(options = {}) {
+  return {
+    plugins: [
+      vue(options.vueOptions)
+    ],
+    resolve: {
+      alias: {
+        "@": "/resources/js"
+      }
+    },
+    build: {
+      outDir: "public/build",
+      manifest: true,
+      rollupOptions: {
+        input: "resources/js/app.ts"
+      }
+    }
+  };
+}
+export {
+  createViteConfig,
+  initInertiaApp,
+  vueAdapter
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@nara-web/inertia-vue",
+  "version": "0.1.0",
+  "description": "Vue 3 + Inertia.js adapter for NARA",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@inertiajs/vue3": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@nara-web/core": "^0.1.0",
+    "vue": "^3.5.0",
+    "vite": "^5.0.0 || ^6.0.0"
+  },
+  "devDependencies": {
+    "@nara-web/core": "^0.1.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3",
+    "vue": "^3.5.13"
+  },
+  "license": "MIT"
+}