<script setup lang="ts">
// 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);

// defineEmits(['update:modelValue'])
</script>

<template>
  <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>