I have a Vue 3 app. This app relies on Vite, Vue Router, Pinia. The specific versions are:
This app has a single file component that represents a "page". This single file component is defined like this:
page.vue
<template>
<div>
Hello! Thank you for visiting {{ id }}!
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import { useStore } from '../stores/store';
const myStore = useStore();
onMounted(() => {
const props = defineProps({ id:Number });
console.log(props);
});
</script>
My goal is such that when someone visits https://[my-site].com/pages/{some-id}, I get the id passed in via the URL. Currently, my route is defined like this:
{
path: '/pages/:id',
name: 'page',
component: () => import('../views/page.vue'),
props: true
}
From my understanding, since id is a parameter on my route, I can use the [defineProps][1] method. While the single file component loads, I do not see the id. In addition, when I look in the console log, I see the following:
Uncaught (in promise) ReferenceError: defineProps is not defined
I don't understand why I'm getting this error. Other questions I've seen mention changing ESLINT. However, I'm not using ESLINT in my app. I am using Vite. How do I fix this error?
defineProps is a compiler macro for use in <script setup>. The macro gets compiled away, and cannot be inside a lifecycle hook, as you observed with onMounted(). In addition, it doesn't make sense to define props inside onMounted() because the props need to exist before the component mounts.
Props must be declared at the top level of the <script setup> context:
<script setup>
import { onMounted } from 'vue';
import { useStore } from '../stores/store';
const myStore = useStore();
const props = defineProps({ id:Number }); // ✅
onMounted(() => {
// const props = defineProps({ id:Number }); // ❌ move to top level
console.log(props);
});
</script>