Using petite-vue together with Vue SSR (Islands architecture)

[larionov]

https://twitter.com/youyuxi/status/1411405615369539590

Hi, I would like to try using the approach Evan mentioned in the tweet about petite-vue, the idea is that you render the application completely on server in SSR. Then you throw away the JS bundle entirely and do all the client interactions with petite-vue.

But I'm not sure that I understand how you would use petite-vue directives alongside regular Vue, did anyone try this approach already? More specifically, for example I would like to make petite-vue open server rendered menus on click, but that menu needs to be generated with a Vue v-for on SSR, the text to be inserted in the menu button too.

I'm thinking, what if it was possible to prefix the petite-vue directives with something that regular Vue isn't concerned about? I think that would solve the problem?

[larionov]

I guess I could use Alpine.js for this instead? Wouldn't want to though, if petite-vue option is available

[solution-loisir]

Hi @larionov, do you mean using something like Eleventy with eleventy-plugin-vue for SSR (prerendering) and then add petite-vue for interactive parts? Or even something like Astro with petite-vue. This kind of architecture is getting very popular.

[larionov]

@solution-loisir yes, exactly that, however for my case it will be more custom, I will be removing the javascript bundle in my code directly.

[alshdavid]

I would suggest considering using a different server-side renderer to your client side renderer.

Adding isomorphic capabilities to the library would require the addition of compilers that know about pvue constructs which introduces a lot of challenges in itself - transforming it into a different project all together.

The advantage of pvue is that it's an unopinionated client side presentation layer renderer. If you want to add TypeScript, you can and it won't lock you to a version based on framework support. You don't need compiler-aware files (.vue .svelte), custom plugins or anything.

With that in mind, SSR applications can have amazing advantages - but they don't need to be isomorphic to attain those advantages. You can stack ejs, Golang templates, php, razer, blade and have your server-side rendered aspects handled explicitly by your server.

[larionov]

Hi, not sure I understand what exactly you mean by isomorphic but for my purposes I don't need petite-vue to know anything about the server side. I only need vue and petite-vue to not step on each others toes.

[larionov]

And I get your point about the ability to use something else. However, changing the technology at our company would be a hard sell just for the ability to use petite-vue, I would rather go with alpinejs.