diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml b/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml
index 3a8300ef79..f9061ab4d4 100644
--- a/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml
@@ -22,7 +22,7 @@
                 <h2>@L["Users"]</h2>
             </div>
             <div class="col-md-6 text-right">
-                <button type="button" class="btn btn-primary create-user-button">
+                <button type="button" class="btn btn-primary" v-on:click="openCreateModal">
                     <i class="fa fa-plus" aria-hidden="true"></i>
                     @L["CreateUser"]
                 </button>
diff --git a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js
index c1929c8ebf..6844c051bb 100644
--- a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js
+++ b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js
@@ -1,87 +1,98 @@
-$(function () {
+(function() {
+    
     var _l = abp.localization.getResource('AbpIdentityWeb'); //TODO: AbpIdentityWeb to const
-
     var _identityUserAppService = volo.abp.identity.identityUser;
 
+    var _editModal = new abp.ModalManager({
+        viewUrl: abp.appPath + 'Identity/Users/EditModal'
+    });
+
     var _createModal = new abp.ModalManager({
         viewUrl: abp.appPath + 'Identity/Users/CreateModal'
     });
     
-    var _editModal = new abp.ModalManager({
-        viewUrl: abp.appPath + 'Identity/Users/EditModal'
+    var app = new Vue({
+        el: '#IdentityUsersWrapper',
+        data: {
+            
+        },
+        methods: {
+            openCreateModal: function () {
+                _createModal.open();
+            }
+        }
     });
 
-    var _$wrapper = $('#IdentityUsersWrapper');
-    var _$table = _$wrapper.find('table');
+    $(function () {
+
+        var _$wrapper = $('#IdentityUsersWrapper');
+        var _$table = _$wrapper.find('table');
 
-    var _dataTable = _$table.DataTable({
-        order: [[1, "asc"]],
-        ajax: abp.libs.datatables.createAjax(_identityUserAppService.getList),
-        columnDefs: [
-            {
-                targets: 0,
-                data: null,
-                orderable: false,
-                autoWidth: false,
-                defaultContent: '',
-                render: function (list, type, record, meta) {
-                    return '<div class="dropdown">' +
-                        '<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
-                        'Actions' +
-                        '</button>' +
-                        '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">' +
-                        '<a class="dropdown-item update-user" href="#" data-id="' + record.id + '">Edit</a>' +
-                        '<a class="dropdown-item delete-user" href="#" data-id="' + record.id + '">Delete</a>' +
-                        '</div>' +
-                        '</div>';
+        var _dataTable = _$table.DataTable({
+            order: [[1, "asc"]],
+            ajax: abp.libs.datatables.createAjax(_identityUserAppService.getList),
+            columnDefs: [
+                {
+                    targets: 0,
+                    data: null,
+                    orderable: false,
+                    autoWidth: false,
+                    defaultContent: '',
+                    render: function (list, type, record, meta) {
+                        return '<div class="dropdown">' +
+                            '<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
+                            'Actions' +
+                            '</button>' +
+                            '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">' +
+                            '<a class="dropdown-item update-user" href="#" data-id="' + record.id + '">Edit</a>' +
+                            '<a class="dropdown-item delete-user" href="#" data-id="' + record.id + '">Delete</a>' +
+                            '</div>' +
+                            '</div>';
+                    }
+                },
+                {
+                    targets: 1,
+                    data: "userName"
+                },
+                {
+                    targets: 2,
+                    data: "email"
+                },
+                {
+                    targets: 3,
+                    data: "phoneNumber"
                 }
-            },
-            {
-                targets: 1,
-                data: "userName"
-            },
-            {
-                targets: 2,
-                data: "email"
-            },
-            {
-                targets: 3,
-                data: "phoneNumber"
-            }
-        ]
-    });
+            ]
+        });
 
-    //Update user command
-    _$table.on('click', '.update-user', function () { //TODO: To action list!
-        _editModal.open({
-            id: $(this).data('id')
+        //Update user command
+        _$table.on('click', '.update-user', function () { //TODO: To action list!
+            _editModal.open({
+                id: $(this).data('id')
+            });
         });
-    });
 
-    //Delete user command
-    _$table.on('click', '.delete-user', function () { //TODO: To action list!
-        var id = $(this).data('id');
-        var userName = $(this).data('userName');
+        //Delete user command
+        _$table.on('click', '.delete-user', function () { //TODO: To action list!
+            var id = $(this).data('id');
+            var userName = $(this).data('userName');
 
-        if (confirm(_l('UserDeletionConfirmationMessage', userName))) {
-            _identityUserAppService
-                .delete(id)
-                .then(function () {
-                    _dataTable.ajax.reload();
-                });
-        }
-    });
+            if (confirm(_l('UserDeletionConfirmationMessage', userName))) {
+                _identityUserAppService
+                    .delete(id)
+                    .then(function () {
+                        _dataTable.ajax.reload();
+                    });
+            }
+        });
 
-    //Create user command
-    _$wrapper.find('.create-user-button').click(function () {
-        _createModal.open();
-    });
+        _createModal.onClose(function () { //TODO: Only refresh if saved!
+            _dataTable.ajax.reload();
+        });
 
-    _createModal.onClose(function () { //TODO: Only refresh if saved!
-        _dataTable.ajax.reload();
+        _editModal.onClose(function () { //TODO: Only refresh if saved!
+            _dataTable.ajax.reload();
+        });
     });
 
-    _editModal.onClose(function() { //TODO: Only refresh if saved!
-        _dataTable.ajax.reload();
-    });
-});
\ No newline at end of file
+})();