Titanium Vue

Use Vue.js to easily create native mobile apps with Axway Appcelerator Titanium.

⚠️ This platform is currently in an early beta stage. Expect things to be broken or APIs to change as this project matures. DO NOT USE IN PRODUCTION!

Introduction

First integration of Vue.js and Titanium. It works by replacing the virtual dom in Vue.js with a custom implementation that manages Ti.UI.* components.

Example Usage

Checkout titanium-vue-sample for sample usage!

Features that are currently working are most of the base views from the Ti.UI.* namespace as well as applying inline styles, attributes and event handlers to those elements.

Roadmap

• Properly implement more complex views that require more setup than just adding them as a child view with custom components like DashboardView, Picker and ScrollableView
• Integrate vue-router, the official router for Vue.js
• Apply styles from CSS. This requires a CSS parser and a mechanism to apply those styles to the matching elements at runtime.
• Hot module reloading for single file components. This would probably build upon the precompiled single file components from .vue files and the vue-hot-reload-api.

Developer Guide

Choose your Editor

There are Vue plugins for every modern editor that add syntax highlighting, code snippets and auto completion:

• Visual Studio Code: vetur
• Atom: language-vue
• Sublime: vue-syntax-highlight
• Vim (oh yeah!): vim-vue

Setup

Clone the repo and run npm run dev to run an initial build to the dist directory and start watching for changes for easy development.

Getting setup to try titanium-vue-sample

1. Clone this repo and titanium-webpack-devkit.
2. Run npm install in each titanium-webpack-devkit and titanium-vue.
3. Clone titanium-vue-sample.
   • Make sure this directory is at the same level as the previous two
4. Run npm install in the titanium-vue-sample/app directory
5. Run ti build in titanium-vue-sample

Exposing Titanium UI

All Ti.UI.* views can be exposed by registering their create factory inside the element registry via registerElement.

registerElement(tagName, createFactoryResolver, [meta])

Basic elements like a Button can be exposed directly:

registerElement('button', () => Ti.UI.createButton)

More complex elements may require to be wrapped in a Vue component. To avoid naming collision expose those elements with a Titanium prefix.

registerElement('titanium-tab-group', () => Ti.UI.createTabGroup);

Take a look at the platform components to see existing implementations of Vue.js components wrapping Titanium views.

Contributions

Open source contributions are greatly appreciated! If you have a bugfix, improvement or new feature, please create an issue first and submit a pull request against master.

Getting Help

If you have questions about the Vue platform on Titanium, feel free to reach out on Stackoverflow or the #titanium-vue channel on TiSlack. In case you find a bug, create a new issue or open a new JIRA ticket.

License

Apache 2