Full Replacement of Knockout with Vue in Oracle JET

Experimental Demo App illustrating inclusion of the following in an Oracle JET app, with the exclusion of Knockout:

vue
require-vuejs
vue-router
vue-resource (retired) and axios with vue-axios
enquire (for responsive design)

Purpose

Investigate whether and to what extent Knockout can be replaced with Vue in Oracle JET applications. This is not the direction that the Oracle JET team is going in, but is my experimental proof of concept below.

Set Up

After cloning the repo, take the following steps in the order below.

npm install: the dependencies set in the package.json file are downloaded.

grunt build: the web staging folder is created and the custom libraries defined in the oraclejet-build.js file are automatically moved to web/js/libs. The custom libraries are the Vue libraries, together with Enquire, listed above.

grunt serve: the application in the web staging folder opens in the browser, while the watch list defined in the oraclejet-serve.js file is used to ensure that changes are automatically reloaded.

Tasks

1. Register Vue via Require in an Oracle JET application.

Status: See the package.json and main.js files.

2. Rewrite Oracle JET modules to use Vue instead of Knockout.

Status: See the views folder and the viewModels folder.

3. Create and load Vue components in Oracle JET modules.

Status: See the vue-components folder, containing Vue components, loaded via require-vuejs, as shown in Layout2.vue.

4. Split combined constructs into HTML/JS files.

Status: In progress. Done for Vue-based Oracle JET modules, not yet for Vue components. Also, investigate creating a Vue plugin that will automatically load the two together, removing the requirement to load the HTML file into the JavaScript, as is done by ojModule in standard Oracle JET applications. See the dashboard.html and dashboard.js files.

5. Wrap Oracle JET components in Vue components.

Status: In progress. Each Oracle JET component is a jQuery UI component that needs to be wrapped as a Vue component, so that custom tags provided by Vue can be used to load Oracle JET components. See the ojvdatepicker.vue and the ojvchart.vue files.

6. Replace Oracle JET router with vue-router.

Status: See the package.json, main.js, and Header2.vue files.

7. Provide new solution for handling responsive design.

Status: Knockout-based utility classes for responsive design are replaced by Enquire.js. See the Header1.vue file.

8. Rewrite 'navdrawer' Oracle JET template to use Vue components.

Status: See the index.html and the Layout2.vue files.

9. Include Vue libraries in build and serve Grunt tasks.

Status: See the oraclejet-build.js and oraclejet-serve.js files.

10. Remove Knockout from the application.

Status: No more references to Knockout anywhere.

11. Integrate vue-resource and Axios for HTTP/REST/AJAX calls.

Status: After integrating vue-resource successfully, it was removed because it has been retired and replaced with axios and vue-axios. See the about.html and about.js files, which integrates usage of axios, defined in SourceSelection.vue.

12. Investigate whether/how CCA components can be integrated.

Status: In progress. Maybe Vue components are enough, though it would be useful to be able to create CCA components that use Vue instead of Knockout and figure out how to reuse them in CCA-supporting products.

13. Investigate usage of Webpack instead of Require.

Status: Not started. Maybe fork this project and then work on migrating from Require to Webpack via the fork.

GeertjanWielenga/vuejet