feat: update README and enhance Vue Query page styling

Author: peterbud

README.md

@@ -5,11 +5,9 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-Nuxt Query is a module for integrating [Vue Query](https://tanstack.com/query/latest/docs/framework/vue/overview) into your Nuxt application, providing a powerful solution for fetching, caching, synchronizing and updating server state.
+Nuxt Query is a module for integrating [Tanstack Query](https://tanstack.com/query/latest/docs/framework/vue/overview) (formerly known as Vue Query) into your Nuxt application, providing a powerful solution for fetching, caching, synchronizing and updating server state.
 
 - [✨  Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/nuxt-query?file=playground%2Fapp.vue) -->
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
 
 ## Features
 
@@ -35,7 +33,7 @@ To configure Nuxt Query, update your `nuxt.config.ts` specifying the options you
 ```typescript
 // nuxt.config.ts
 export default defineNuxtConfig({
-  modules: ['nuxt-query'],
+  modules: ['@peterbud/nuxt-query'],
   nuxtQuery: {
     // Specify which Vue Query composable(s) to auto-import
     autoImports: ['useQuery', 'useMutation'],
@@ -112,6 +110,10 @@ export default defineNuxtPlugin({
 })
 ```
 
+## Nuxt DevTools Integration
+
+Nuxt Query integrates with Nuxt DevTools to provide a dedicated tab for Vue Query, where you can inspect the state of your queries, view their cache, and properties, initiate refetch or remove certain queries and more.
+
 ## Contribution
 
 <details>
@@ -125,7 +127,7 @@ export default defineNuxtPlugin({
   npm run dev:prepare
 
   # Develop with the playground
-  npm run dev
+  npm run dev:client
 
   # Build the playground
   npm run dev:build
@@ -137,6 +139,9 @@ export default defineNuxtPlugin({
   npm run test
   npm run test:watch
 
+  # Build the module
+  npm run build
+
   # Release new version
   npm run release
   ```

client/app/pages/vue-query.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
 import type { Query, QueryCacheNotifyEvent, QueryClient } from '@tanstack/vue-query'
+import 'splitpanes/dist/splitpanes.css'
 
 const searchString = ref('')
 const queries = ref(new Array<Query>())
@@ -117,6 +118,7 @@ function handleRestoreTriggerError(query: Query) {
       <NNavbar
         v-model:search="searchString"
         class="pb2"
+        :style="{ 'border-bottom': '1px solid rgba(128,128,128, 0.8)' }"
       >
         <div class="flex gap-1 text-sm">
           <span op50>{{ queries?.length }} queries in total</span>
@@ -176,7 +178,7 @@ function handleRestoreTriggerError(query: Query) {
                 @click="handleRestoreTriggerError(toRaw(selectedQuery) as Query)"
               />
             </template>
-            <div class="grid grid-cols-[auto_1fr] gap-1 px-2 py-2 b-1 b-solid b-gray-200">
+            <div class="grid grid-cols-[auto_1fr] gap-1 px-2 py-2">
               <div>
                 <strong>Query Key:</strong>
               </div>
@@ -228,7 +230,7 @@ function handleRestoreTriggerError(query: Query) {
             text="Query Details"
             :padding="true"
           >
-            <div class="grid grid-cols-[auto_1fr] gap-1 px-2 py-2 b-1 b-solid b-gray-200">
+            <div class="grid grid-cols-[auto_1fr] gap-1 px-2 py-2">
               <div><strong>Status:</strong></div>
               <div>
                 {{ selectedQuery.state.status }}
@@ -285,3 +287,9 @@ function handleRestoreTriggerError(query: Query) {
     </template>
   </NSplitPane>
 </template>
+
+<style>
+.splitpanes__splitter {
+  border-color: rgba(128,128,128, 0.8);
+}
+</style>

client/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@tanstack/vue-query": "^5.66.0",
+    "splitpanes": "^3.1.8",
     "vue-json-pretty": "^2.4.0"
   }
 }