Is it possible to transform a Vue.JS project into a Nuxt.JS project?
Vue.js Project
If you want to view the complete Vue.JS project, click here. This project utilizes the npm package vue-conversational-form to convert web forms into conversations using Vue.js.
The Vue.JS project consists of 3 files:
- index.html
- index.js
- myForm.js
Code for: index.html
<style>
html, body {
height: 90%;
width: 96%;
background: #eee;
margin: 10px auto;
}
</style>
<div id="app"></div>
Code for: index.js
import Vue from 'vue'
import myForm from './myForm';
new Vue({
el: '#app',
template: '<myForm />',
components: {
myForm
}
})
Code for: 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
To see my attempt at converting the Vue.JS project to a Nuxt.JS project, visit codesandbox.
The Nuxt.JS project comprises of 2 files:
- index.vue (page)
- MyForm.vue (component)
Code for: 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 for: 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>
While running the Nuxt.JS project, no errors were encountered. However, the displayed outcome in the browser window does not match the original Vue.JS project result.
Why am I facing issues during the code conversion process? Your insights are appreciated!