Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Create conversational conditional-logic forms with Vue.js.

License

NotificationsYou must be signed in to change notification settings

ditdot-dev/vue-flow-form

Repository files navigation

Create conversational conditional-logic forms with Vue.js.

LicenseVersioncdnjs

v-form screenshots

Starting with v2.0.0, Vue Flow Form has migrated from Vue 2 toVue 3. If you're looking for README for Vue Flow Form v1.1.7, which works with Vue 2,check it out here.

Live Demos

Project Documentation

Example Project

Requirements:

  • Node.js version 10.0.0 or above (12.0.0+ recommended)
  • npm version 5+ (oryarn version 1.16+)
  • Git

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 withVue.js

Usage as npm Package

If you don't already have an existing Vue project, the easiest way to create one is to useVue CLI:

(For issues with Vue 3.13 and CLI 4 checkhere)

$ npm install -g @vue/cli# OR$ yarn global add @vue/cli

And then create a project (refer toVue CLI documentation andissue 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-formv-bind:questions="questions"v-bind:language="language"/></template><script>// Import necessary components and classesimport{FlowForm,QuestionModel,QuestionType,ChoiceOption,LanguageModel}from'@ditdot-dev/vue-flow-form'exportdefault{name:'example',components:{      FlowForm},data(){return{language:newLanguageModel({// Your language definitions here (optional).// You can leave out this prop if you want to use the default definitions.}),questions:[// QuestionModel arraynewQuestionModel({title:'Question',type:QuestionType.MultipleChoice,options:[newChoiceOption({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>

Usage with Plain JavaScript via CDN

HTML:

<!DOCTYPE html><html><head><metacharset="UTF-8"><!-- Requires Vue version 3.x --><scriptsrc="https://unpkg.com/vue@next"></script><!-- Flow Form --><scriptsrc="https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.2"></script><!-- Flow Form base CSS --><linkrel="stylesheet"href="https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.2/dist/vue-flow-form.min.css"><!-- Optional theme.css --><linkrel="stylesheet"href="https://unpkg.com/@ditdot-dev/vue-flow-form@2.3.2/dist/vue-flow-form.theme-minimal.min.css"><!-- Optional font --><linkrel="stylesheet"href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;900&amp;display=swap"></head><body><divid="app"></div><scriptsrc="app.js"></script></body></html>

JavaScript (content of app.js):

varapp=Vue.createApp({el:'#app',template:'<flow-form v-bind:questions="questions" v-bind:language="language" />',data:function(){return{language:newVueFlowForm.LanguageModel({// Your language definitions here (optional).// You can leave out this prop if you want to use the default definitions.}),questions:[newVueFlowForm.QuestionModel({title:'Question',type:VueFlowForm.QuestionType.MultipleChoice,options:[newVueFlowForm.ChoiceOption({label:'Answer'})]})]}}}).component('FlowForm',VueFlowForm.FlowForm);constvm=app.mount('#app');

Changelog

Changes for each release are documented in therelease notes.

Stay in Touch

License

MIT license.

Copyright (c) 2020 - present, DITDOT Ltd.

[8]ページ先頭
©2009-2025 Movatter.jp