Custom Index and Detail View

[OliverZiegler]

Would be nice if there was a possibility to easily overwrite how data is displayed.

Or is there some easy way I don't see? :)

[dillingham]

@OliverZiegler

You can change the vue component that will be looped

->detailItemComponent('some-component');

These are the props to accept

resource, resourceName, resourceId, field

php artisan nova:asset some-component

Nova.booting((Vue, router) => {
    Vue.component('some-component', require('./components/SomeCmponent').default);
})

^ Have to register the component to the vue instance Nova uses

[OliverZiegler]

Ah nice. Didn't know that. Thanks a lot!

closing 👍

[vesper8]

Thanks for the tip.

I wanted to modify the index field and you didn't define a ->indexItemComponent() meta method to allow us to easily override

However I remembered that you can simply override the original component if you use the exact same name so I did that:

asset.js

Nova.booting((Vue, router, store) => {
    Vue.component('index-nova-items-field', require('./components/IndexField'))
    // Vue.component('detail-nova-items-field', require('./components/DetailField'))
    // Vue.component('form-nova-items-field', require('./components/FormField'))
    // Vue.component('detail-nova-items-field-item', require('./components/DetailFieldItem'))
})

IndexField.vue

<template>
  <div class="text-xs">
    <div v-if="field.value">
      <pre>{{ field.value }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  props: ['resourceName', 'field'],
};
</script>

And it works : )

[bamatic]

In editing view input text controls could be replaced by select controls ?