Skip to content

Commit 6966118

Browse files
author
Ronnie Villarini
committed
add vue-3 specific doc, add setup syntactic templating sugar.
1 parent d3ce5ae commit 6966118

File tree

1 file changed

+32
-0
lines changed

1 file changed

+32
-0
lines changed

vue-3.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# This document is for Vue-3 _specific_ syntax
2+
3+
### Setup Template Attribute Syntax
4+
5+
⚠️ This feature is still a WIP, and is an active RFC. [Follow the conversation](https://github.com/vuejs/rfcs/pull/182) to stay up to date with the lifecycle.
6+
7+
This provides a better DX when using the setup function in Vue SFCs.
8+
Type inference still works, and you don't need to use `defineComponent`..
9+
It's important to note that this is just **syntactic sugar**, and still get's compiled down to a component
10+
using `defineComponent` and the `setup` function.
11+
12+
```vue
13+
<script setup lang="ts">
14+
import { ref } from 'vue';
15+
16+
export const welcome = ref('Welcome to Vue 3 with TS!');
17+
</script>
18+
```
19+
20+
`props` and the `context` object work as well.
21+
For TS inference, declare them using TS syntax.
22+
23+
```vue
24+
<script setup="props, ctx" lang="ts">
25+
import { computed } from 'vue'
26+
27+
declare const props: {
28+
name: string
29+
}
30+
31+
export const welcome = computed(() => `Welcome, ${props.name}!`)
32+
```

0 commit comments

Comments
 (0)