Add OnsenUI to an existing Cordova project

Question

Title says it all but I can't seem to find a way to add OnsenUI framework to an existing Cordova project. How can this be done?

Answer 1

I added it to my project with just a few commands. Adding OnsenUI to an existing project is like starting a new OnsenUI project, but just without that first step of creating a new project.

Source: https://onsen.io/v2/guide/vue/
My project is a Vue project, so if you're not using Vue, you just use the onsen.io guide for your framework.

Step 1

inside your existing cordova project. At the root level of the project, run npm install onsenui --save

Step 2

if you're using a particular framework that's OnsenUI compatible, like Vue, make sure to install that too: npm install vue-onsenui --save

Step 3

If you're doing a Vue project:

// Webpack CSS import
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

// JS import
import Vue from 'vue';
import VueOnsen from 'vue-onsenui'; // This imports 'onsenui', so no need to import it separately. So if you're not using vue, write import Onsen from `onsenui` instead, etc

Vue.use(VueOnsen); // VueOnsen set here as plugin to VUE. Done automatically if a call to window.Vue exists in the startup code.

If you're not using vue, you can find the link to your framework specific instructions on https://onsen.io/v2/guide/frameworks.html#introduction-to-bindings.

Again, it's no different adding it to an existing project or creating a new project.

Finally, you just need to go through and edit html tags afterwards. For example, change <button> to <ons-button> or, if you're using Vue, <v-ons-button>.