title: Convert Vue.JS project to Nuxt.JS project
body: <p>I want to create Nuxt.JS project from Vue.JS project.</p>
  
  <blockquote>
    <p>Vue.js Project</p>
  </blockquote>
  
  <p>You can see the full Vue.JS project <a href="https://stackblitz.com/edit/vue-conversational-form-example?file=myForm.js" rel="nofollow noreferrer">here</a>. This project uses npm package <a href="https://www.npmjs.com/package/vue-conversational-form" rel="nofollow noreferrer">vue-conversational-form</a> which can help turn web forms into conversations using Vue.js.</p>
  
  <p>Project has 3 files:</p>
  
  <ol>
  <li><strong>index.html</strong></li>
  <li><strong>index.js</strong></li>
  <li><strong>myForm.js</strong></li>
  </ol>
  
  <p><strong>Code of:</strong> <code>index.html</code></p>
  
  <pre><code>&lt;style&gt;
    html, body {
      height: 90%;
      width: 96%;
      background: #eee;
      margin: 10px auto;
    }
  &lt;/style&gt;
  &lt;div id="app"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Code of:</strong> <code>index.js</code></p>
  
  <pre><code>import Vue from 'vue'
  import myForm from './myForm';
  
  new Vue({
    el: '#app',
    template: '&lt;myForm /&gt;',
    components: {
      myForm
    }
  })
  </code></pre>
  
  <p><strong>Code of:</strong> <code>myForm.js</code></p>
  
  <pre><code>import Vue from 'vue'
  import { ConversationalForm } from 'conversational-form';
  
  export default Vue.component('MyForm', {
    template: '&lt;div class="myForm"&gt;&lt;/div&gt;',
    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()
    },
  });
  </code></pre>
  
  <blockquote>
    <p>Nuxt.js Project</p>
  </blockquote>
  
  <p>Now here you can see my tried to convert this Vue.Js project to Nuxt.js project from <a href="https://codesandbox.io/embed/codesandbox-nuxt-conversational-form-ssxnf" rel="nofollow noreferrer">codesandbox</a>.</p>
  
  <p>Project has 2 files:</p>
  
  <ol>
  <li><strong>index.vue</strong> (page)</li>
  <li><strong>MyForm.vue</strong> (component)</li>
  </ol>
  
  <p><strong>Code of:</strong> <code>index.vue</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;MyForm&gt;&lt;/MyForm&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import MyForm from '~/components/MyForm.vue'
  
  export default {
    components: {
      MyForm
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
    html, body {
      height: 90%;
      width: 96%;
      background: #eee;
      margin: 10px auto;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>Code of:</strong> <code>MyForm.vue</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="myForm"&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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.")
      }
    } 
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
    .myForm {
      position: relative;
      height: 100%;
      width: 100%;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>Why am I getting errors on code convertation process? Thanks!</p>