Form Builder is not appearing in Laravel Nova Tool

[vosaan]

Helo. I want to use your Form Builder with Laravel Nova Tool. My steps:

1. npm i v-form-builder --save

2. My tool code:

   
   <template>
   <div>
       <heading class="mb-6">Job Custom Forms</heading>
   
       <card class="flex flex-col items-center justify-center">
           <FormBuilder v-model="configuration"></FormBuilder>
       </card>
   </div>
   </template>

But page is still empty and no errors in console:
![Screenshot_3](https://user-images.githubusercontent.com/13124555/93857628-8f3a3400-fcc3-11ea-9ff4-6c46735252ff.jpg)

[abhimanusharma]

@vosaan Did you initiated the formbuilder plugin options in your main file correctly?

As mentioned in the documentation: https://phattranminh96.gitbook.io/vue-form-builder/getting-started/turning-up-the-form

import {VueFormBuilderPlugin} from 'v-form-builder'
import 'v-form-builder/dist/v-form-builder.css' //load CSS from your App

// install now
Vue.use(VueFormBuilderPlugin, options)

I think after this everything will work fine.

[vosaan]

@abhimanusharma I'm sorry. I'm new with Vue and Nova. So, I have only two files with JS in 'resources' folder:

1. tool.js with content

   Nova.booting((Vue, router, store) => {
   router.addRoutes([
   {
     name: 'job-custom-forms',
     path: '/job-custom-forms',
     component: require('./components/Tool'),
   },
   ])
   })

2. components/Tool.vue (content in my question)

In which one do I need to add the code?

[abhimanusharma]

@vosaan If you can share your code on git that will be very helpful to resolve your issue.

Try doing this in tool.js file

import {VueFormBuilderPlugin} from 'v-form-builder'
import 'v-form-builder/dist/v-form-builder.css' //load CSS from your App

Vue.use(VueFormBuilderPlugin, options);

Nova.booting((Vue, router, store) => {
  router.addRoutes([
    {
      name: 'job-custom-forms',
      path: '/job-custom-forms',
      component: require('./components/Tool'),
    },
  ])
})

Let me know if it resolve your problem.

[vosaan]

@abhimanusharma My attempts 1.

import { VueFormBuilderPlugin } from 'v-form-builder'
import 'v-form-builder/dist/v-form-builder.css' //load CSS from your App

Vue.use(VueFormBuilderPlugin);

Nova.booting((Vue, router, store) => {
  router.addRoutes([
    {
      name: 'job-custom-forms',
      path: '/job-custom-forms',
      component: require('./components/Tool'),
    },
  ])
})

2. 
   import Vue from 'vue'
   import { VueFormBuilderPlugin } from 'v-form-builder'
   import 'v-form-builder/dist/v-form-builder.css' //load CSS from your App

Vue.use(VueFormBuilderPlugin);

Nova.booting((Vue, router, store) => { router.addRoutes([ { name: 'job-custom-forms', path: '/job-custom-forms', component: require('./components/Tool'), }, ]) })

![Screenshot_6](https://user-images.githubusercontent.com/13124555/94115484-77dd8100-fe52-11ea-862c-079be0e2ddca.jpg)

> If you can share your code on git that will be very helpful to resolve your issue.

Unfortunately, I'm not owner of project so I can't share code

[abhimanusharma]

@vosaan Try this.

import Vue from 'vue'
import { VueFormBuilderPlugin } from 'v-form-builder'
import 'v-form-builder/dist/v-form-builder.css' //load CSS from your App

Nova.booting((Vue, router, store) => {
    Vue.use(VueFormBuilderPlugin);
    router.addRoutes([
    {
      name: 'job-custom-forms',
      path: '/job-custom-forms',
      component: require('./components/Tool'),
    },
  ]);
})

[vosaan]

@abhimanusharma Unfortunately result is the same like in my attempt number 2. I think this is a specific question of Laravel Nova. But I have one more Tool with "@fullcalendar/vue" component and it works fine. Anyway, thanks for your time

[sethsandaru]

@vosaan as @abhimanusharma said, it would be great if you could share with us your code (some little part of your application that using VueFormBuilder) which can be booted up and run it from our side. So I can personally dive into it and maybe can help you. I'm a Laravel-guy too but never work with Laravel Nova before :D

[sethsandaru]

It's been 3 days without any comments. I would like to close this issue. If you have any further detail or issue related to this, feel free to reopen it. Thanks