ditdot-dev / Vue Flow Form
Licence: mit
Create conversational conditional-logic forms with Vue.js.
Stars: ✭ 315
Projects that are alternatives of or similar to Vue Flow Form
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (-19.68%)
Mutual labels: forms, vue-component, vue2
Survey Library
JavaScript Survey and Form Library
Stars: ✭ 3,060 (+871.43%)
Mutual labels: survey, quiz, forms
vue-drag-zone
Drag Zone component for @vuejs
Stars: ✭ 127 (-59.68%)
Mutual labels: vue2, vue-component
surveyjs vue quickstart
SurveyJS + Vue Quickstart Template
Stars: ✭ 96 (-69.52%)
Mutual labels: survey, quiz
v-clappr
👏🏻Vue.js wrapper for Clappr media player
Stars: ✭ 18 (-94.29%)
Mutual labels: vue2, vue-component
vue-simple-upload-component
A simple upload component for Vue.js 2.x
Stars: ✭ 14 (-95.56%)
Mutual labels: vue2, vue-component
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (-79.68%)
Mutual labels: vue2, vue-component
Quick Survey
A tool for quick surveys, try it out. (No longer maintained).
Stars: ✭ 109 (-65.4%)
Mutual labels: survey, forms
Formium
The headless form builder for the modern web.
Stars: ✭ 78 (-75.24%)
Mutual labels: survey, forms
vue-collapse
A simple collapse component for Vue.js
Stars: ✭ 34 (-89.21%)
Mutual labels: vue2, vue-component
Ohmyform
✏️ Free open source alternative to TypeForm, TellForm, or Google Forms ⛺
Stars: ✭ 1,065 (+238.1%)
Mutual labels: survey, forms
survey kit
Flutter library to create beautiful surveys (aligned with ResearchKit on iOS)
Stars: ✭ 68 (-78.41%)
Mutual labels: forms, survey
Vue Trix
Trix text editor component for Vue.js
Stars: ✭ 159 (-49.52%)
Mutual labels: vue-component, vue2
Vue Marquee Text Component
[CSS GPU Animation] Marquee Text for vuejs
Stars: ✭ 226 (-28.25%)
Mutual labels: vue-component, vue2
ng2-quiz
A general purpose quiz application developed in angular (updated to angular 8) that can be used for multiple purpose.
Stars: ✭ 90 (-71.43%)
Mutual labels: survey, quiz
vue-icon
Maybe it is the smallest vue component that contains all the feather icons
Stars: ✭ 44 (-86.03%)
Mutual labels: vue2, vue-component
Vue Flow Form
Create conversational conditional-logic forms with Vue.js.
Live Demos
Project Documentation
Example Project
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 myproject
If you use npm:
$ npm install
# serve with hot reload at localhost:8080 by default.
$ npm run serve
# build for production
$ npm run build
If you use yarn:
$ yarn install
# serve with hot reload at localhost:8080 by default.
$ yarn serve
# build for production
$ yarn build
Made with Vue.js
Usage as npm package
If you don't already have an existing Vue project, the easiest way to create one is to use Vue CLI:
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
And then create a project (refer to Vue CLI documentation and issue tracker for potential problems on Windows):
$ vue create my-project
$ cd my-project
To add Vue Flow Form as a dependency to your Vue project, use the following:
$ npm install @ditdot-dev/vue-flow-form --save
And 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 '[email protected]/vue-flow-form/dist/vue-flow-form.css';
/* Import one of the Vue Flow Form CSS themes (optional) */
@import '[email protected]/vue-flow-form/dist/vue-flow-form.theme-minimal.css';
/* @import '[email protected]/vue-flow-form/dist/vue-flow-form.theme-green.css'; */
/* @import '[email protected]/vue-flow-form/dist/vue-flow-form.theme-purple.css'; */
</style>
Usage with plain JavaScript via CDN
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Requires Vue version 2.6.x -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></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:[email protected];400;900&display=swap">
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
JavaScript (content of app.js):
var app = new Vue({
el: '#app',
template: '<flow-form v-bind:questions="questions" v-bind:language="language" />',
data: function() {
return {
language: new FlowForm.LanguageModel({
// Your language definitions here (optional).
// You can leave out this prop if you want to use the default definitions.
}),
questions: [
new FlowForm.QuestionModel({
title: 'Question',
type: FlowForm.QuestionType.MultipleChoice,
options: [
new FlowForm.ChoiceOption({
label: 'Answer'
})
]
})
]
}
}
});
Changelog
Changes for each release are documented in the release notes.
License
MIT license.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].