Convert Vue.JS project to Nuxt.JS project

Question

I want to create Nuxt.JS project from Vue.JS project.

Vue.js Project

You can see the full Vue.JS project here . This project uses npm package vue-conversational-form which can help turn web forms into conversations using Vue.js.

Project has 3 files:

1. index.html
2. index.js
3. myForm.js

Code of: index.html

<style>
  html, body {
    height: 90%;
    width: 96%;
    background: #eee;
    margin: 10px auto;
  }
</style>
<div id="app"></div>

Code of: index.js

import Vue from 'vue'
import myForm from './myForm';

new Vue({
  el: '#app',
  template: '<myForm />',
  components: {
    myForm
  }
})

Code of: myForm.js

import Vue from 'vue'
import { ConversationalForm } from 'conversational-form';

export default Vue.component('MyForm', {
  template: '<div class="myForm"></div>',
  styles: [`
    .myForm {
      position: relative;
      height: 100%;
      width: 100%;
    }
  `],
  methods: {
    setupForm: function () {
      const formFields = [
        {
          'tag': 'input',
          'type': 'text',
          'name': 'firstname',
          'cf-questions': 'What is your firstname?'
        },
        {
          'tag': 'input',
          'type': 'text',
          'name': 'lastname',
          'cf-questions': 'What is your lastname?'
        }
      ];

      this.cf = ConversationalForm.startTheConversation({
        options: {
          submitCallback: this.submitCallback,
          preventAutoFocus: true,
        },
        tags: formFields
      });
      this.$el.appendChild(this.cf.el);
    },
    submitCallback: function () {
      var formDataSerialized = this.cf.getFormData(true);
      console.log("Formdata, obj:", formDataSerialized);
      this.cf.addRobotChatResponse("You are done. Check the dev console for form data output.")
    }
  },
  mounted: function () {
    this.setupForm()
  },
});

Nuxt.js Project

Now here you can see my tried to convert this Vue.Js project to Nuxt.js project from codesandbox .

Project has 2 files:

1. index.vue (page)
2. MyForm.vue (component)

Code of: index.vue

<template>
  <div id="app">
    <MyForm></MyForm>
  </div>
</template>

<script>
import MyForm from '~/components/MyForm.vue'

export default {
  components: {
    MyForm
  }
}
</script>

<style scoped>
  html, body {
    height: 90%;
    width: 96%;
    background: #eee;
    margin: 10px auto;
  }
</style>

Code of: MyForm.vue

<template>
  <div class="myForm"></div>
</template>

<script>
export default {
  mounted() {
    this.setupForm()
  },
  methods: {
    setupForm() {
      const formFields = [
        {
          'tag': 'input',
          'type': 'text',
          'name': 'firstname',
          'cf-questions': 'What is your firstname?'
        },
        {
          'tag': 'input',
          'type': 'text',
          'name': 'lastname',
          'cf-questions': 'What is your lastname?'
        }
      ];

      const { ConversationalForm } = require('conversational-form');

      this.cf = ConversationalForm.startTheConversation({
        options: {
          submitCallback: this.submitCallback,
          preventAutoFocus: true,
        },
        tags: formFields
      });
      this.$el.appendChild(this.cf.el);
    },
    submitCallback() {
      var formDataSerialized = this.cf.getFormData(true);
      console.log("Formdata, obj:", formDataSerialized);
      this.cf.addRobotChatResponse("You are done. Check the dev console for form data output.")
    }
  } 
}
</script>

<style scoped>
  .myForm {
    position: relative;
    height: 100%;
    width: 100%;
  }
</style>

I do not get any errors when I run the Nuxt.JS project, but in a browser window, it does not display the same result as the original Vue.JS project.

Why am I getting errors on code convertation process? Thanks!

Answer 1

Try to wrap the .myForm in ~/components/MyForm.vue with an extra div. Here's an example https://codesandbox.io/embed/codesandbox-nuxt-conversational-form-oh9y4

 <template> <div> <div class="myForm"></div> </div> </template>