Use Laravel Nova core components in your custom Vue component

At time of post, Laravel Nova is currently using Vue 2.5.0.

I’ve been working with Laravel lately, and particularly the Nova admin framework. In this case I was building a custom modal that launches from a Detail view and provides an entity creation form. I didn’t want to re-invent the wheel with regard to form elements, so I dug into Nova source a bit and found some clues as to how I can re-use some of their Vue components.

You’ll find all of the Nova global component registrations here:

nova/resources/js/components.js
nova/resources/js/fields.js

I needed a BooleanGroupField, so I referenced the component key seen here from fields.js:

Vue.component(
  'form-boolean-group-field',
  require('./components/Form/BooleanGroupField.vue')
)

In my custom Vue template (nova-components/[ToolFolderName]/resources/js/components/[template].vue) I inserted the core component like so:

<form-boolean-group-field></form-boolean-group-field>

I discovered the field will not display without a field prop, so you’ll need to create a data prop with an array of options. Here’s an example:

export default {
    data() {
      return {
          'daysOfWeekField': {
              'options': [
                  {
                      'name': '0',
                      'label': 'Sunday',
                      'checked': false
                  },
                  {
                      'name': '1',
                      'label': 'Monday',
                      'checked': false
                  },
                  {
                      'name': '2',
                      'label': 'Tuesday',
                      'checked': false
                  },
                  ...
              ]
          }
      }
    }
}

Add the binding :field attribute and set the value to your new data property. I also added a ref attribute to gain access to the resulting value during form submission.

<form-boolean-group-field ref="daysOfWeek" :field="daysOfWeekField"></form-boolean-group-field>

I just started exploring these core components, so I’m not an expert, but hopefully this will get you started.

UPDATE: Due to some limitations in the props available on the core Nova Vue components, I ended up copying those I needed to customize into my custom tool and importing them locally into my template. Sometimes your hand is forced and you just need to git ‘er done…