Added prime vue support in formkit project.

app/package.json

@@ -22,6 +22,7 @@
     "material-design-icons": "^3.0.1",
     "pinia": "^2.1.3",
     "pinia-plugin-persistedstate": "^3.1.0",
+    "primevue": "^3.31.0",
     "readline-sync": "^1.4.10",
     "register-service-worker": "^1.6.2",
     "sass": "^1.54.4",

app/src/main.js

@@ -16,7 +16,10 @@ import VueClipboard from 'vue3-clipboard'
 const piniaStore = createPinia()
 const isProduction = process.env.NODE_ENV === 'production'
 piniaStore.use(piniaPluginPersistedstate)
+import primeVue from 'primevue/config'
 
+import '../node_modules/primevue/resources/themes/lara-light-blue/theme.css'
+import '../node_modules/primevue/resources/primevue.min.css'
 var vm = createApp({
   render: () => h(App),
 })
@@ -24,6 +27,8 @@ window.app = vm
 vm.use(piniaStore)
 vm.$router = router
 vm.use(i18n)
+vm.use(primeVue)
+
 vm.use(router)
 vm.use(plugin, defaultConfig(formKitConfig))
 vm.use(defaultConfig)

app/src/router.js

@@ -59,6 +59,12 @@ export default createRouter({
       component: loadView("Home"),
       meta: { title: "Home", lang: "en", icon: "mdi mdi-home-outline" },
     },
+    {
+      path: "/primeVueComponent",
+      name: "PrimeVueTable",
+      component: loadView("PrimeVueTable"),
+      meta: { title: "PrimeVueTable", lang: "en", icon: "mdi mdi-home-outline" },
+    },
     {
       path: "/formkitcomposition",
       name: "FormKitComposition",

app/src/views/Home.vue

@@ -7,6 +7,15 @@
         LIST OF CORE FUNCTIONALITIES
   </p>
   <div class="grid grid-cols-3 gap-4">
+    <div class="card flex flex-row items-center justify-between" @click="$router.push({name: 'PrimeVueTable'})">
+      <div class="flex flex-row items-center">
+        <i class="isax isax-bold-stickynote me-2"></i>
+        <div class="card-title">
+          Prime Vue Table
+        </div>
+      </div>
+      <i class="isax isax-bold-arrow-right"></i>
+    </div>
     <div class="card flex flex-row items-center justify-between" @click="$router.push({name: 'TOTP'})">
       <div class="flex flex-row items-center">
         <i class="isax isax-bold-timer me-2"></i>

app/src/views/PrimeVueTable.vue

+<template>
+	<div id="mTable" class="container-fluid">
+		<div class="row justify-content-center">
+			<div class="col-4">
+				<div class="box-login">
+					<div class="p-card p-component">
+						<h3 class="mb-4">
+							{{ msg }}
+						</h3>
+						<DataTable :id="idTable" :value="itemList" responsiveLayout="scroll">
+							<Column field="id" header="id"></Column>
+							<Column field="age" header="age"></Column>
+						</DataTable>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import MQL from "@/plugins/mql.js"
+	import DataTable from "primevue/datatable"
+	import Column from "primevue/column"
+
+	export default {
+		name: "MTable",
+		data() {
+			return {
+				itemList: [],
+			}
+		},
+		components: {
+			DataTable,
+			Column,
+		},
+		mounted() {
+			this.getActivityData()
+		},
+		methods: {
+			// call for activity specific mql
+			getActivityData() {
+				new MQL()
+					.setActivity("o.[query_1el1NAwh6nMeZl1PhbzhP1TyQLf]")
+					.setData({})
+					.fetch("")
+					.then((rs) => {
+						let res = rs.getActivity("query_1el1NAwh6nMeZl1PhbzhP1TyQLf", true)
+						if (rs.isValid("query_1el1NAwh6nMeZl1PhbzhP1TyQLf")) {
+							// Write some intelligent logic here
+							console.log("Data Received:  ", res)
+							console.log(res)
+							this.itemList = res
+						} else {
+							rs.showErrorToast("query_1el1NAwh6nMeZl1PhbzhP1TyQLf")
+						}
+					})
+			},
+		},
+	}
+</script>