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…