VueWiki - Integrating Vue.js with Tiddlywiki

in #utopian-io6 years ago

Repository

https://github.com/Guitlle/vuewiki

image.png

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. You can also checkout the Sample Vue Tiddler. Checkout the documentation.

image.png

Technology Stack

This project is based on Tiddlywiki and Vue.js. Uiv 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

Sort:  

Thanks for the contribution, @elguille! Never used Tiddlywiki myself, but what you are saying about developers being more comfortable with certain packages/frameworks is definitely true, so it's good you are attending to that need. Also, including the examples in your post is great! One thing I'd like to point out is that it would be nice to include a little bit more information in your README, as it's currently pretty bare.


Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Thanks @amosbastian. I've been using the tiddlywiki for a few months and it has helped me a lot with quick notes. You're right, I focused on the docs readme but the github readme could use some more information.

Thank you for your review, @amosbastian!

So far this week you've reviewed 2 contributions. Keep up the good work!

Hey, @elguille!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Thanks, bot.

Well done, @elguille! You have a good project in hand.

Can I use Vue component in there too? (just like vuepress :))

Yes. You need to put the library in there and use it. I have already put Uiv which is a library of components. What components do you think would be useful?

Cool.
Maybe add Timezone and Countdown component 🤔

Hi @elguille!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Coin Marketplace

STEEM 0.36
TRX 0.12
JST 0.040
BTC 70839.13
ETH 3563.41
USDT 1.00
SBD 4.77