Vue 3のスクリプトセットアップを利用してプロジェクトの初期化を簡素化

<template>
  <h1>{{ message }}</h1>
</template>

<script setup>
const message = 'Hello, Vue 3 Script Setup!';
</script>

<script setup>
defineProps({
  title: String,
  count: Number
});
</script>

<script setup>
const emit = defineEmits(['increment']);

function handleClick() {
  emit('increment');
}
</script>

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

const count = ref(0);
</script>

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('コンポーネントがマウントされました');
});
</script>

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);
</script>

<script setup>
import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`Countが${oldVal}から${newVal}に変更されました`);
});
</script>

<template>
  <input ref="inputRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const inputRef = ref(null);

onMounted(() => {
  inputRef.value.focus();
});
</script>

<script setup>
defineProps(['label']);
const emit = defineEmits(['submit']);

function handleSubmit() {
  emit('submit', 'データ送信');
}
</script>

<script setup>
const apiUrl = import.meta.env.VITE_API_URL;
</script>

<script setup>
import { ref, onMounted } from 'vue';

const data = ref(null);

onMounted(async () => {
  const response = await fetch('https://api.example.com/data');
  data.value = await response.json();
});
</script>

<template>
  <p class="text">Hello, styled Vue!</p>
</template>

<style scoped>
.text {
  color: blue;
}
</style>

<script setup lang="ts">
interface Props {
  id: number;
  name: string;
}

defineProps<Props>();
</script>