<script setup lang="ts">
// onBeforeMount(() => {
//   console.log("Component about to mount");
// });

// async onMounted(() => {
//   console.log("Component mounted");
//   const { data, error, loading } = await useFetch(
//     "https://jsonplaceholder.typicode.com/posts"
//   );
// });

// The validate property accepts the route as an argument. You can return a boolean value to
// determine whether or not this is a valid route to be rendered with this page. If you return false, and
// another match can't be found, this will cause a 404 error. You can also directly return an object with
// statusCode/statusMessage to respond immediately with an error (other matches will not be checked).

// definePageMeta({
//   title: "My Page",
// validate: async (route) => {
// Check if the id is made up of digits
// return typeof route.params.id === "string" && /^\d+$/.test(route.params.id);
// return {
//   statusCode:403,
//   statusMessage:"You have not access to this page."
// }
// return false;
// },
// middleware: "auth",
//   pageTransition: {
//     name: "rotate",
//   },
// });

// const isActive = ref(true);
// const hasError = ref(false);
const color = ref("red");

// const classObject = reactive({
//   active: true,
//   "text-danger": false,
// });

// const route = useRoute();
// console.log(route.params.id);
</script>

<template>
  <div>
    <!-- <div v-if="loading">
      <h1>Loading...</h1>
    </div>
    <div v-else>
      <h1>{{ data.title }}</h1>
      <p>{{ data.description }}</p>
    </div> -->
  </div>

  <!-- <NuxtLink to="/" class="btn btn-primary"> Home </NuxtLink>
  <div
    class="static"
    :class="{ active: isActive, 'text-danger': hasError }"
  ></div>
  <div :class="classObject"></div>
  <div class="text">hello</div>
  <p :class="$style.red">This should be red</p> -->
</template>

<style scoped>
.text {
  color: v-bind(color);
}
</style>

<style module>
.red {
  color: red;
}
</style>