Tips
Using enums as prop types
js
import { toRefs } from "vue";
enum ButtonSize {
Small = 'sm',
Medium = 'md',
Large = 'lg',
};
interface Props {
primary?: boolean;
size?: ButtonSize;
}
const props = withDefaults(defineProps<Props>(), {
primary: false,
size: ButtonSize.Medium,
});
const { primary, size } = toRefs(props);
// when using it
<ButtonComp :size="ButtonSize.Medium"> Button </ButtonComp>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Destructuring with assignment
js
const person = { fullName: "David" };
const { fullName: name } = person;
console.log(name); // => David
1
2
3
4
5
2
3
4
5
Import and re-export a default export in a single line
js
// utilities/index.js
export { default as dates } from "./dates";
// in another file
import { dates } from "<some-path>/utilities";
1
2
3
4
5
2
3
4
5
Vue script setup prop typing with default values and complex types
vue
<script setup lang="ts">
import { toRefs } from "vue";
type Size = "sm" | "md" | "lg";
interface Props {
primary?: boolean;
size?: Size;
}
const props = withDefaults(defineProps<Props>(), {
primary: false,
size: "md",
});
const { primary, size } = toRefs(props);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Vue options API prop typing
vue
<script lang="ts">
import { defineComponent, PropType } from "vue";
export default defineComponent({
name: "MyComponent",
props: {
type: String as PropType<string>, // cast to typescript type,
default: "box",
},
});
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11