Vueのサンプル

簡単なVueのサンプルになります。

公式ドキュメントにも似たようなシンプルなサンプルが沢山転がっています

App.vue

<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <p>カウント: {{ count }}</p>
    <button @click="increment">カウントを増やす</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const title = 'Vue 3 カウンターサンプル'
const count = ref(0)

const increment = () => {
  count.value++
}
</script>

<style scoped>
.container {
  text-align: center;
  margin-top: 100px;
  font-family: Arial, sans-serif;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

データのリクエストサンプル

api.js

// api.js
import axios from 'axios';

// ベースURLを設定（.envなどで管理するのがベスト）
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://example.com/api';

// axiosインスタンスの作成
const apiClient = axios.create({
  baseURL: API_BASE_URL,
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// GETリクエストの例
export const fetchData = async (endpoint) => {
  try {
    const response = await apiClient.get(endpoint);
    return response.data;
  } catch (error) {
    console.error('API取得エラー:', error);
    throw error;
  }
};

// POSTリクエストの例
export const postData = async (endpoint, payload) => {
  try {
    const response = await apiClient.post(endpoint, payload);
    return response.data;
  } catch (error) {
    console.error('API送信エラー:', error);
    throw error;
  }
};