Конвертировать проект Vue.JS в проект Nuxt.JS

Question

Я хочу создать проект Nuxt.JS из проекта Vue.JS.

Проект Vue.js

Вы можете увидеть полный проект Vue.JS здесь . В этом проекте используется пакет npm vue-разговорный-форма , который может помочь превратить веб-формы в разговоры с использованием Vue.js.

Проект содержит 3 файла:

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

Код: index.html

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

Код: index.js

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

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

Код: 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

Теперь здесь вы можете увидеть мои попытки конвертировать этот проект Vue.Js в проект Nuxt.js из codesandbox.

Проект имеет 2 файла:

1. index.vue (page)
2. MyForm.vue (компонент)

Код: 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>

Код: 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>

Я не получаю никаких ошибок при запуске проекта Nuxt.JS, но в окне браузера он не отображает тот же результат, что и исходный проект Vue.JS.

Почему я получаю ошибки в процессе преобразования кода? Спасибо!

Answer 1

Попробуйте обернуть .myForm в ~/components/MyForm.vue дополнительным делением. Вот пример https://codesandbox.io/embed/codesandbox-nuxt-conversational-form-oh9y4

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