Tips

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 { reactive } 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 } = reactive(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>