How do I use Nova components in a custom tool or card?

// Tool.vue

<template>
    <div>
        <form-date-time></form-date-time>
    </div>
</template>

<script>
    import FormDateTime from './FormDateTime'

    export default {
        components: {
            FormDateTime,
        },
    }
</script>

Aren't Nova components available globally? But also, when trying this and trying to import via the absolute path of the component, I get an error when running npm run watch .

This relative module was not found

Aren't Nova components available globally?

Never tried, but I do not care about that much since I prefer to be explicit.

But also, when trying this and trying to import via the absolute path of the component, I get an error

This is not absolute path, it is relative. Have you provided correct path?

I tried this path, the relative you provided, and an absolute path. Neither worked.

I'm not necessarily sure this is a Nova issue anymore though, it looks like it might be babel related. When I give the absolute path I get an error related to babel-loader

So your component is named FormDateTime.vue? And it is in the same folder as Tool.vue?

No, DateTimeField is a Nova component located at nova/resources/js/components/Form/DateTimeField.vue.

In nova/resources/js/fields.js, the component is registered like Vue.component('form-date-time', required('./components/Form/DateTimeField.vue'))

I think the issue has to do with a difference in laravel-mix versions between my application and nova. Nova is running "laravel-mix": "^1.0" and my app is running "laravel-mix": "^4.0.15".

Because my app is running this version, it requires a different version of babel packages than nova does, and I think what is why babel-loader is part of the stack trace error.

In order to even create custom nova cards and tools, I have to include a .babelrc file in the main directory of each of my custom components that doesn't reference a preset with a version of > 7 like my app .babelrc does. But now, it seems this is a similar issue when trying to use Nova components in my custom components.

I've now tried upgrading the laravel-mix version for each of my custom components (by convention they are the same as nova), and while running npm commands I don't get errors, my components don't render at all.

Then cd to nova-components/xxxx and run npm run dev/prod.

You can run npm install within that nova-components/xxx folder also.

I did both of those. I installed a newer version of laravel-mix but have reverted it now back to the way it was.

I think part of my issue may be trying to use a form component outside of a form-panel component. But, I still haven't quite figured that out either. I think the components registered inside of fields.js are only available inside of a form panel. The components registered in components.js seem to be available everywhere.

I wish there was some documentation regarding re-using nova components. I know all of the source code is available, but it's a little tough to dig through especially as someone who is not proficient with vue.

Look through Nova Mastery course here on Laracasts and see if there is something that might give you an idea how to resolve it. Hard to figure out with limited info you've provided why it is failing.

I have looked through that a couple of times - nothing I recall on this subject.

I have changed my approach a bit. I'm now utilizing the <form-panel> component inside of my custom component. I inspected and took the props of a working <form-panel> in nova (as opposed to in my custom tool) and am passing them through to the component in my custom component. This kind of works as I can now render a form with working components, but there are still a few errors, and I'm still really not sure the correct way to pass the props to the <form-panel> component.

Invalid default value for prop "fields": Props with type Object/Array must use a factory function to return the default value.

This is one of the errors I am getting.

nova should add documentation on how to use this nova component, especially when using it in a tool or resource tool.