Server-side render Vue components?

[joekrump]

• SSR for vue files using this approach? https://www.railsjazz.com/blog/javascript-code-executed-inside-ruby-on-rails-app
• Need to make sure that there is a clear understanding of how this works because this could be a serious performance hog if done incorrectly.
• More potentially helpful Vue docs on SSR
• Render <template>, <script>, and <style> on the server in a .html.erb file but then use this and parse it on the fronted to add reactivity:
  • https://github.com/vuejs/core/tree/main/packages/compiler-sfc#vuecompiler-sfc
  • https://github.com/FranckFreiburger/vue3-sfc-loader/tree/main
    • Don't want to use babel here if possible would be nice to just use vuecompiler-sfc
  • Might also be helpful to look at https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue
• use v-cloak to prevent unprocessed Vue templates from appearing on the page.

Open questions

1. Is it possible to fetch the template from the rails server using an html endpoint which renders the view that maybe written in .html.erb and also has Vue directive markup on it? Ex.

<!-- show.html.erb -->

<template>
  <h1><%= model.name %></h1>
  <button @click="doSomething">Click me!</button>
</template>

• Where would the doSomething function be defined in this case?

Psuedocode

Here's a rough idea based on my understanding so far

// hit an endpoint on the rails server that renders the `show.html.erb` _(see above)_
const res = await fetch('/model/show.html')

Vue.createApp({
  template: await res.text(), // https://developer.mozilla.org/en-US/docs/Web/API/Response/text
  // Something here to define the doSomething function?
})

2. Is it valid to include <script> tags with imports, etc within the .html.erb file that is rendered and then processed by Vue as the template option passed to createApp?

Ex. Could I do this?

<!-- show.html.erb -->

<template>
  <h1><%= model.name %></h1>
  <button @click="doSomething">Click me!</button>
</template>

<script setup>
  const doSomething = () => {
    alert("Hello world!")
  };
</script>