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)
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.
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.
Status:
See the
package.json and
main.js files.
Status: See the
views folder and the
viewModels folder.
Status: See the
vue-components
folder, containing Vue components, loaded via
require-vuejs, as shown in
Layout2.vue.
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.
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.
Status: See the
package.json,
main.js, and
Header2.vue files.
Status: Knockout-based utility classes for responsive design
are replaced by Enquire.js. See the
Header1.vue file.
Status: See the
index.html and the
Layout2.vue files.
Status: See the
oraclejet-build.js and
oraclejet-serve.js files.
Status: No more references to Knockout anywhere.
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.
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.
Status: Not started. Maybe fork this project and then work on migrating from Require to Webpack via the fork.
- GitHub: Simple RequireJS App with Vue
- YouTube: From Knockout to Vue in Oracle JET
- YouTube: Replacing Knockout Completely in Oracle JET
- CodePen: Vue.js + jQueryUI Datepicker
- Making 5433 Jquery ui datepicker work with Vuejs
- Understanding Vue.js Lifecycle Hooks
- Mutating Props Locally
- Retiring vue-resource
- Vue.js 2 & Vue-Resource - Real-World Vue Application With External API Access
- Fetching Data from a Third-Party API with Vue.js and Axios
- Awesome Vue
- Weather
- Google Maps
- lodash
- js-marker-clusterer
- cities.json