feat: integrate vue-json-pretty for query data visualization

Author: peterbud

client/app/pages/vue-query.vue

@@ -100,7 +100,7 @@ function selectQuery(query: Query) {
       </NNavbar>
 
       <QueryListItem
-        v-for="item in queries"
+        v-for="item in filteredQueries"
         :key="item.queryHash"
         :item="item as Query"
         @click="selectQuery(item as Query)"
@@ -114,7 +114,7 @@ function selectQuery(query: Query) {
           class="w-full"
         >
           <NSectionBlock
-            icon="carbon-moon"
+            icon="carbon-query"
             text="Query Overview"
             :padding="true"
           >
@@ -140,16 +140,20 @@ function selectQuery(query: Query) {
             </div>
           </NSectionBlock>
           <NSectionBlock
-            icon="carbon-settings"
+            icon="carbon-cube"
             text="Data Explorer"
             :padding="true"
+            :open="false"
           >
-            <NCard>
-              TBD
-            </NCard>
+            <VueJsonPretty
+              :data="selectedQuery.state.data"
+              deep="2"
+              virtual="true"
+              height="150"
+            />
           </NSectionBlock>
           <NSectionBlock
-            icon="carbon-settings"
+            icon="carbon-query-queue"
             text="Query Details"
             :padding="true"
           >

client/app/plugins/vue-json-pretty.ts

@@ -0,0 +1,5 @@
+import VueJsonPretty from 'vue-json-pretty'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('VueJsonPretty', VueJsonPretty)
+})

client/nuxt.config.ts

@@ -9,6 +9,9 @@ export default defineNuxtConfig({
   app: {
     baseURL: '/__nuxt-query-client',
   },
+  css: [
+    'vue-json-pretty/lib/styles.css',
+  ],
   devServer: {
     port: 3300,
   },

client/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "@tanstack/vue-query": "^5.66.0"
+    "@tanstack/vue-query": "^5.66.0",
+    "vue-json-pretty": "^2.4.0"
   }
 }

package.json

@@ -37,9 +37,9 @@
     "@nuxt/devtools-kit": "^2.0.0",
     "@nuxt/devtools-ui-kit": "^2.0.0",
     "@nuxt/kit": "^3.15.4",
+    "@tanstack/vue-query": "^5.66.0",
     "defu": "^6.1.4",
-    "sirv": "^3.0.1",
-    "@tanstack/vue-query": "^5.66.0"
+    "sirv": "^3.0.1"
   },
   "devDependencies": {
     "@nuxt/devtools": "^2.0.0",