能否不使用DRF将Vue.js接入Wagtail Stream-Fields且无需无头路由？

Absolutely! You can absolutely pair Vue.js with Wagtail StreamFields without relying on Django REST Framework (DRF) or going fully headless. This approach lets you keep Wagtail as your content management backbone while using Vue for interactive, dynamic sections within StreamFields. Here's a step-by-step breakdown of how to make it work:

Core Idea #

Instead of building a full headless setup, we’ll use Wagtail to render the overall page structure, and embed Vue components only where needed (within specific StreamField blocks). Data flows directly from Wagtail’s template to Vue via DOM attributes—no API calls or DRF endpoints required.

Step 1: Build a Custom StreamBlock for Vue Components #

First, create a reusable StreamBlock that lets editors configure Vue components directly in the Wagtail admin. This block will capture the component name and any props/data it needs.

# your_app/models.py
from wagtail.core.blocks import StructBlock, CharBlock, TextBlock
from wagtail.core.fields import StreamField
from wagtail.core.models import Page

class VueComponentBlock(StructBlock):
    component_name = CharBlock(
        label="Vue Component Name",
        help_text="e.g., 'interactive-timeline' or 'dynamic-form'"
    )
    component_props = TextBlock(
        label="Component Props (JSON)",
        help_text="Pass data to your Vue component, e.g., {\"title\": \"My Timeline\", \"events\": [...]}"
    )

    class Meta:
        template = "blocks/vue_component_block.html"
        icon = "code"

# Add this block to your Page model's StreamField
class ArticlePage(Page):
    body = StreamField([
        # Your existing StreamBlocks (text, images, etc.)
        ('vue_component', VueComponentBlock()),
    ])

Step 2: Render the Block with Vue Mount Points #

Create a template for your VueComponentBlock that outputs a DOM element ready for Vue to mount to, along with the configured props as data attributes.

<!-- templates/blocks/vue_component_block.html -->
<div 
    class="vue-component-mount"
    data-component="{{ component_name }}"
    data-props="{{ component_props|safe }}"
></div>

We use Django’s safe filter here because we’re passing valid JSON directly—just make sure editors enter properly formatted JSON in the admin!

Step 3: Load Vue and Initialize Components #

Add Vue to your Wagtail base template (via CDN or bundled static files) and write a small script to initialize all Vue components on the page.

First, add Vue to your base template:

<!-- templates/base.html -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="{% static 'js/vagtail-vue-integration.js' %}"></script>

Then write the integration script:

// static/js/vagtail-vue-integration.js
document.addEventListener('DOMContentLoaded', () => {
    // 1. Register your Vue components globally
    Vue.component('interactive-timeline', {
        props: ['title', 'events'],
        template: `
            <div class="timeline">
                <h3>{{ title }}</h3>
                <div v-for="event in events" :key="event.id" class="timeline-event">
                    <span class="event-date">{{ event.date }}</span>
                    <p>{{ event.description }}</p>
                </div>
            </div>
        `
    });

    Vue.component('dynamic-form', {
        props: ['formTitle'],
        template: `
            <div class="vue-form">
                <h3>{{ formTitle }}</h3>
                <!-- Your form logic here -->
                <input type="text" placeholder="Enter your name">
                <button @click="handleSubmit">Submit</button>
            </div>
        `,
        methods: {
            handleSubmit() {
                alert('Form submitted!');
            }
        }
    });

    // 2. Initialize all Vue mount points on the page
    document.querySelectorAll('.vue-component-mount').forEach(mountEl => {
        const componentName = mountEl.dataset.component;
        const props = JSON.parse(mountEl.dataset.props);

        new Vue({
            el: mountEl,
            render: h => h(componentName, { props })
        });
    });
});

Step 4: Style and Test #

Add scoped styles to your Vue components (or include global CSS) to avoid conflicts with Wagtail’s default styles. Test by creating a page in the Wagtail admin, adding your Vue component block, entering valid props, and previewing the page—your Vue component should render and function as expected!

Key Benefits #

• No DRF required: Data passes directly from Wagtail’s template to Vue, skipping API calls entirely.
• Non-headless workflow: Wagtail still manages routing, permissions, and static page content—Vue only handles interactive sections.
• Editor-friendly: Content teams can add and configure Vue components just like any other StreamField block.
• Flexible: You can add as many Vue components as needed by registering them in the integration script.

内容的提问来源于stack exchange，提问作者DST