diff --git a/examples/html/regions-vue.htm b/examples/html/regions-vue.htm
index 6eeaec41..c07bd703 100644
--- 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
index a4719f9b..6c4d3866 100644
--- 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
diff --git a/js/DataFormsJS.js b/js/DataFormsJS.js
index 8416a566..e1d83f2c 100644
--- a/js/DataFormsJS.js
+++ b/js/DataFormsJS.js
@@ -27,6 +27,19 @@
  * @license  MIT
  */
 
+/*
+TODO - Vue 3 (Beta Version) is in active development but only partially working, Once it works lots of testing before publishing
+
+Helpfull pages for Vue 3 current development
+    https://github.com/vuejs/vue-next
+    https://www.vuemastery.com/blog/vue-3-start-using-it-today/
+
+
+Might have to set [v-cloak] to the root container in-between page views, more testing needed
+Step through Vue source with debugger
+
+*/
+
 /* Validates with both [jshint] and [eslint] */
 /* global Handlebars, nunjucks, _, Vue, Promise */
 /* jshint strict: true */
@@ -554,11 +567,19 @@
             }
         }
 
+        // Unmount Vue 3 App
+        if (app.activeVueApp !== null) {
+            app.activeVueApp.unmount();
+            // TODO - need to verify. But the atual model does not need to be reset as is done with Vue 2
+            // If needed get it from: `app.activeVueApp._component.data()`
+        }
+
         // Clear the Current Route
         app.activeController = null;
         app.activeTemplate = null;
         app.activeModel = null;
         app.activeVueModel = null;
+        app.activeVueApp = null;
         app.activeParameters = [];
         app.activeParameterList = {};
         vueWatcherDepPrevLen = 0;
@@ -816,9 +837,12 @@
             page = app.pages[controller.pageType];
             if (page !== undefined) {
                 // Create the model and assign the new model name to the controller
-                // For Vue, properties are assigned to the model and functions are
-                // assigned to a controller [methods] object.
-                if (controller.viewEngine === ViewEngines.Vue) {
+                // For Vue 2, properties are assigned to the model and functions are
+                // assigned to a controller [methods] object. Vue 2 is determined based
+                // on `Vue.createApp === undefined`.
+                // TODO - finish updates for Vue 3, code block below only runs for Vue 2
+                //  and it doesn't appear yet that it should run for Vue 3
+                if (controller.viewEngine === ViewEngines.Vue && Vue.createApp === undefined) {
                     model = {};
                     controller.methods = (controller.methods === undefined ? {} : controller.methods);
                     for (var prop in page.model) {
@@ -954,7 +978,9 @@
         activeController: null,
         activeTemplate: null,
         activeModel: null,
-        activeVueModel: null,
+        activeVueModel: null, // Vue 2
+        activeVueApp: null, // Vue 3
+        vueDirectives: null, // Vue 3
         activeParameters: [],
         activeParameterList: {},
         activeJsControls: [],
@@ -1596,6 +1622,13 @@
                     vueWatcherDepPrevLen = len;
                     return;
                 }
+                if (app.activeVueApp !== null) {
+                    // TODO - How to handle for Vue 3?
+                    console.log('Vue 3: updateView() was called');
+                    vueUpdateView = true;
+                    isUpdatingView = false;
+                    return;
+                }
 
                 // Make sure all loaded JS Controls are unloaded
                 app.unloadAllJsControls();
@@ -1648,8 +1681,9 @@
                             // the screen so handle Vue Errors and Warnings globally and add back the
                             // View element if it is removed.
                             var viewEl = document.querySelector(app.settings.viewSelector);
-                            Vue.config.errorHandler = function (err) { console.error('Vue Error'); showVueError(err, viewEl); };
-                            Vue.config.warnHandler = function (err) { console.error('Vue Warning'); showVueError(err, viewEl); };
+                            var vueError = function (err) { console.error('Vue Error'); showVueError(err, viewEl); };
+                            var vueWarn = function (err) { console.error('Vue Warning'); showVueError(err, viewEl); };
+                            var usingVue3 = (Vue.config === undefined && typeof Vue.createApp === 'function');
 
                             // Was there a previous render error? If so show it instead of creating a new Vue instance
                             if (app.activeTemplate && app.activeTemplate.error) {
@@ -1657,52 +1691,121 @@
                                 afterRender('updateView');
                             } else {
                                 // Create a Vue Instance for the current page
-                                app.activeVueModel = new Vue({
-                                    el: app.settings.viewSelector,
-                                    data: app.activeModel,
-                                    methods: app.activeController.methods,
-                                    computed: app.activeController.computed,
-                                    mounted: function () {
-                                        var vm = this;
-                                        vm.$nextTick(function () {
-                                            if (app.activeController.onRouteLoad !== undefined) {
-                                                try {
-                                                    app.activeController.onRouteLoad.apply(vm, app.activeParameters);
-                                                } catch (e) {
-                                                    app.showErrorAlert('Error from Controller [path=' + app.activeController.path + '] on [onRouteLoad()]: ' + e.toString());
-                                                    console.error(e);
+                                if (usingVue3) {
+                                    app.activeVueApp = Vue.createApp({
+                                        data: function() { return app.activeModel },
+                                        methods: app.activeController.methods,
+                                        computed: app.activeController.computed,
+                                        mounted: function() {
+                                            console.log('Vue 3: mounted');
+                                            console.log(this);
+                                            var vm = this;
+                                            vm.$nextTick(function () {
+                                                if (app.activeController.onRouteLoad !== undefined) {
+                                                    try {
+                                                        app.activeController.onRouteLoad.apply(vm, app.activeParameters);
+                                                    } catch (e) {
+                                                        app.showErrorAlert('Error from Controller [path=' + app.activeController.path + '] on [onRouteLoad()]: ' + e.toString());
+                                                        console.error(e);
+                                                    }
                                                 }
-                                            }
-                                            app.loadAllJsControls();
-                                            afterRender('vue_mounted', vm);
-                                        });
-                                    },
-                                    updated: function () {
-                                        // Only run the update when a DOM change happens
-                                        // after [app.updateView()] is called.
-                                        this.$nextTick(function () {
-                                            if (vueUpdateView) {
                                                 app.loadAllJsControls();
-                                                afterRender('vue_updated');
-                                                var w = this._watcher;
-                                                if (w && w.deps && w.deps.length) {
-                                                    vueWatcherDepPrevLen = this._watcher.deps.length;
+                                                afterRender('vue_mounted', vm);
+                                            });  
+                                        },
+                                        updated: function () {
+                                            console.log('Vue 3: updated');
+                                            console.log(this);
+                                            // Only run the update when a DOM change happens
+                                            // after [app.updateView()] is called.
+                                            this.$nextTick(function () {
+                                                // TODO - how to handle? Previously used private props in Vue 2
+                                                console.log('onUpdated - Vue.nextTick()')
+                                                if (vueUpdateView) {
+                                                    app.loadAllJsControls();
+                                                    afterRender('vue_updated');
+                                                    // var w = this._watcher;
+                                                    // if (w && w.deps && w.deps.length) {
+                                                    //     vueWatcherDepPrevLen = this._watcher.deps.length;
+                                                    // }
+                                                    vueUpdateView = false;
+                                                }
+                                            });
+                                        },
+                                        beforeDestroy: function () {
+                                            // TODO - how to handle for Vue 3?
+                                            console.log('Vue 3: beforeDestroy');
+                                            console.log(this);
+                                            try {
+                                                if (app.activeController.onRouteUnload !== undefined) {
+                                                    app.activeController.onRouteUnload.apply(app.activeModel, app.activeParameters);
                                                 }
-                                                vueUpdateView = false;
+                                            } catch (e) {
+                                                app.showErrorAlert('Error from Controller [path=' + app.activeController.path + '] on [onRouteUnload()]: ' + e.toString());
+                                                console.error(e);
                                             }
-                                        });
-                                    },
-                                    beforeDestroy: function () {
-                                        try {
-                                            if (app.activeController.onRouteUnload !== undefined) {
-                                                app.activeController.onRouteUnload.apply(this, app.activeParameters);
+                                        },
+                                    });
+                                    app.activeVueApp.errorHandler = vueError;
+                                    app.activeVueApp.warnHandler = vueWarn;
+                                    if (app.vueDirectives !== null) {
+                                        for (var directive in app.vueDirectives) {
+                                            if (app.vueDirectives.hasOwnProperty(directive)) {
+                                                app.activeVueApp.directive(directive, app.vueDirectives[directive]);
                                             }
-                                        } catch (e) {
-                                            app.showErrorAlert('Error from Controller [path=' + app.activeController.path + '] on [onRouteUnload()]: ' + e.toString());
-                                            console.error(e);
                                         }
-                                    },
-                                });
+                                    }
+                                    app.activeVueApp.mount(app.settings.viewSelector);
+                                } else {
+                                    Vue.config.errorHandler = vueError;
+                                    Vue.config.warnHandler = vueWarn;
+                                    app.activeVueModel = new Vue({
+                                        el: app.settings.viewSelector,
+                                        data: app.activeModel,
+                                        methods: app.activeController.methods,
+                                        computed: app.activeController.computed,
+                                        mounted: function () {
+                                            var vm = this;
+                                            vm.$nextTick(function () {
+                                                if (app.activeController.onRouteLoad !== undefined) {
+                                                    try {
+                                                        app.activeController.onRouteLoad.apply(vm, app.activeParameters);
+                                                    } catch (e) {
+                                                        app.showErrorAlert('Error from Controller [path=' + app.activeController.path + '] on [onRouteLoad()]: ' + e.toString());
+                                                        console.error(e);
+                                                    }
+                                                }
+                                                app.loadAllJsControls();
+                                                afterRender('vue_mounted', vm);
+                                            });
+                                        },
+                                        updated: function () {
+                                            // Only run the update when a DOM change happens
+                                            // after [app.updateView()] is called.
+                                            this.$nextTick(function () {
+                                                if (vueUpdateView) {
+                                                    app.loadAllJsControls();
+                                                    afterRender('vue_updated');
+                                                    var w = this._watcher;
+                                                    if (w && w.deps && w.deps.length) {
+                                                        vueWatcherDepPrevLen = this._watcher.deps.length;
+                                                    }
+                                                    vueUpdateView = false;
+                                                }
+                                            });
+                                        },
+                                        beforeDestroy: function () {
+                                            try {
+                                                if (app.activeController.onRouteUnload !== undefined) {
+                                                    app.activeController.onRouteUnload.apply(this, app.activeParameters);
+                                                }
+                                            } catch (e) {
+                                                app.showErrorAlert('Error from Controller [path=' + app.activeController.path + '] on [onRouteUnload()]: ' + e.toString());
+                                                console.error(e);
+                                            }
+                                        },
+                                    });
+                                }
                             }
                         } else {
                             // Load JS Controls
@@ -1749,11 +1852,12 @@
                     }
                 }
 
+                // TODO - need to confirm that this will work for both Vue 2 and Vue 3
                 // Controller.onRendered()
-                var isVue = (app.activeController && app.activeController.viewEngine === ViewEngines.Vue);
+                var isVue2 = (app.activeController && app.activeController.viewEngine === ViewEngines.Vue && Vue.createApp === undefined);
                 var onRendered = app.activeController && app.activeController.onRendered;
                 if (typeof onRendered === 'function') {
-                    if (isVue) {
+                    if (isVue2) {
                         model = (model || app.activeVueModel);
                     } else {
                         model = app.activeModel;
@@ -1966,8 +2070,9 @@
                     }
                 }
             }
-            if (app.activeController && app.activeController.viewEngine === ViewEngines.Vue) {
+            if (app.activeController && app.activeController.viewEngine === ViewEngines.Vue && app.activeVueModel) {
                 app.activeVueModel.$nextTick(refreshAll);
+                // TODO - Vue 3
             } else {
                 refreshAll();
             }
diff --git a/js/extensions/vue-directives.js b/js/extensions/vue-directives.js
index 8610304a..e6837081 100644
--- a/js/extensions/vue-directives.js
+++ b/js/extensions/vue-directives.js
@@ -149,13 +149,13 @@
             }
         }
 
-        Vue.directive('format-number', {
+        var vFormatNumber = {
             bind: function (el, binding) {
                 el.textContent = formatNumber(binding.value, {});
             }
-        });
-
-        Vue.directive('format-currency', {
+        };
+        
+        var vFormatCurrency = {
             bind: function (el, binding) {
                 var currencyCode = binding.arg;
                 if (!currencyCode) {
@@ -166,9 +166,9 @@
                 var intlOptions = { style: 'currency', currency: currencyCode, maximumFractionDigits: 2 };
                 el.textContent = formatNumber(binding.value, intlOptions);
             }
-        });
+        };
 
-        Vue.directive('format-percent', {
+        var vFormatPercent = {
             bind: function (el, binding) {
                 var decimalPlaces = (binding.arg ? Number(binding.arg) : 0);
                 var intlOptions = {
@@ -178,27 +178,49 @@
                 };
                 el.textContent = formatNumber(binding.value, intlOptions);
             }
-        });
+        };
 
-        Vue.directive('format-date', {
+        var vFormatDate = {
             bind: function (el, binding) {
                 el.textContent = formatDateTime(binding.value, {});
             }
-        });
-
-        Vue.directive('format-date-time', {
+        };
+        
+        var vFormatDateTime = {
             bind: function (el, binding) {
                 var intlOptions = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
                 el.textContent = formatDateTime(binding.value, intlOptions);
             }
-        });
-
-        Vue.directive('format-time', {
+        };
+        
+        var vFormatTime = {
             bind: function (el, binding) {
                 var intlOptions = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
                 el.textContent = formatDateTime(binding.value, intlOptions);
             }
-        });
+        };
+
+        // Vue 2 and 3 have different API's.
+        // For Vue 2 directives can be defined globally on the Vue object
+        // while Vue 3 requires them to be set on the app from `Vue.createApp()`.
+        // In order to do this DataFormsJS provides a `app.vueDirectives` for Vue.
+        var isVue3 = (Vue.directive === undefined && typeof Vue.createApp === 'function');
+        if (isVue3) {
+            app.vueDirectives = app.vueDirectives || {};
+            app.vueDirectives['format-number'] = vFormatNumber;
+            app.vueDirectives['format-currency'] = vFormatCurrency;
+            app.vueDirectives['format-percent'] = vFormatPercent;
+            app.vueDirectives['format-date'] = vFormatDate;
+            app.vueDirectives['format-date-time'] = vFormatDateTime;
+            app.vueDirectives['format-time'] = vFormatTime;
+        } else {
+            Vue.directive('format-number', vFormatNumber);
+            Vue.directive('format-currency', vFormatCurrency);
+            Vue.directive('format-percent', vFormatPercent);
+            Vue.directive('format-date', vFormatDate);
+            Vue.directive('format-date-time', vFormatDateTime);
+            Vue.directive('format-time', vFormatTime);
+        }
     }
 
     // Load directives once document is ready
diff --git a/js/plugins/i18n.js b/js/plugins/i18n.js
index ba1868b1..50aef35d 100644
--- a/js/plugins/i18n.js
+++ b/js/plugins/i18n.js
@@ -444,14 +444,14 @@
 
             // Create Vue Directives
             if (window.Vue) {
-                Vue.directive('i18n', {
+                var vI18n = {
                     bind: function (el, binding) {
                         var key = binding.value;
                         el.textContent = (i18n.langText && i18n.langText[key] ? i18n.langText[key] : key);
                     }
-                });
+                };
 
-                Vue.directive('i18n-attr', {
+                var vI18nAttr = {
                     bind: function (el, binding) {
                         var attr = binding.value.split(',').map(function(s) { return s.trim(); });
                         for (var x = 0, y = attr.length; x < y; x++) {
@@ -461,7 +461,18 @@
                             }
                         }
                     }
-                });
+                };
+                
+                // For differences between Vue 2 and Vue 3 see comments in [js\extensions\vue-directives.js]
+                var isVue3 = (Vue.directive === undefined && typeof Vue.createApp === 'function');
+                if (isVue3) {
+                    app.vueDirectives = app.vueDirectives || {};
+                    app.vueDirectives['i18n'] = vI18n;
+                    app.vueDirectives['i18n-attr'] = vI18nAttr;
+                } else {
+                    Vue.directive('i18n', vI18n);
+                    Vue.directive('i18n-attr', vI18nAttr);
+                }
             }
         },
     };