จะทำให้ Vue.js มีเนื้อหาที่เรนเดอร์ฝั่งเซิร์ฟเวอร์จาก CMS ได้อย่างไร

สมมติว่านี่คือสถานการณ์:

• เนื้อหาได้รับการจัดการผ่าน CMS "คลาสสิก" เช่น WordPress หรือ TYPO3
• เนื้อหาถูกส่งโดย CMS ในรูปแบบ HTML และ CSS ที่แสดงผลอย่างสมบูรณ์

ในส่วนหน้า Vue.js ควรใช้สำหรับการโต้ตอบทั้งหมดกับ UI

แม้ว่าฉันจะอ่านเอกสารส่วนใหญ่ของ vue และหน้า Vue.js Server-Side Rendering Guide ด้วย เช่นเดียวกับการใช้งานในสภาพแวดล้อมที่ไม่ใช่ Node.js ฉันยังคงไม่ แน่ใจว่าจะทำให้งานนี้สำเร็จได้อย่างไร

ตัวอย่าง^*

หน้าเว็บนี้มี ส่วนประกอบ ซึ่งโดยพื้นฐานแล้วคือรายการผลิตภัณฑ์ สำหรับทุกคนที่ใช้ JavaScript รายการนี้จะมีตัวกรองอยู่ด้านบน

ตอนนี้จาก CMS ฉันได้รับรายการที่แสดงผลทั้งหมด เช่น:

<div class="product-component">
    <ul class="products">
        <li data-id="1">Product 1</li>
        <li data-id="2">Product 2</li>
        <li data-id="3">Product 3</li>
    </ul>
</div>

หลังจากที่ JavaScript ทำงานแล้ว ควรมีลักษณะดังนี้:

<div id="product-component">
    <form>
        <select>
            <option value="1">Show Product 1 only</option>
        </select   
    </form>

    <ul class="products"></ul>
</div>

ส่วนประกอบใน Vue.js อาจเป็นดังนี้:

<div id="product-component">
    <form>
        <!-- Vue.js logic for the filter -->
    </form>

    <ul class="products">
        <li v-for="product in products">
            {{ product.name }}
        </li>
    </ul>
</div>


var vm = new Vue({
  el: '#product-component',
  data: {
    products: [
        {id: 1, name: 'Product 1'},
        {id: 2, name: 'Product 2'},
        {id: 3, name: 'Product 3'},
    ],
    filterCurrent: null,
  }
});

ตอนนี้คำถามของฉันคือ:

• วิธีเชื่อมต่อ Vue.js เข้ากับเทมเพลตที่แสดงผลล่วงหน้า
• How to update/inject Vue.js variables (especially data) on runtime?
  • Which means: How can I get the list of products from the CMS into the component?
• เนื่องจากรายการและส่วนต่างๆ ของเทมเพลตถูกเรนเดอร์แล้ว Vue.js จะต้องเรนเดอร์ใหม่อีกครั้งหลังจากเริ่มต้นแล้วหรือไม่
• สิ่งนี้แสดงใน วงจรชีวิตของ Vue.js อย่างไร

สุดท้ายแต่ไม่ท้ายสุด: การตั้งค่านี้เป็นไปได้หรือไม่

_{^* โค้ดนี้เป็นเพียงโค้ดจำลองเพื่อแสดงปัญหา}