feat: api configuration

.env.example

@@ -0,0 +1,2 @@
+# Proxy API base URL
+PROXY_API_BASE=https://jsonplaceholder.typicode.com

README.md

@@ -1,6 +1,6 @@
 # Nuxt 3 Simple Starter - A simple starter for Nuxt 3
 
-Nuxt 3 frontend template for third-party API integrations based on JSON-LD.
+Nuxt 3 frontend template for third-party API integrations.
 
 ## Features
 

components/AppHeader.vue

@@ -1,7 +1,9 @@
 <template>
   <nav class="fixed top-0 left-0 bg-white z-50 h-20 w-full">
     <div class="container flex items-center h-full justify-between">
-      <img src="~/assets/images/logo-no-background.svg" alt="Logo" />
+      <NuxtLink :to="localePath({ name: 'index' })">
+        <img src="~/assets/images/logo-no-background.svg" alt="Logo" />
+      </NuxtLink>
 
       <a
         href="https://github.com/medusiora/nuxt-starter-template"
@@ -14,6 +16,8 @@
   </nav>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const localePath = useLocalePath();
+</script>
 
 <style scoped></style>

layouts/default.vue

@@ -1,7 +1,9 @@
 <template>
-  <main class="relative min-h-screen">
+  <main class="relative mt-20">
     <AppHeader />
-    <slot></slot>
+    <div class="relative min-h-[calc(100vh-144px)]">
+      <slot></slot>
+    </div>
     <AppFooter />
   </main>
 </template>

nuxt.config.ts

@@ -9,6 +9,14 @@ export default defineNuxtConfig({
     },
   },
 
+  routeRules: {
+    "/api/**": {
+      proxy: {
+        to: `${process.env.PROXY_API_BASE}/**`,
+      },
+    },
+  },
+
   css: ["@/assets/css/main.css"],
 
   modules: [

pages/index.vue

@@ -1,19 +1,30 @@
 <template>
-  <div class="container">
-    <div
-      class="text-center max-w-2xl mx-auto h-screen flex justify-center flex-col"
-    >
-      <h1 class="text-5xl font-bold sm:text-7xl tracking-tight">
-        Nuxt 3 Simple Starter
-      </h1>
-      <p class="mt-6 text-lg tracking-tight">
-        Nuxt 3 frontend template for third-party API integrations based on
-        JSON-LD.
-      </p>
+  <div
+    class="container py-20 text-center max-w-2xl h-[calc(100vh-144px)] flex justify-center flex-col"
+  >
+    <h1 class="text-5xl font-bold sm:text-7xl tracking-tight">
+      Nuxt 3 Simple Starter
+    </h1>
+
+    <p class="mt-6 text-lg tracking-tight">
+      Nuxt 3 frontend template for third-party API integrations.
+    </p>
+
+    <div class="text-center my-8">
+      <NuxtLink :to="localePath({ name: 'posts' })">
+        <button
+          type="button"
+          class="text-white bg-[#050708] hover:bg-[#050708]/90 focus:ring-4 focus:outline-none focus:ring-[#050708]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+        >
+          Get Started
+        </button>
+      </NuxtLink>
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const localePath = useLocalePath();
+</script>
 
 <style scoped></style>

pages/posts.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="container py-20">
+    {{ collection }}
+  </div>
+</template>
+
+<script setup>
+useHead({
+  title: "Demo",
+  description: "Nuxt 3 frontend template for third-party API integrations",
+});
+
+const postStore = usePostStore();
+const filters = ref({
+  orSearch_search: undefined,
+  page: 1,
+  itemsPerPage: 10,
+});
+
+const {
+  data: collection,
+  pending: loading,
+  error,
+  refresh,
+} = await useLazyAsyncData(
+  "/api/posts",
+  () => postStore.collection(filters.value),
+  {
+    watch: [filters],
+  },
+);
+</script>
+
+<style lang="scss" scoped></style>

types/error.ts

@@ -1,17 +1,4 @@
-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 {
+export interface ErrorResponse {
   code?: string;
   message?: string;
 }

types/post.ts

@@ -1,9 +1,8 @@
-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 {
+export interface Post extends Timestampable, Blameable {
   id?: number;
   title?: string;
-  content?: string;
+  body?: string;
 }

utils/create-api-operation.ts

@@ -1,12 +1,10 @@
-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}`, {
+    return await $fetch<T[]>(`${endpoint}`, {
       params,
     });
   }