I am trying to incorporate live preview with my Payload CMS, using Vue 3 as front end. I have followed this “tutorial” starting at around 11:00 but this CMS is usually more geared towards React.

I have set up this super simple Pages.js collections:

const Pages = {
  admin: {
    useAsTitle: 'title',
    livePreview:{
      url: 'http://localhost:1234',
    }
  },
}
export default Pages

And I now want to connect it to Vue somehow I guess. I have my router index.js file which loads the Page component:

import { createRouter, createWebHistory } from 'vue-router'
import Page from '../views/Page.vue'

const routes = [
  {
    path: '/:slug', 
    name: 'Page',
    component: Page,
    props: true
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

And the page component itself is pretty simple at the moment since I only offer one block type “Hero” block:

<template>
  <div v-if="pageData">
    <div v-for="block in pageData.layout" :key="block.id">
      
      <hero-block v-if="block.blockType === 'hero'" :title="block.title" :subtitle="block.content[0]?.children[0]?.text" :imageURL="block.media?.url" :imageAlt="block.media?.['alt text']"></hero-block>

    </div>
  </div>
  <div v-else>
    <p>Loading...</p>
  </div>
</template>

<script>
import HeroBlock from '../blocks/HeroBlock.vue'

export default {
  name: 'Page',
  components:{
    HeroBlock
  },
  props: {
    slug: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      pageData: null
    }
  },
  async mounted() {
    await this.fetchPageData();
  },
  methods: {
    async fetchPageData() {
      try {
        const apiUrl = import.meta.env.VITE_API_URL;
        const response = await fetch(`${apiUrl}/pages?where[slug][equals]=${this.slug}`);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        this.pageData = data.docs[0];

        if (!this.pageData) {
          console.error('pageData is missing, load 404 here instead');
        }
      } catch (error) {
        console.error('Error fetching page data:', error);
      }
    },
  }
}
</script>

So I have two questions:

1. How can I incorporate the live preview functionality with Vue 3 as front end framework?

2. Since Payload seems pretty into React, should I consider another CMS? People in their discord thought I could still use it, but are there other good open source headless CMS:s that are more “Vue friendly”?