🎉 Adding support for Vue 3 (partially working)

ConradSollitt · Jun 12, 2020 · c4e4559 · c4e4559
1 parent 6d34282
commit c4e4559
Show file tree

Hide file tree

Showing 5 changed files with 229 additions and 80 deletions.
diff --git a/examples/html/regions-vue.htm b/examples/html/regions-vue.htm
@@ -1,6 +1,10 @@
-<h3 v-if="isLoading" v-cloak v-i18n="'Loading...'"></h3>
-<p v-if="hasError" v-cloak><span v-i18n="'Error'"></span> - {{ errorMessage }}</p>
-<div v-if="isLoaded" v-cloak class="flex-col">
+<!--
+    TODO - see comments in main file regarding [v-cloak] - currenting testing changes for Vue 3
+    Later all examples need to work with both Vue 2 and 3
+-->
+<h3 v-if="isLoading" v-i18n="'Loading...'"></h3>
+<p v-if="hasError"><span v-i18n="'Error'"></span> - {{ errorMessage }}</p>
+<div v-if="isLoaded" class="flex-col">
     <h1><span v-i18n="'Regions for Country Code'"></span> {{ country }}</h1>
 
     <nav>

diff --git a/examples/places-demo-vue.htm b/examples/places-demo-vue.htm
@@ -36,9 +36,14 @@
             data-load-only-once="true"
             data-countries>
 
-            <h3 v-if="isLoading" v-cloak v-i18n="'Loading...'"></h3>
-            <p v-if="hasError" v-cloak><span v-i18n="'Error'"></span> - {{ errorMessage }}</p>
-            <div v-if="isLoaded" v-cloak class="flex-col">
+            <!--
+                TODO - had to remove [v-cloak] to prevent warning for Vue 3
+                Based on code search [v-cloak] should be assigned to the container element only for Vue 3
+                Need to double check Vue 2 source
+            -->
+            <h3 v-if="isLoading" v-i18n="'Loading...'"></h3>
+            <p v-if="hasError"><span v-i18n="'Error'"></span> - {{ errorMessage }}</p>
+            <div v-if="isLoaded" class="flex-col">
                 <h1 v-i18n="'Countries'"></h1>
 
                 <nav>
@@ -146,20 +151,22 @@ <h1 v-i18n="'Countries'"></h1>
 			<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 		Specific Dev Version:
 			<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
-        Prod Version:
+        Prod Version 2:
             <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+        Vue 3 Beta Version
+            <script src="https://unpkg.com/vue@next"></script>
         Local:
-            <script src="../vendor/vue.js"></script>
+            <script src="../vendor/vue.js"></script>            
         -->
-        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+        <script src="https://unpkg.com/vue@next"></script>
 
         <!-- DataFormsJS -->
-        <script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.1.0/js/DataFormsJS.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.1.0/js/extensions/vue-directives.min.js"></script>
+        <script src="../js/DataFormsJS.js"></script>
+        <script src="../js/extensions/vue-directives.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.1.0/js/pages/jsonData.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.1.0/js/plugins/filter.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.1.0/js/plugins/sort.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.1.0/js/plugins/i18n.min.js"></script>
+        <script src="../js/plugins/i18n.js"></script>
         <script>
             // Lazy Load the following scripts only if needed based on attribute [data-lazy-load].
             // When scripts need to be downloaded in a specific order then use an array otherwise