Add Vue 3 migration related changes

EkaterinaVu · EkaterinaVu · commit e5f1b372363f · 2021-05-20T11:50:14.000+02:00
diff --git a/README.md b/README.md
@@ -98,7 +98,7 @@ And then in your App.vue file:
 
 <script>
   // Import necessary components and classes
-  import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
+  import { FlowForm, QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
 
   export default {
     name: 'example',
@@ -146,14 +146,14 @@ 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>
+    <!-- Requires Vue version 3.x -->
+    <script src="https://unpkg.com/vue@next"></script>
     <!-- Flow Form -->
-    <script src="https://unpkg.com/@ditdot-dev/vue-flow-form@1.1.7"></script>
+    <script src="https://unpkg.com/@ditdot-dev/vue-flow-form@2.0.0"></script>
     <!-- Flow Form base CSS -->
-    <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@1.1.7/dist/vue-flow-form.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@2.0.0/dist/vue-flow-form.min.css">
     <!-- Optional theme.css -->
-    <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@1.1.7/dist/vue-flow-form.theme-minimal.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@2.0.0/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&amp;display=swap">
   </head>
@@ -167,29 +167,31 @@ HTML:
 JavaScript (content of app.js):
 
 ```js
-var app = new Vue({
+var app = Vue.createApp({
   el: '#app',
   template: '<flow-form v-bind:questions="questions" v-bind:language="language" />',
   data: function() {
     return {
-      language: new FlowForm.LanguageModel({
+      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 FlowForm.QuestionModel({
+        new VueFlowForm.QuestionModel({
           title: 'Question',
-          type: FlowForm.QuestionType.MultipleChoice,
+          type: VueFlowForm.QuestionType.MultipleChoice,
           options: [
-            new FlowForm.ChoiceOption({
+            new VueFlowForm.ChoiceOption({
               label: 'Answer'
             })
           ]
         })
       ]
     }
   }
-});
+}).component('FlowForm', VueFlowForm.FlowForm);
+
+const vm = app.mount('#app');
 ```
 
 ## Changelog
