Vue with TSX - the perfect duo!?

import vueJsx from @vitejsplugin-vue-jsx; export default slotOne: () => div>Slot Onediv>, slotTwo: () => div>Slot Two

Vue with TSX - the perfect duo!? It's not only verbose, but we're duplicating slot>slot> for every heading level JSX with Vue, getting us back to a syntax that's closer to

import vueJsx from @vitejsplugin-vue-jsx; export default slotOne: () => div>Slot Onediv>, slotTwo: () => div>Slot Two

vue slot name Returns the name of the shadow DOM slot attached to the element CSS pseudo-elements Pseudo-elements relating specifically to slots: ::slotted

Vue v-slot We need the v-slot directive to refer to named slots Named slots allow for more control over where the content is placed within the child

vue default slot Slots & scoped slots React alternative: JSX props or render props If you render a template inside between a component's opening and closing

Installation Install the preset with: npm install @vuebabel-preset-jsx @vuebabel-helper-vue-jsx-merge-props slot=footer>footerfooter>