80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<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>
|