Vinxi + Svelte React , full-Stack API連携

### API 連携 + Svelte

• API 連携 Svelteに、なります。

---

### 書いたコード

• https://github.com/kuc-arc-f/vinxi_4ex/tree/main/svelte_app

---

• dev-start

npm run dev

---

### 関連

• https://vinxi.vercel.app/api/server/request.html

---

• front
• svelte_app/app/client/Test1.svelte

<script lang="ts">

const testProc = async function(){
    try{
      const response = await fetch(`/api/test1?id=2`);
      if (!response.ok) throw new Error("error, /api/test1");
      const data = await response.json();
      console.log(data);

      const postData = {id: 1, name: "name-post222"}
      const resPost = await fetch(`/api/test2`,
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(postData),
        }
      );
      if (!resPost.ok) throw new Error("error, /api/hello");
      const dataPost = await resPost.json();
      console.log(dataPost);
    }catch(e){console.error(e)}
 }

</script>

<div>
  <h1 class="text-3xl font-bold">Test1</h1>
  <hr class="my-2" />
  <button on:click={testProc}>[ Test ]</button>
</div>

<style>
</style>

---

• api.ts : reactと、同様です。 POST GET通信
• svelte_app/app/api.ts

https://github.com/kuc-arc-f/vinxi_4ex/blob/main/svelte_app/app/api.ts

---

### Vue + Vinxi

• Vue + Vinxi構成に、なります。

---

### 書いたコード

• https://github.com/kuc-arc-f/vinxi_4ex/tree/main/vue

---

• dev-start

npm run dev

---

• package.json

{
  "name": "example-vue",
  "type": "module",
  "private": true,
  "version": null,
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build --preset vercel-edge",
    "build:local": "vinxi build",
    "start": "vinxi start --preset vercel-edge",
    "start:local": "vinxi start"
  },
  "dependencies": {
    "@picocss/pico": "^1.5.10",
    "autoprefixer": "^10.4.15",
    "tailwindcss": "^3.3.3",
    "vinxi": "0.5.3",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/tsconfig": "^0.7.0",
    "typescript": "~5.7.2",
    "vite": "^6.1.0",
    "vue-tsc": "^2.2.0"
  }
}

---

• vue/app/App.vue

https://github.com/kuc-arc-f/vinxi_4ex/blob/main/vue/app/App.vue

---

### API 連携 + Vue Vinxi

• API 連携 Vue + Vinxi構成に、なります。

---

### 書いたコード

• https://github.com/kuc-arc-f/vinxi_4ex/tree/main/vue_app

---

• dev-start

npm run dev

---

• vue_app/app/api.ts

https://github.com/kuc-arc-f/vinxi_4ex/blob/main/vue_app/app/api.ts

---

• front , GET , POST 通信
• vue_app/app/client/Test1.vue

https://github.com/kuc-arc-f/vinxi_4ex/blob/main/vue_app/app/client/Test1.vue

---