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