0
# Built-in Component Support
1

2
SSR-specific handling for Vue's built-in components including Teleport, Suspense, Transition, and TransitionGroup during server-side rendering.
3

4
## Capabilities
5

6
### Teleport Processing
7

8
Handles Vue teleport component during SSR transformation, managing teleport target handling and content rendering.
9

10
```typescript { .api }
11
/**
12
 * Process teleport nodes during SSR transformation
13
 * @param node - Teleport node to process
14
 * @param context - SSR transform context
15
 */
16
function ssrProcessTeleport(
17
  node: TeleportNode,
18
  context: SSRTransformContext
19
): void;
20
```
21

22
**Key Features:**
23
- Validates required 'to' prop for teleport target
24
- Handles teleport content rendering in SSR context
25
- Manages teleport target resolution during compilation
26
- Generates appropriate error messages for invalid teleport usage
27

28
**Usage Notes:**
29
- Teleport components require a valid 'to' prop
30
- Missing 'to' prop triggers `X_SSR_NO_TELEPORT_TARGET` error
31
- Teleport content is rendered inline during SSR
32

33
### Suspense Processing
34

35
Handles Vue suspense component during SSR transformation, managing async component rendering and fallback content.
36

37
```typescript { .api }
38
/**
39
 * Process suspense nodes during SSR transformation
40
 * @param node - Suspense node to process
41
 * @param context - SSR transform context
42
 */
43
function ssrProcessSuspense(
44
  node: SuspenseNode,
45
  context: SSRTransformContext
46
): void;
47

48
/**
49
 * Transform suspense nodes for SSR rendering
50
 * @param node - Component node representing suspense
51
 * @param context - Transform context
52
 */
53
function ssrTransformSuspense(
54
  node: ComponentNode,
55
  context: TransformContext
56
): void;
57
```
58

59
**Key Features:**
60
- Handles async component resolution during SSR
61
- Manages fallback content rendering
62
- Processes suspense boundaries for server-side rendering
63
- Generates code for suspense component lifecycle
64

65
**Usage Notes:**
66
- Suspense components render synchronously during SSR
67
- Fallback content may be used during initial server rendering
68
- Async components are resolved before generating final HTML
69

70
### Transition Processing
71

72
Handles Vue transition and transition-group components during SSR transformation.
73

74
```typescript { .api }
75
/**
76
 * Transform transition nodes for SSR rendering
77
 * @param node - Component node representing transition
78
 * @param context - Transform context
79
 */
80
function ssrTransformTransition(
81
  node: ComponentNode,
82
  context: TransformContext
83
): void;
84

85
/**
86
 * Transform transition-group nodes for SSR rendering
87
 * @param node - Component node representing transition-group
88
 * @param context - Transform context
89
 */
90
function ssrTransformTransitionGroup(
91
  node: ComponentNode,
92
  context: TransformContext
93
): void;
94
```
95

96
**Key Features:**
97
- Processes transition components for SSR compatibility
98
- Handles transition-group list transitions
99
- Manages transition props and lifecycle hooks
100
- Generates appropriate SSR-compatible output
101

102
**Usage Notes:**
103
- Transition animations are not active during SSR
104
- Transition components render their content directly
105
- CSS classes and styles are preserved for client-side hydration
106

107
## Built-in Component Types
108

109
```typescript { .api }
110
interface TeleportNode {
111
  type: NodeTypes.ELEMENT;
112
  tagType: ElementTypes.COMPONENT;
113
  tag: 'Teleport' | 'teleport';
114
  props: (AttributeNode | DirectiveNode)[];
115
  children: TemplateChildNode[];
116
  loc: SourceLocation;
117
}
118

119
interface SuspenseNode {
120
  type: NodeTypes.ELEMENT;
121
  tagType: ElementTypes.COMPONENT;
122
  tag: 'Suspense' | 'suspense';
123
  props: (AttributeNode | DirectiveNode)[];
124
  children: TemplateChildNode[];
125
  loc: SourceLocation;
126
}
127

128
interface TransitionNode {
129
  type: NodeTypes.ELEMENT;
130
  tagType: ElementTypes.COMPONENT;
131
  tag: 'Transition' | 'transition' | 'TransitionGroup' | 'transition-group';
132
  props: (AttributeNode | DirectiveNode)[];
133
  children: TemplateChildNode[];
134
  loc: SourceLocation;
135
}
136
```
137

138
## Error Handling
139

140
Built-in component processing includes specific error handling for common issues:
141

142
- **Teleport without target**: `X_SSR_NO_TELEPORT_TARGET` error when teleport lacks 'to' prop
143
- **Invalid component structure**: `X_SSR_INVALID_AST_NODE` error for malformed built-in components
144
- **Unsupported features**: Graceful handling of client-only features during SSR
145

146
## Usage Examples
147

148
### Teleport Component
149

150
```typescript
151
// Template with teleport
152
const template = `
153
  <div>
154
    <Teleport to="#modal">
155
      <div class="modal">Modal content</div>
156
    </Teleport>
157
  </div>
158
`;
159

160
// Compilation handles teleport processing
161
const result = compile(template);
162
// Generates code that renders teleport content inline during SSR
163
```
164

165
### Suspense Component
166

167
```typescript
168
// Template with suspense
169
const template = `
170
  <Suspense>
171
    <template #default>
172
      <AsyncComponent />
173
    </template>
174
    <template #fallback>
175
      <div>Loading...</div>
176
    </template>
177
  </Suspense>
178
`;
179

180
// Compilation processes suspense boundaries
181
const result = compile(template);
182
// Generates code that handles async components during SSR
183
```
184

185
### Transition Components
186

187
```typescript
188
// Template with transitions
189
const template = `
190
  <TransitionGroup name="list" tag="ul">
191
    <li v-for="item in items" :key="item.id">
192
      {{ item.name }}
193
    </li>
194
  </TransitionGroup>
195
`;
196

197
// Compilation preserves structure for SSR
198
const result = compile(template);
199
// Generates code that renders list without transition effects
200
```