SFC Custom blocks

[InvisibleGit]

Hi all,

SFC Custom blocks feature is probably on the more advanced scale of using vue. For example if we want to customize SFC for our particular need we might want to add additional blocks to make DX nicer.

Yet the documentation and examples found online are years old and don't seem to be of much use. For example the docs in the guide mention 3 projects which use custom blocks, where 2 are abandoned (Gridsome and vite-plugin-vue-gql), and the third one (i18n) was rewritten in unimport.js.

Even if we persue i18n as example of how it's implemented we hit a wall...

First inside Vue Guide -> Tooling -> SFC Custom Block Integrations (https://vuejs.org/guide/scaling-up/tooling.html#sfc-custom-block-integrations) we have a hint of how to awkwardly sets i18n data on a component (https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#example-for-transforming-custom-blocks) and use it outside of the SFC component with Demo.i18n.*. We're left clueless how to use custom block inside the same SFC file where it's defined...

At least we're pushed in the right direction to get to vite-plugin-vue repo. We find CustomBlock.vue and CustomBlockPlugin.vue under vite-plugin-vue/playground/vue/. Again CustomBlockPlugin.ts hosits the data to Comp.i18n and then CustomBlock.ts defines useI18n method which uses contraversial getCurrentInstance() to get the data and use it inside the component.

The crux of the problem is how vite-plugin-vue compiles the custom blocks in the function genCustomBlockCode() in vitejs/vite-plugin-vue/packages/plugin-vue/src/main.ts. It runs the custom block code with _sfc_main as a parameter. This is how above mentioned setting of data on a components is doable. But this is well after the data portion of the component, meaning we can't simply use the data in our custom blocks as an exported variable or an object.

Granted vite-plugin-vue-gql and i18n do exactly that, but how they do it is much more complex then what is given as a clue inside vite-plugin-vue's playground.

So... is there an example how to do this or something similar? Can we make contents of the custom blocks available under <script setup> block somehow? Or as part of the component data?

The use case for example would be to create meta data for a blog, and inside the same SFC update title of the page with it. Or to extract this meta data for generation of a RSS/Atom feed.

Thank you for your time...