1---
2title: defineProps Cannot Access Variables from script setup
3impact: MEDIUM
4impactDescription: Variables declared in script setup are not accessible inside defineProps arguments
5type: gotcha
6tags: [vue3, props, script-setup, defineProps, compiler]
7---
8 
9# defineProps Cannot Access Variables from script setup
10 
11**Impact: MEDIUM** - Code inside the `defineProps()` argument cannot access other variables declared in `<script setup>`. The entire expression is moved to an outer function scope when compiled, making local variables inaccessible.
12 
13This commonly surprises developers trying to use imported constants or computed validation logic.
14 
15## Task Checklist
16 
17- [ ] Define validation constants outside `<script setup>` or in a separate file
18- [ ] Import constants before using them in defineProps
19- [ ] Use external type definitions for TypeScript props
20- [ ] For dynamic validation, use watchers instead of prop validators
21 
22**Incorrect:**
23```vue
24<script setup>
25import { ref } from 'vue'
26 
27// These are in <script setup> scope
28const VALID_SIZES = ['sm', 'md', 'lg']
29const maxLength = ref(100)
30 
31defineProps({
32  size: {
33    type: String,
34    // WRONG: VALID_SIZES is not accessible here
35    validator: (v) => VALID_SIZES.includes(v)  // ReferenceError!
36  },
37  name: {
38    type: String,
39    // WRONG: Cannot access refs
40    validator: (v) => v.length <= maxLength.value  // ReferenceError!
41  }
42})
43</script>
44```
45 
46**Correct:**
47```vue
48<script>
49// Define constants in regular <script> block (module scope)
50export const VALID_SIZES = ['sm', 'md', 'lg']
51export const MAX_LENGTH = 100
52</script>
53 
54<script setup>
55// Now accessible in defineProps
56defineProps({
57  size: {
58    type: String,
59    validator: (v) => VALID_SIZES.includes(v)  // Works!
60  },
61  name: {
62    type: String,
63    validator: (v) => v.length <= MAX_LENGTH  // Works!
64  }
65})
66</script>
67```
68 
69## Pattern: Import from External File
70 
71```javascript
72// validation.js
73export const VALID_SIZES = ['sm', 'md', 'lg']
74export const VALID_COLORS = ['red', 'blue', 'green']
75export const sizeValidator = (v) => VALID_SIZES.includes(v)
76```
77 
78```vue
79<script setup>
80import { VALID_SIZES, VALID_COLORS, sizeValidator } from './validation'
81 
82// Imported values ARE accessible
83defineProps({
84  size: {
85    type: String,
86    validator: sizeValidator
87  },
88  color: {
89    type: String,
90    validator: (v) => VALID_COLORS.includes(v)
91  }
92})
93</script>
94```
95 
96## Pattern: Dual Script Blocks
97 
98```vue
99<script>
100// Regular script for module-level declarations
101const options = {
102  themes: ['light', 'dark', 'system'],
103  defaults: {
104    theme: 'light',
105    size: 'md'
106  }
107}
108</script>
109 
110<script setup>
111// options is accessible here
112const props = defineProps({
113  theme: {
114    type: String,
115    default: options.defaults.theme,
116    validator: (v) => options.themes.includes(v)
117  }
118})
119</script>
120```
121 
122## TypeScript: External Type Definitions
123 
124```typescript
125// types.ts
126export interface UserProps {
127  name: string
128  email: string
129  age?: number
130}
131```
132 
133```vue
134<script setup lang="ts">
135import type { UserProps } from './types'
136 
137// Type imports work fine
138const props = defineProps<UserProps>()
139</script>
140```
141 
142## Why This Happens
143 
144Vue's compiler transforms `<script setup>` code. The `defineProps()` call is extracted and moved to component options at compile time, before the setup function runs:
145 
146```javascript
147// Your code:
148const MY_CONST = 'value'
149defineProps({ prop: { default: MY_CONST } })
150 
151// Compiled (simplified):
152export default {
153  props: { prop: { default: MY_CONST } },  // MY_CONST doesn't exist here!
154  setup() {
155    const MY_CONST = 'value'  // Defined too late
156  }
157}
158```
159 
160## Reference
161- [Vue.js Script Setup - defineProps](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)
162