Create conversational conditional-logic forms with Vue.js.
Starting with v2.0.0, Vue Flow Form has migrated from Vue 2 to Vue 3. If you're looking for README for Vue Flow Form v1.1.7, which works with Vue 2, check it out here.
Requirements:
After checking the prerequisites, follow these simple steps to install and use Vue Form:
# clone the repo
$ git clone https://github.com/ditdot-dev/vue-flow-form.git myproject
# go into app's directory and install dependencies:
$ cd myprojectIf you use npm:
$ npm install
# serve with hot reload at localhost:8080 by default.
$ npm run serve
# build for production
$ npm run buildIf you use yarn:
$ yarn install
# serve with hot reload at localhost:8080 by default.
$ yarn serve
# build for production
$ yarn buildMade with Vue.js
If you don't already have an existing Vue project, the easiest way to create one is to use Vue CLI:
(For issues with Vue 3.13 and CLI 4 check here)
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cliAnd then create a project (refer to Vue CLI documentation and issue tracker for potential problems on Windows):
$ vue create my-project
$ cd my-projectTo add Vue Flow Form as a dependency to your Vue project, use the following:
$ npm install @ditdot-dev/vue-flow-form --saveAnd then in your App.vue file:
<template>
<flow-form v-bind:questions="questions" v-bind:language="language" />
</template>
<script>
// Import necessary components and classes
import { FlowForm, QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
export default {
name: 'example',
components: {
FlowForm
},
data() {
return {
language: new LanguageModel({
// Your language definitions here (optional).
// You can leave out this prop if you want to use the default definitions.
}),
questions: [
// QuestionModel array
new QuestionModel({
title: 'Question',
type: QuestionType.MultipleChoice,
options: [
new ChoiceOption({
label: 'Answer'
})
]
})
]
}
}
}
</script>
<style>
/* Import Vue Flow Form base CSS */
@import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.css';
/* Import one of the Vue Flow Form CSS themes (optional) */
@import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-minimal.css';
/* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-green.css'; */
/* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-purple.css'; */
</style>HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Requires Vue version 3.x -->
<script src="https://unpkg.com/vue@next"></script>
<!-- Flow Form -->
<script src="https://unpkg.com/@ditdot-dev/[email protected]"></script>
<!-- Flow Form base CSS -->
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/[email protected]/dist/vue-flow-form.min.css">
<!-- Optional theme.css -->
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/[email protected]/dist/vue-flow-form.theme-minimal.min.css">
<!-- Optional font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;900&display=swap">
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>JavaScript (content of app.js):
var app = Vue.createApp({
el: '#app',
template: '<flow-form v-bind:questions="questions" v-bind:language="language" />',
data: function() {
return {
language: new VueFlowForm.LanguageModel({
// Your language definitions here (optional).
// You can leave out this prop if you want to use the default definitions.
}),
questions: [
new VueFlowForm.QuestionModel({
title: 'Question',
type: VueFlowForm.QuestionType.MultipleChoice,
options: [
new VueFlowForm.ChoiceOption({
label: 'Answer'
})
]
})
]
}
}
}).component('FlowForm', VueFlowForm.FlowForm);
const vm = app.mount('#app');Changes for each release are documented in the release notes.
MIT license.
Copyright (c) 2020 - present, DITDOT Ltd.