Ivancic Josip

Tips

Using enums as prop types 

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>

Destructuring with assignment 

const person = { fullName: "David" };

const { fullName: name } = person;

console.log(name); // => David

Import and re-export a default export in a single line 

// utilities/index.js
export { default as dates } from "./dates";

// in another file
import { dates } from "<some-path>/utilities";

Vue script setup prop typing with default values and complex types 

<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>

Vue options API prop typing 

<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>