Usage with plain Javascript using CDN

For vue-flow-form

Usage with plain Javascript using CDN

Usage with plain JavaScript via CDN

cdnjs does not provide the latest version URL, so check npm or GitHub for the latest version of the library.

HTML:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
    <!-- Flow Form -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-flow-form/1.1.0/vue-flow-form.umd.min.js"></script>
    <!-- Flow Form base CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vue-flow-form/1.1.0/vue-flow-form.min.css">
    <!-- Optional theme.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vue-flow-form/1.1.0/vue-flow-form.theme-minimal.min.css">
  </head>
  <body>
    <div id="app">
      <flow-form v-bind:questions="questions" v-bind:language="language" />
    </div>
    <script src="app.js"></script>
  </body>
</html>

JavaScript (content of app.js):

var app = new Vue({
  el: '#app',
  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'
            })
          ]
        })
      ]
    }
  }
});

Project Documentation

DITDOT

By DITDOT

DITDOT offers complete services for tailor-made software development, corporate identity, and consulting - delivering high-quality web applications, mobile apps, and websites.

Looking for more vue-flow-form tutorials?

View all tutorials for vue-flow-form