vue-ready-modular 1.0.0

package/bin/cli.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+
+import { createModule } from "../lib/generator.js";
+
+const args = process.argv.slice(2);
+
+if (args[0] !== "make" || !args[1]) {
+  console.log("Usage: vue-modular make <module-name>");
+  process.exit(1);
+}
+
+createModule(args[1]);

package/docs/INSTALLATION.md

@@ -0,0 +1,6 @@
+# Vue Modular CLI
+
+## Installation
+
+```bash
+npm install -g vue-ready-modular

package/lib/generator.js

@@ -0,0 +1,76 @@
+import path from "path";
+import fs from "fs";
+
+import { createDir, createFile } from "./utils/file.js";
+import { capitalize } from "./utils/string.js";
+
+// Templates
+import indexTemplate from "./templates/index.template.js";
+import routesTemplate from "./templates/routes.template.js";
+import storeTemplate from "./templates/store.template.js";
+import dataTemplate from "./templates/data.template.js";
+import serviceTemplate from "./templates/service.template.js";
+import queryTemplate from "./templates/query.template.js";
+import mutationTemplate from "./templates/mutation.template.js";
+import pageTemplate from "./templates/page.template.js";
+import addModalTemplate from "./templates/modal-add.template.js";
+import editModalTemplate from "./templates/modal-edit.template.js";
+import viewModalTemplate from "./templates/modal-view.template.js";
+import deleteModalTemplate from "./templates/modal-delete.template.js";
+
+/**
+ * Generates a modular Vue.js module with a full structure.
+ * @param {string} name - Module name (e.g., "country")
+ */
+export function createModule(name) {
+  const module = name.toLowerCase();
+  const Module = capitalize(module);
+
+  const basePath = path.join(process.cwd(), "src/modules", module);
+
+  // Prevent overwriting existing module
+  if (fs.existsSync(basePath)) {
+    console.error(`❌ Module "${module}" already exists`);
+    process.exit(1);
+  }
+
+  // -----------------------------
+  // 1. Create folder structure
+  // -----------------------------
+  const folders = [
+    `${basePath}/stores`,
+    `${basePath}/pages/components`,
+    `${basePath}/data`,
+    `${basePath}/services`,
+    `${basePath}/queries`,
+  ];
+
+  folders.forEach(createDir);
+
+  // -----------------------------
+  // 2. Prepare template context
+  // -----------------------------
+  const ctx = { name: module, Name: Module };
+
+  // -----------------------------
+  // 3. Create core module files
+  // -----------------------------
+  createFile(`${basePath}/index.js`, indexTemplate(ctx));
+  createFile(`${basePath}/routes.js`, routesTemplate(ctx));
+  createFile(`${basePath}/stores/${module}Store.js`, storeTemplate(ctx));
+  createFile(`${basePath}/data/${module}Data.js`, dataTemplate(ctx));
+  createFile(`${basePath}/services/${module}Service.js`, serviceTemplate(ctx));
+  createFile(`${basePath}/queries/use${Module}sQuery.js`, queryTemplate(ctx));
+  createFile(`${basePath}/queries/use${Module}Mutations.js`, mutationTemplate(ctx));
+
+  // -----------------------------
+  // 4. Create page & modal components
+  // -----------------------------
+  createFile(`${basePath}/pages/${Module}Page.vue`, pageTemplate(ctx));
+  createFile(`${basePath}/pages/components/AddModal.vue`, addModalTemplate(ctx));
+  createFile(`${basePath}/pages/components/EditModal.vue`, editModalTemplate(ctx));
+  createFile(`${basePath}/pages/components/ViewModal.vue`, viewModalTemplate(ctx));
+  createFile(`${basePath}/pages/components/DeleteModal.vue`, deleteModalTemplate(ctx));
+
+  console.log(`✅ Module "${module}" created successfully`);
+}

package/lib/templates/data.template.js

@@ -0,0 +1,10 @@
+export default ({ name }) => `const ${name}Data = [
+  { id: 1, name: 'Test Name' },
+  { id: 2, name: 'Test Name 2' },
+  { id: 3, name: 'Test Name 3' },
+  { id: 4, name: 'Test Name 4' },
+  { id: 5, name: 'Test Name 5' }
+]
+
+export default ${name}Data
+`;

package/lib/templates/index.template.js

@@ -0,0 +1,6 @@
+export default () => `import routes from './routes';
+
+export default {
+  routes
+};
+`;

package/lib/templates/modal-add.template.js

@@ -0,0 +1,59 @@
+export default ({ name, Name }) => `<template>
+  <BaseModal
+    :isVisible="store.isModal"
+    :title="\`Add \${store.moduleName}\`"
+    :maxWidth="\`\${store.modalWidth}\`"
+    @close="store.handleToggleModal"
+  >
+    <form @submit.prevent="handleSubmit" class="space-y-4">
+      <!-- ${Name} Name -->
+      <div>
+        <BaseLabel for="name">Name</BaseLabel>
+        <BaseInput
+          id="name"
+          v-model="formData.name"
+          :required="true"
+          placeholder="Eg: Example Name"
+        />
+      </div>
+
+      <!-- Actions -->
+      <div class="flex justify-end gap-2 pt-4">
+        <BaseButton
+          class="bg-yellow-600 hover:bg-yellow-700"
+          type="button"
+          @click="store.handleToggleModal"
+        >Cancel</BaseButton>
+        <BaseButton type="submit">Save</BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { use${Name}Mutations } from '@/modules/${name}/queries/use${Name}Mutations'
+import app from '@/shared/config/appConfig'
+import { use${Name}Store } from '@/modules/${name}/stores/${name}Store'
+
+const store = use${Name}Store()
+
+const formData = ref({
+  name: app.moduleLocal ? 'Test Name' : '',
+})
+
+const { submit } = use${Name}Mutations(store.moduleName, {
+  onSuccess() {
+    store.handleToggleModal()          // ✅ close modal
+    store.handleReset(formData.value)  // ✅ reset form
+  },
+  onError: (error) => {
+    console.log('Custom error handling', error)
+  },
+})
+
+const handleSubmit = async () => {
+  await submit.mutateAsync(formData.value)
+}
+</script>
+`;

package/lib/templates/modal-delete.template.js

@@ -0,0 +1,52 @@
+export default ({ name, Name }) => `<template>
+  <BaseModal
+    :isVisible="store.isDeleteModal"
+    :title="\`Are you sure you want to delete this \${store.moduleName}?\`"
+    :maxWidth="\`\${store.modalWidth}\`"
+    @close="store.handleToggleModal"
+  >
+    <form @submit.prevent="handleSubmit" class="space-y-4">
+      <div class="space-y-2">
+        <p class="text-lg">
+          <strong>ID:</strong>
+          {{ store.item.id }}
+        </p>
+        <p class="text-lg">
+          <strong>Name:</strong>
+          {{ store.item.name }}
+        </p>
+      </div>
+
+      <!-- Actions -->
+      <div class="flex justify-end gap-2 pt-4">
+        <BaseButton
+          class="bg-yellow-600 hover:bg-yellow-700"
+          type="button"
+          @click="store.handleToggleModal"
+        >Cancel</BaseButton>
+        <BaseButton type="submit" class="bg-red-600 hover:bg-red-700">Delete</BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
+
+<script setup>
+import { use${Name}Mutations } from '@/modules/${name}/queries/use${Name}Mutations'
+import { use${Name}Store } from '@/modules/${name}/stores/${name}Store'
+
+const store = use${Name}Store()
+
+const { remove } = use${Name}Mutations(store.moduleName, {
+  onSuccess() {
+    store.handleToggleModal() // ✅ close modal
+  },
+  onError: (error) => {
+    console.log('Custom error handling', error)
+  },
+})
+
+const handleSubmit = async () => {
+  await remove.mutateAsync(store.item.id)
+}
+</script>
+`;

package/lib/templates/modal-edit.template.js

@@ -0,0 +1,69 @@
+export default ({ name, Name }) => `<template>
+  <BaseModal
+    :isVisible="store.isEditModal"
+    :title="\`Edit \${store.moduleName}\`"
+    :maxWidth="\`\${store.modalWidth}\`"
+    @close="store.handleToggleModal"
+  >
+    <form @submit.prevent="handleSubmit" class="space-y-4">
+      <!-- ${Name} Name -->
+      <div>
+        <BaseLabel for="name">Name</BaseLabel>
+        <BaseInput
+          id="name"
+          v-model="formData.name"
+          placeholder="Eg: Example Name"
+        />
+      </div>
+
+      <!-- Actions -->
+      <div class="flex justify-end gap-2 pt-4">
+        <BaseButton
+          class="bg-yellow-600 hover:bg-yellow-700"
+          type="button"
+          @click="store.handleToggleModal"
+        >Cancel</BaseButton>
+        <BaseButton type="submit">Save</BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { use${Name}Mutations } from '@/modules/${name}/queries/use${Name}Mutations'
+import { use${Name}Store } from '@/modules/${name}/stores/${name}Store'
+
+const store = use${Name}Store()
+
+const formData = ref({
+  name: '',
+  id: '',
+})
+
+// Prefill form when selected item changes
+watch(
+  () => store.item,
+  (newItem) => {
+    if (newItem) {
+      formData.value.name = newItem.name || ''
+      formData.value.id = newItem.id || ''
+    }
+  },
+  { immediate: true }
+)
+
+const { update } = use${Name}Mutations(store.moduleName, {
+  onSuccess() {
+    store.handleToggleModal() // ✅ close modal
+  },
+  onError: (error) => {
+    console.log('Custom error handling', error)
+  },
+})
+
+const handleSubmit = async () => {
+  await update.mutateAsync(formData.value)
+}
+</script>
+`;

package/lib/templates/modal-view.template.js

@@ -0,0 +1,33 @@
+export default ({ name, Name }) => `<template>
+  <BaseModal
+    :isVisible="store.isViewModal"
+    :title="\`View \${store.moduleName} Details\`"
+    :maxWidth="\`\${store.modalWidth}\`"
+    @close="store.handleToggleModal"
+  >
+    <div class="space-y-2">
+      <p class="text-lg">
+        <strong>ID:</strong>
+        {{ store.item.id }}
+      </p>
+      <p class="text-lg">
+        <strong>Name:</strong>
+        {{ store.item.name }}
+      </p>
+      <p class="text-lg">
+        <strong>Created At:</strong>
+        {{ store.item.created_at }}
+      </p>
+      <p class="text-lg">
+        <strong>Updated At:</strong>
+        {{ store.item.updated_at }}
+      </p>
+    </div>
+  </BaseModal>
+</template>
+
+<script setup>
+import { use${Name}Store } from '@/modules/${name}/stores/${name}Store'
+const store = use${Name}Store()
+</script>
+`;

package/lib/templates/mutation.template.js

@@ -0,0 +1,29 @@
+export default ({
+  name,
+  Name,
+}) => `import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { submitData, updateData, deleteItem } from '../services/${name}Service'
+import { toast } from '@/shared/config/toastConfig'
+
+export function use${Name}Mutations(moduleName, options = {}) {
+  const queryClient = useQueryClient()
+
+  const handleSuccess = (data, variables) => {
+    toast.success(\`\${moduleName} operation successful\`)
+    queryClient.invalidateQueries(['${name}s'])
+    options.onSuccess?.(data, variables) // ✅ generic callback
+  }
+
+  const handleError = (error) => {
+    console.error(error)
+    toast.error(\`Request Failed: \${error?.message || 'Unknown error'}\`)
+    options.onError?.(error)
+  }
+
+  const submit = useMutation({ mutationFn: submitData, onSuccess: handleSuccess, onError: handleError })
+  const update = useMutation({ mutationFn: updateData, onSuccess: handleSuccess, onError: handleError })
+  const remove = useMutation({ mutationFn: deleteItem, onSuccess: handleSuccess, onError: handleError })
+
+  return { submit, update, remove }
+}
+`;

package/lib/templates/page.template.js

@@ -0,0 +1,61 @@
+export default ({ name, Name }) => `<template>
+  <div class="min-h-screen bg-gray-50">
+    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <PageTitle>{{ store.moduleName }} List</PageTitle>
+      <BaseButton @click="store.handleToggleModal('add')">
+        Add {{ store.moduleName }}
+      </BaseButton>
+    </div>
+
+    <div class="rounded-lg bg-white shadow-sm">
+      <BaseTable
+        v-if="!isLoading"
+        :columns="columns"
+        :rows="rows"
+        show-actions
+        @view="onView"
+        @edit="onEdit"
+        @delete="onDelete"
+      />
+
+      <AddModal />
+      <EditModal />
+      <ViewModal />
+      <DeleteModal />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineAsyncComponent } from 'vue'
+import { use${Name}sQuery } from '../queries/use${Name}sQuery'
+import { use${Name}Store } from '../stores/${name}Store'
+
+const ViewModal = defineAsyncComponent(() => import('./components/ViewModal.vue'))
+const AddModal = defineAsyncComponent(() => import('./components/AddModal.vue'))
+const EditModal = defineAsyncComponent(() => import('./components/EditModal.vue'))
+const DeleteModal = defineAsyncComponent(() => import('./components/DeleteModal.vue'))
+
+const store = use${Name}Store()
+const { data, isLoading } = use${Name}sQuery()
+
+const columns = [
+  { key: 'sl', label: 'SL' },
+  { key: 'name', label: '${Name}' },
+  { key: 'created_at', label: 'Created At' },
+  { key: 'updated_at', label: 'Updated At' }
+]
+
+const rows = computed(() => data.value?.data?.data ?? [])
+
+function onView(row) {
+  store.handleToggleModal('view', row)
+}
+function onEdit(row) {
+  store.handleToggleModal('edit', row)
+}
+function onDelete(row) {
+  store.handleToggleModal('delete', row)
+}
+</script>
+`;

package/lib/templates/query.template.js

@@ -0,0 +1,19 @@
+export default ({
+  name,
+  Name,
+}) => `import { useQuery } from '@tanstack/vue-query'
+import { fetchAll } from '../services/${name}Service'
+
+export function use${Name}sQuery(params = {}) {
+  return useQuery({
+    queryKey: ['${name}s', params],
+    queryFn: () => fetchAll(params),
+    staleTime: 5 * 60 * 1000,       // 5 minutes
+    cacheTime: 1000 * 60 * 60,      // 1 hour
+    keepPreviousData: true,
+    meta: {
+      persist: true,                // ✅ persisted
+    },
+  })
+}
+`;

package/lib/templates/routes.template.js

@@ -0,0 +1,21 @@
+export default ({
+  name,
+  Name,
+}) => `import ${Name}Page from './pages/${Name}Page.vue'
+import DashboardLayout from '@/shared/layouts/DashboardLayout.vue'
+
+export default [
+  {
+    path: '/${name}s',
+    component: DashboardLayout,
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        name: '${Name}List',
+        component: ${Name}Page,
+      },
+    ],
+  },
+]
+`;

package/lib/templates/service.template.js

@@ -0,0 +1,43 @@
+export default ({
+  name,
+  Name,
+}) => `import { useApi } from '@/shared/composables/useApi'
+
+const BASE_URL = '/${name}s'
+
+const response = (api) => ({
+  data: api.data.value,
+  error: api.error.value,
+})
+
+export async function fetchAll() {
+  const api = useApi()
+  await api.sendRequest(BASE_URL)
+  return response(api)
+}
+
+export async function submitData(payload) {
+  const api = useApi()
+  await api.sendRequest(BASE_URL, 'POST', payload)
+  if (api.error.value) {
+    throw api.error.value  // 🚨 so useMutation.onError triggers
+  }
+  return api.data.value
+}
+
+export async function updateData(payload) {
+  const api = useApi()
+  await api.sendRequest(\`\${BASE_URL}/\${payload.id}\`, 'POST', payload, {
+    headers: { 'X-HTTP-Method-Override': 'PUT' }
+  })
+  if (api.error.value) throw api.error.value
+  return api.data.value
+}
+
+export async function deleteItem(id) {
+  const api = useApi()
+  await api.sendRequest(\`\${BASE_URL}/\${id}\`, 'DELETE')
+  if (api.error.value) throw api.error.value
+  return api.data.value
+}
+`;

package/lib/templates/store.template.js

@@ -0,0 +1,31 @@
+export default ({ name, Name }) => `import { defineStore } from 'pinia'
+import { useModalHelpers } from '@/shared/composables/useModalHelpers'
+
+export const use${Name}Store = defineStore('${name}', () => {
+  
+  const {
+    item,
+    isModal,
+    isViewModal,
+    isEditModal,
+    isDeleteModal,
+    handleToggleModal,
+    handleReset,
+  } = useModalHelpers()
+
+  const moduleName = '${Name}'
+  const modalWidth = '30vw'
+
+  return {
+    item,
+    isModal,
+    isViewModal,
+    isEditModal,
+    isDeleteModal,
+    moduleName,
+    modalWidth,
+    handleToggleModal,
+    handleReset,
+  }
+})
+`;

package/lib/utils/file.js

@@ -0,0 +1,9 @@
+import fs from 'fs';
+
+export function createDir(dir) {
+  fs.mkdirSync(dir, { recursive: true });
+}
+
+export function createFile(filePath, content) {
+  fs.writeFileSync(filePath, content);
+}

package/lib/utils/string.js

@@ -0,0 +1,3 @@
+export function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "vue-ready-modular",      
+  "version": "1.0.0",
+  "description": "Vue.js module generator",
+  "main": "lib/generator.js",       
+  "bin": {
+    "vue-modular": "./bin/cli.js"   
+  },
+  "type": "module",                 
+  "scripts": {
+    "test": "echo \"No tests yet\""
+  },
+  "keywords": ["vue", "generator", "module", "cli"],
+  "author": "Your Name",
+  "license": "MIT",
+  "dependencies": {        
+    "path": "^0.12.7"
+  }
+}