Skip to content

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

Destructuring with assignment

js
const person = { fullName: "David" };

const { fullName: name } = person;

console.log(name); // => David
1
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

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

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