Noob questions - passing props, using svelte

[Madd0g]

Hi, total beginner here.

I tried svelte:

The docs say, for optimal bundle size, if you have less than 3 components on the page, use svelte.

But it also says on the hydration page that you must use client:none with svelte components ("Necessary when embedding Preact, SolidJS, or Svelte components in Vue or MDX files")

Then it is impossible to use interactive svelte components? only components that return HTML? then why the comment about bundle size? does the comment refer to a server-side bundle size?

I tried vue:

From page.mdx, I tried calling a component from src/components/Compo.vue

Compo.vue:

<script setup lang="ts">
defineProps<{
  msg: String
}>()
</script>

<template>
    <h1>Whatever: {{msg}}</h1>
</template>

page.mdx:

---
title: My title
---

### My page

This results in parse error:
<Compo :msg="title" />

This results in warning about missing prop `msg`:
<Compo v-bind:msg="title" />

Is there a right way of passing props to vue components from an mdx page?

thanks!

[ElMassimo]

@Madd0g Hi there!

The docs say, for optimal bundle size, if you have less than 3 components on the page, use svelte.

The docs are just citing the benchmark there. I emphasize that the right choice depends on the situation.

Necessary when embedding Preact, SolidJS, or Svelte components

I phrased it ambiguously. The full sentence should be "necessary if you are not using one of the other hydration directives.

I've corrected the docs to prevent confusion around this. You can use all hydration directives with all frameworks.

Thanks! 😃

Is there a right way of passing props to vue components from an mdx page?

Yes, use the standard MDX syntax, which is based around JSX. You can find examples in the Markdown section:

<Compo msg={title}/>

[Madd0g]

oh man, I rushed through the docs and missed that point about passing props to vue.

great, got both things working, will keep tinkering.

thank you. very interesting project!