gflammia
gflammia's Achievements
0
Reputation
-
Hello, This is interesting, How would one go about creating MuCows widgets from individual components created via React or VueJS? Is it possible to combine such individual components into a whole page in Muse, and edit the style visually of the whole page? For example, in VueJS, we typically program in Babel and compile a bundle.js file via webpack that includes the necessary javascript code required by the Vue application and all the components for the page. I can see how we can add a "Required Runtime" Mucows widget that includes JS and CSS code common to all Vue components in the <head> and near the </body> tag, and that would take care of the JS runtime required by all components (the vue.js, the css common to all components). But what about turning an individual Vue (or React, or Angular) component library into a series of MuCow XML files, leaving the design of a web page to Muse? For example, before compilation by Webpack, each Vue component has three sections: <template> has valid HTML, with mustache syntax for rendering computed data. Should a variation of that <template> body be included in the <PageItemHTML> tag of a MuCows file? or simply the "instance" code, which would look like this: <my-component directives data-binding-attributes></my-component> ? <script> is written in Babel, and usually webpack adds it into a bundle.js with all the other components of the app, when I compile the entire web page as a whole. <style> is the css style for the items in my component. I wonder, perhaps there is a way for webpack to compile one Vue component at the time (not the page as a whole) and fill in the appropriate slots in a MuCows XML file? Would the MuCows XML file look something like this? <PageItemHTML> <![CDATA[ <my-component directives binding-attributes></my-component> ]> </PageItemHTML> <BodyEndHTML> <![CDATA[ <script src="dist/my-component-bundle.js"></script> ]> </BodyEndHTML> But then what about the visual editing and manipulation of the style <template> and <style> sections? I would like to let users edit as much visual elements of my <template> in Muse, is that possible? <template> <div class="my-component"> <h2>{{ message }}</h2> <ul> <li v-for="item in mylist"> {{ item }} </li> </ul> </div> </template> <script> module.export = { data: function() { return { message: "This is My List" }; } methods: { /* event handlers... */ }, computed: { mylist: function() { return [ "one" , "two" , "three" ] }, } </script> <style> .my-component h2 { /* css rules */ } .my-component ul { } .my-component li { } </style>