Hi Tony. You are right, this definitely requires the user to learn about vue.js.
This is limited to be used inside a tiddler. The tiddler content is the vue.js template. Of course, you cannot have javascript or CSS in a single vuejs tiddler. The default vuewrapper initializes a vue app with the tiddler fields in the "self" namespace. It binds the fields so all changes are synced, between TW and the vue app. It also allows you to import other tiddlers data. I want to add support for lists with TW filters and data tiddlers with indexes and json. That limitations are the reason to include the library of components UIV which uses Bootstrap. This way you have some functionalities without writing javascript and css, such as modals, tooltips, buttons, radio buttons, date picker, dropdowns, and others. Ceck out the UIV documentation https://uiv.wxsm.space/getting-started . I am thinking on changing uiv for another libray (suggestions are welcome). By having a library of components you can avoid writing javascript logic. You could add javascript behaviour by adding a vue component as a javascript library. I am putting this in the roadmap. So you will be able to write a vue component with special functionalities that are not possible to do without custom javascript. However this would be way more advanced. For now I think the main applications for this is having javascript expressions inside tiddlers. I remember I posted a while ago a widget that allowed you to update a field with a math expression and required math.js plugin. I think things like adding or multiplying two fields should not be that hard. In vue.js it is quite simple {{ self.fieldA * self.fieldB + self.fieldC }}. Or, say, hiding a div when some condition is met: <div v-if="self.fieldX > 10 "> But right now the TW WikiText syntax for this is more complicated than it needs to be or is just not possible (yet). Right now you can't transclude. It could be possible, as TW makes this easy, but it needs more thought and work. Perhaps I'll add support for that in the future or someone else that needs that functionality sends a pull request. The application for this that I have in my mind is more like a behavior similar to excel, where you can easily put formulas and manipulate the data in the spreadsheet. This definitely needs more examples. If you come up with nice example ideas, I can write and add them to the documentation so people have a better idea of what can be done. El domingo, 9 de septiembre de 2018, 23:55:39 (UTC-6), TonyM escribió: > > Guille, > > Thanks for contributing to the community. This looks interesting but as I > am currently not a javasctipt developer (many are not, in the TiddlyWiki > community) would you be able to give some more concrete examples of using > vue.js especially in tiddlywiki itself?. Reviewing vue and looking into the > bootstrap css and related technology in the plugin, I can see a lot of > promise and capability but there seems to be a lot to learn before we could > even try to understand when and how it complements tiddlywiki. > > How do you expect to use it in tiddlywiki, can you give examples? > > How would vue.js be used differently in Tiddlywiki to the normal > implementation documented at https://vuejs.org/ > > - What parts of the HTML page settings are pre-configured for us in > tiddlywiki? > - Which parts must OR can be coded into these special tiddlers type > application/vuejs-uiv > - Is there any level of integration between these tiddlers and objects > and content elsewhere in tiddlywiki ? > - Transclude content? > - Use filters etc...? > - When would one use vue instead of TiddlyWiki? > - How can we adapt vue code samples and snipits to work in tiddlywiki? > > We do not need all the answers imediatly just a bit more so we can decide > when and if we could make use of vue > > I am a strong believer tiddlywiki could be an excellent platform to host > such javascript libraries but it would be nice to understand the > limitations or differences when using them in the tiddlywiki "platform" and > not only inform the users but also the developers such that they may add to > tiddlywiki features to help capitalise on such libraries more effectively > and even simplify the process you used for this adaption. > > If every javascript solution out there could leverage tiddlywiki to host > and provide interactive demos we would all benefit. > > Thanks > Tony > > On Monday, 10 September 2018 14:56:34 UTC+10, Guille Rmo wrote: >> >> Hi. I have been working on integrating vue.js to TW. I know we alredy >> have the wikitext dynamic content but I really miss having a powerful >> frontend tool such as vue.js. TW wikitext is awesome and it is great that >> the whole GUI is written in that, but I usually find myself struggling with >> the way of doing things with wikitext. Therefor, I have been putting some >> effort on this. Maybe it is not good for small snippets (wikitext is great >> for that sort of thing). I think this would be very helpful for complex >> GUIs contained in a single tiddler. >> >> Demo: https://rawgit.com/Guitlle/vuewiki/build/build/docs.html >> Repo: https://github.com/Guitlle/vuewiki >> >> This may still have some bugs and I still want to integrate lists and >> other componets. >> >> >> -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/778403d7-dbe3-4b9a-a96b-f06fa67dcd16%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
