### Repository
https://github.com/Guitlle/vuewiki

<div class="pull-right">

![image.png](https://ipfs.busy.org/ipfs/QmewePu3uUCS1BQrGCyEq7L9ySpXMyXHzhUvdtcgBjn8jf)


</div>

## VueWiki
### What is the project about?
This plugin integrates Tiddlywiki system with Vue.js framework. It allows you to have tiddlers of type "application/prs.vuejs" which are rendered by taking the text content as the template and the rest of the fields are bound to the Vue app. You can import external tiddlers and access their fields within the template. The binding between the tiddler store and the vue.js app is done dynamically and thus makes it necessary to work around un modifiable object properties. It includes three helper functions to help with this limitation: 

* **objectSet** - Sets a value in a object property. 
* **arrayPush** - Pushes a value to an array and updates the corresponding binding.
* **arraySplice** - Allows you to delete items from an array and insert an item if necessary.

The rationale for this project is that Tiddywiki's Wikitext syntax is limited. It is quite powerful and a good demonstration of this fact is that the tiddlywiki GUI is written in Wikitext. However, many frontend developers like me are more confortable with Vue.js and similar MVC frameworks. Wikitext is missing some features and even though Tiddlywiki team can reinvent the wheel adding features, I think the effort to integrate Vue.js is worth it. 

I have made a simple demonstration of what can be done using this simple integration with this [Phonebook app](https://rawgit.com/Guitlle/vuewiki/build/build/docs.html#Phonebook). You can also checkout the [Sample Vue Tiddler](https://rawgit.com/Guitlle/vuewiki/build/build/docs.html#Sample%20Vue%20Tiddler). Checkout the [documentation](https://rawgit.com/Guitlle/vuewiki/build/build/docs.html). 

![image.png](https://ipfs.busy.org/ipfs/QmQqUYA8wDb2hbpxcggGEbzXtSkXcnWuh9yntXDjp6vhWr)


### Technology Stack
This project is based on Tiddlywiki and Vue.js. [Uiv](https://uiv.wxsm.space/getting-started) is also included. It is a library of Vue.js components and it depends on Bootsrap 3. Uiv has been incuded to provide basic UI components and avoid as much as possible the need to write custom javascript for simple UI functionality.

### Roadmap
Next steps are:

* Import Tiddlywiki lists into the Vue.js app data. 
* Handle JSON and Indexed data tiddlers.
* Make more examples to facilitate adoption of the plugin.

### How to contribute?
Contributions are welcome. For now this project could use more examples and more generic UI components. Thus, you could contribute to Uiv directly and the latest version could be updated in this project. You can also help finding bugs and opening issues in the Github repository.

### GitHub Account
https://github.com/Guitlle