title: Vue.js - ReferenceError: defineProps is not defined
body: <p>I have a Vue 3 app. This app relies on Vite, Vue Router, Pinia. The specific versions are:</p>
  <ul>
  <li>Vue: 3.2.31</li>
  <li>Vue Router: 4.0.13</li>
  <li>Pinia: 2.0.11</li>
  </ul>
  <p>This app has a single file component that represents a &quot;page&quot;. This single file component is defined like this:</p>
  <p><strong>page.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      Hello! Thank you for visiting {{ id }}!
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script setup&gt;
      import { onMounted } from 'vue';
      import { useStore } from '../stores/store';
  
      const myStore = useStore();
  
      onMounted(() =&gt; {
          const props = defineProps({ id:Number });    
          console.log(props);
      });
  &lt;/script&gt;
  </code></pre>
  <p>My goal is such that when someone visits <code>https://[my-site].com/pages/{some-id}</code>, I get the <code>id</code> passed in via the URL. Currently, my route is defined like this:</p>
  <pre><code>{
    path: '/pages/:id',
    name: 'page',
    component: () =&gt; import('../views/page.vue'),
    props: true
  }
  </code></pre>
  <p>From my understanding, since <code>id</code> is a parameter on my route, I can use the <code>[defineProps][1]</code> method. While the single file component loads, I do not see the <code>id</code>. In addition, when I look in the console log, I see the following:</p>
  <p><em>Uncaught (in promise) ReferenceError: defineProps is not defined</em></p>
  <p>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?</p>