Integration with Turbo Frames

[mtomov]

Hello!

Thanks for vite_ruby!

Wanted to see if anyone has managed to get turbo frames to work with VueJS components.

Currently, new html that appears in a <turbo-frame> and has vuejs components is not parsed/initialized by VueJS. Wonder if we need to do something like

document.addEventListener("turbo:frame-load", () => { 
  new Vue(el: ... the turbo frame element
}

thoughts?

[basicallydan]

@mtomov Haha, I was Googling how to get this to work on our application. Yours was the top result. turbo:frame-loaded is the event I was looking at. turbo:frame-load doesn't ever seem to fire.

[mtomov]

Actually I did manage to get it to work at the end. I created a vue component:

<template>
  <turbo-frame
    :src="url"
    :id="'frame-' + frameIdentifier"
    @turbo:before-frame-render="handleBeforeRender"
  >
    <component :is="fetchedComponent"></component>
  </turbo-frame>
</template>

<script>
const frameIdentifier = Math.random().toString(36).substring(8)

export default {
  props: {
    url: String,
  },
  data() {
    return {
      html: null,
    }
  },
  computed: {
    fetchedComponent() {
      return {
        template: this.html || "",
      }
    },
    frameIdentifier() {
      return frameIdentifier
    },
  },
  methods: {
    handleBeforeRender(event) {
      // override default render function
      event.detail.render = (_currentElement, newElement) => {
        this.html = newElement.innerHTML
      }
    },
  },
}
</script>

Then, in another .vue component, you'd call it like this:

<vue-turbo-frame :url="turboFrameUrl"> </vue-turbo-frame>

When instantiating the VueJs app, one must also exclude turbo frames from compiling

   const app = createApp({ // ....

   app.config.compilerOptions.isCustomElement = (tag) =>
      tag.startsWith("trix") || tag.startsWith("turbo")