1---
2title: SFC Script Block Must Use Default Export Only
3impact: HIGH
4impactDescription: Named exports in SFC script blocks will fail silently or cause build errors - Vue expects exactly one default export
5type: gotcha
6tags: [vue3, sfc, export, script-block, composition-api]
7---
8 
9# SFC Script Block Must Use Default Export Only
10 
11**Impact: HIGH** - Vue Single-File Components expect exactly one default export from the `<script>` block. Using named exports for your component will cause build failures or runtime errors because Vue's tooling is designed to process a single default-exported component definition per `.vue` file.
12 
13## Task Checklist
14 
15- [ ] Always use `export default` in `<script>` blocks (Options API)
16- [ ] Use `<script setup>` which handles exports automatically (Composition API)
17- [ ] Move shared utilities to separate `.js`/`.ts` files, not the component's script block
18- [ ] If you need to export types, use a separate `<script>` block alongside `<script setup>`
19 
20**Problematic Code:**
21```vue
22<!-- MyComponent.vue -->
23<script>
24// BAD: Named exports don't work for the component itself
25export const MyComponent = {
26  data() {
27    return { count: 0 }
28  }
29}
30 
31// BAD: Exporting multiple things from component script
32export const CONSTANT = 42
33export function helper() { }
34</script>
35 
36<template>
37  <div>{{ count }}</div>
38</template>
39```
40 
41**Correct Code:**
42```vue
43<!-- MyComponent.vue - Options API -->
44<script>
45// GOOD: Single default export
46export default {
47  data() {
48    return { count: 0 }
49  }
50}
51</script>
52 
53<template>
54  <div>{{ count }}</div>
55</template>
56```
57 
58```vue
59<!-- MyComponent.vue - Composition API with script setup -->
60<script setup>
61// GOOD: No export needed, component is auto-exported
62import { ref } from 'vue'
63 
64const count = ref(0)
65</script>
66 
67<template>
68  <div>{{ count }}</div>
69</template>
70```
71 
72## Exporting Types Alongside Script Setup
73 
74For TypeScript, use a separate regular script block for type exports:
75 
76```vue
77<script lang="ts">
78// Regular script block for exports
79export interface User {
80  id: number
81  name: string
82}
83 
84export type Status = 'pending' | 'active' | 'inactive'
85</script>
86 
87<script setup lang="ts">
88// Setup script for component logic
89import { ref } from 'vue'
90 
91const users = ref<User[]>([])
92</script>
93 
94<template>
95  <ul>
96    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
97  </ul>
98</template>
99```
100 
101## Sharing Utilities Across Components
102 
103Don't put shared code in component script blocks. Create separate files:
104 
105```typescript
106// utils/constants.ts
107export const ITEMS_PER_PAGE = 20
108export const API_BASE_URL = '/api/v1'
109 
110// utils/helpers.ts
111export function formatDate(date: Date): string {
112  return date.toLocaleDateString()
113}
114 
115export function formatCurrency(amount: number): string {
116  return `$${amount.toFixed(2)}`
117}
118```
119 
120```vue
121<!-- ProductList.vue -->
122<script setup>
123// GOOD: Import shared utilities from external files
124import { ITEMS_PER_PAGE } from '@/utils/constants'
125import { formatCurrency } from '@/utils/helpers'
126import { ref } from 'vue'
127 
128const products = ref([])
129</script>
130```
131 
132## Why This Restriction Exists
133 
134Vue's SFC compiler and build tools expect:
135 
1361. **One component per file**: The `.vue` file format is designed for single-component definitions
1372. **Predictable structure**: Tools like Volar, vue-tsc, and bundler plugins assume default export
1383. **Hot Module Replacement**: HMR relies on the single-component-per-file convention
139 
140```javascript
141// How Vue tooling processes SFCs internally
142import MyComponent from './MyComponent.vue'
143// ^ Always expects the default export to be the component
144```
145 
146## Common Mistake: Reusing Code via SFC Exports
147 
148```vue
149<!-- BAD PATTERN: Trying to reuse code from components -->
150<script>
151// This won't work as expected
152export const sharedLogic = () => { ... }
153 
154export default {
155  // component definition
156}
157</script>
158```
159 
160Instead, use composables:
161 
162```typescript
163// composables/useSharedLogic.ts
164export function useSharedLogic() {
165  // Shared reactive logic
166  const state = ref(0)
167  const increment = () => state.value++
168 
169  return { state, increment }
170}
171```
172 
173```vue
174<!-- ComponentA.vue -->
175<script setup>
176import { useSharedLogic } from '@/composables/useSharedLogic'
177 
178const { state, increment } = useSharedLogic()
179</script>
180```
181 
182## Reference
183- [Vue.js SFC Specification](https://vuejs.org/api/sfc-spec.html)
184- [Vue.js Composition API - Composables](https://vuejs.org/guide/reusability/composables.html)
185