refactor(server): Use Server API for Products

nuxt.config.ts

@@ -1,4 +1,3 @@
-import { defineNuxtConfig } from 'nuxt'
 import pkg from './package.json'
 
 export default defineNuxtConfig({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt3-primevue-starter",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "scripts": {
     "build": "nuxi build",
@@ -24,25 +24,25 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.27.0",
     "@formkit/nuxt": "next",
-    "@histoire/plugin-nuxt": "^0.11.5",
-    "@histoire/plugin-vue": "^0.11.5",
-    "@iconify-json/carbon": "^1.1.8",
+    "@histoire/plugin-nuxt": "^0.11.6",
+    "@histoire/plugin-vue": "^0.11.6",
+    "@iconify-json/carbon": "^1.1.9",
     "@iconify-json/mdi": "^1.1.34",
     "@iconify-json/prime": "^1.1.4",
     "@iconify-json/twemoji": "^1.1.5",
-    "@nuxt/content": "^2.1.1",
-    "@nuxt/test-utils": "^3.0.0-rc.11",
+    "@nuxt/content": "^2.2.1",
+    "@nuxt/test-utils": "^3.0.0-rc.12",
     "@pinia/nuxt": "^0.4.3",
-    "@sfxcode/nuxt-primevue": "^0.8.2",
-    "@unocss/nuxt": "^0.45.29",
-    "@vitejs/plugin-vue": "^3.1.2",
+    "@sfxcode/nuxt-primevue": "^0.8.3",
+    "@unocss/nuxt": "^0.46.1",
+    "@vitejs/plugin-vue": "^3.2.0",
     "@vitest/ui": "^0.24.3",
-    "@vueuse/nuxt": "^9.3.1",
+    "@vueuse/nuxt": "^9.4.0",
     "c8": "^7.12.0",
-    "eslint": "^8.25.0",
-    "histoire": "^0.11.5",
+    "eslint": "^8.26.0",
+    "histoire": "^0.11.6",
     "jsdom": "^20.0.1",
-    "nuxt": "^3.0.0-rc.11",
+    "nuxt": "^3.0.0-rc.12",
     "pinia": "^2.0.23",
     "sass": "^1.55.0",
     "typescript": "^4.8.3",

pages/prime/datatable.vue

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import { FilterMatchMode } from 'primevue/api'
 import { usePrimeDataTable } from '#imports'
+import { useDataStore } from '@/stores'
 
 const { tableData, filters, dataTableRef, exportCSV } = usePrimeDataTable()
 
@@ -11,16 +12,11 @@ filters.value = {
   inventoryStatus: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
 }
 
-const { data, pending, error, refresh } = await useFetch(
-  '/data/products.json',
-)
-
-watch(data, (newValue) => {
-  tableData.value = newValue.data
-})
+const dataStore = useDataStore()
 
 onMounted(async () => {
-  refresh()
+  await dataStore.initData()
+  tableData.value = dataStore.products
 })
 </script>
 

pages/stores.vue

@@ -26,8 +26,6 @@ onMounted(async () => {
     </h5>
     <span class="text-xs">Example of a Data Store</span>
     <div class="grid grid-cols-2 mt-6 gap-4">
-      <div>Customers</div>
-      <div>{{ dataStore.customers.length }}</div>
       <div>Products</div>
       <div>{{ dataStore.products.length }}</div>
     </div>