Publish Components

Overview

Statamic provides a handful of Vue components that can be used like building blocks to create forms. To read about the general “publish form” concept, including how to do all the server-side bits, check out the publish forms page.

Basic Forms

If you’re creating a basic form, there’s a pre-built form component that could work for the 80% use case. This is probably enough for you!

Complex Forms

For more complex forms, you can use the underlying components to build out the functionality you need. You’ll need to have a Vue component responsible for your form’s logic. At a minimum, it needs to hold values and submit them somewhere.

<my-form-component
    :blueprint='@json($blueprint)'
    :meta='@json($meta)'
    :initial-values='@json($values)'
></my-form-component>

<template>
    <publish-container ...>
        <div>
            <div>
                <h1>My Form</h1>
                <button @click="submit">Submit</button>
            </div>
 
            <!-- Render the fields -->
        </div>
    </publish-container>
</template>
<script>
export default {
    props: ['blueprint', 'meta', 'initialValues'],
    data() {
        return {
            values: this.initialValues,
        }
    },
    methods: {
        submit() {
            this.$axios.post('/somewhere', this.values).then(() => {
                //
            });
        }
    }
}
</script>

The publish-container example above is intentionally simplified. If you’d like to see a complete working example, you can take a look at components/publish/PublishForm.vue inside the Statamic codebase. Otherwise, we can dive into the component itself…

Form

The PublishForm component is an opinionated wrapper around the various subcomponents that make up “a publish form”. This will provide you with all the basics to make a simple and functional form.

• Renders a form based on a blueprint
• Inline validation messages
• AJAX submission handling
• Tracks the dirty state

Usage

You can use it in Blade or in another Vue component.

<publish-form
    title="My Form"
    action="{{ cp_route('test.update') }}"
    :blueprint='@json($blueprint)'
    :meta='@json($meta)'
    :values='@json($values)'
/>

Props

Events

Container

The PublishContainer component is the workhorse. Among other things, it’ll spin up a dedicated Vuex store and maintain the state of all the values when modified in fieldtypes, emit events, and manage the “dirty state” of the page.

Since it’s renderless, you will typically want to wrap your entire component with it. That will let everything be able to communicate where appropriate.

Usage

<template>
    <publish-container
        ref="container"
        name="base"
        :blueprint="blueprint"
        :meta="meta"
        v-model="values"
        v-slot="{ setFieldValue, setFieldMeta }"
    >
        <div>
            <div>
                <h1>My Form</h1>
                <button @click="submit">Submit</button>
            </div>
 
            <publish-sections
                @updated="setFieldValue"
                @meta-updated="setFieldMeta" />
        </div>
    </publish-container>
</template>

The PublishSections component will handle rendering the sections and their fields. It will be able to get the blueprint, field values, and whatever else it needs from the Vuex store that the publish container created. You just need to connect the wires for the data bubbling back upwards.

The publish container’s default slot will provide a couple of functions (setFieldValue and setFieldMeta) which you can just wire up like the example above. Doing it this way (rather than just updating your values property, for example) will let the container component automatically manage things like the dirty state and events.

Props

Events

Methods

Sections

The PublishSections component will render all the section of a blueprint, and all the fields in each section. It must be inside a PublishContainer component. It will fetch the blueprint and all the values from the Vuex store without needing to manually provide props.

Props

Events

Slots

actions

Allows you to insert extra items into the top of the sidebar, and will be responsively moved if there’s not enough room for a sidebar.

<publish-sections>
    <template #actions>
        <div> ... </div>
    </template>
</publish-sections>

Fields

The PublishFields component will display a list of fields - what you’d see inside one blueprint section.

Normally, you should just use the PublishSections component. But, if you want more manual control, this is available to you.