feat: create types and store

README.md

@@ -1,8 +1,6 @@
 # Nuxt 3 Simple Starter - A simple starter for Nuxt 3
 
-Nuxt 3 frontend template for third-party API integrations.
-
-> "Everything can work!" - BigDaddy
+Nuxt 3 frontend template for third-party API integrations based on JSON-LD.
 
 ## Features
 
@@ -13,7 +11,7 @@ Nuxt 3 frontend template for third-party API integrations.
 - [ ] 🍍 [State & Store Management (Pinia)](https://pinia.vuejs.org/)
 - [ ] 🍍 [Subscribing to the state](https://pinia.vuejs.org/core-concepts/state.html#Subscribing-to-the-state)
 - [x] 🍀 [Vue Composition Collection (Vueuse)](https://vueuse.org/)
-- [ ] 🆎 [Internationalization (i18n)](https://v8.i18n.nuxtjs.org/)
+- [x] 🆎 [Internationalization (i18n)](https://v8.i18n.nuxtjs.org/)
 
 ## Setup
 

nuxt.config.ts

@@ -7,6 +7,7 @@ export default defineNuxtConfig({
     "@nuxtjs/eslint-module",
     "@vueuse/nuxt",
     "@nuxtjs/i18n",
+    "@pinia/nuxt",
   ],
 
   i18n: {

package.json

@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@pinia/nuxt": "^0.5.1",
     "nuxt": "^3.11.1",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"

stores/post.ts

@@ -0,0 +1,16 @@
+import type { Post } from "~/types/post";
+
+export const usePostStore = defineStore("post", () => {
+  const apiOperations = createApiOperation<Post>("/api/posts");
+
+  // Add your custom store properties here
+  // https://pinia.vuejs.org/core-concepts/#Setup-Stores
+
+  return {
+    ...apiOperations,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(usePostStore, import.meta.hot));
+}

types/blameable.ts

@@ -0,0 +1,5 @@
+export interface Blameable {
+  createdBy?: string;
+  updatedBy?: string;
+  deletedBy?: string;
+}

types/collection.ts

@@ -0,0 +1,11 @@
+import type { View } from "~/types/view";
+
+export interface PagedCollection<T> {
+  "@context"?: string;
+  "@type"?: string;
+  "@id"?: string;
+  "hydra:member": T[];
+  "hydra:search"?: object;
+  "hydra:totalItems"?: number;
+  "hydra:view": View;
+}

types/error.ts

@@ -0,0 +1,17 @@
+interface HydraError {
+  "@context"?: string;
+  "@type"?: string;
+  "hydra:title": string;
+  "hydra:description": string;
+  trace?: any;
+}
+
+interface ValidatorError {
+  title?: string;
+  detail?: string;
+}
+
+export interface ErrorResponse extends HydraError, ValidatorError {
+  code?: string;
+  message?: string;
+}

types/item.ts

@@ -0,0 +1,5 @@
+export interface Item {
+  "@context"?: string;
+  "@type"?: string;
+  "@id"?: string;
+}

types/post.ts

@@ -0,0 +1,9 @@
+import type { Item } from "~/types/item";
+import type { Timestampable } from "~/types/timestampable";
+import type { Blameable } from "~/types/blameable";
+
+export interface Post extends Item, Timestampable, Blameable {
+  id?: number;
+  title?: string;
+  content?: string;
+}

types/timestampable.ts

@@ -0,0 +1,4 @@
+export interface Timestampable {
+  createdAt?: string;
+  updatedAt?: string;
+}

types/view.ts

@@ -0,0 +1,7 @@
+export interface View {
+  "@id": string;
+  "hydra:first": string;
+  "hydra:last": string;
+  "hydra:next": string;
+  "hydra:previous": string;
+}

utils/create-api-operation.ts

@@ -0,0 +1,53 @@
+import type { PagedCollection } from "~/types/collection";
+
+export default function createApiOperation<T>(endpoint: string) {
+  function serialize(body: T | object): Record<string, any> {
+    return JSON.parse(JSON.stringify(body));
+  }
+
+  async function collection(params?: object) {
+    return await $fetch<PagedCollection<T>>(`${endpoint}`, {
+      params,
+    });
+  }
+
+  async function item(id: number) {
+    return await $fetch<T>(`${endpoint}/${id}`);
+  }
+
+  async function post(body: T | FormData) {
+    return await $fetch<T>(`${endpoint}`, {
+      method: "POST",
+      body: serialize(body),
+    });
+  }
+
+  async function patch(body: T extends { id: number } ? T : any) {
+    return await $fetch<T>(`${endpoint}/${body.id}`, {
+      method: "PATCH",
+      body: serialize(body),
+    });
+  }
+
+  async function put(body: T extends { id: number } ? T : any) {
+    return await $fetch<T>(`${endpoint}/${body.id}`, {
+      method: "PUT",
+      body: serialize(body),
+    });
+  }
+
+  async function remove(id: number) {
+    return await $fetch<T>(`${endpoint}/${id}`, {
+      method: "DELETE",
+    });
+  }
+
+  return {
+    collection,
+    item,
+    post,
+    patch,
+    put,
+    remove,
+  };
+}