91
edits
Mod Creation/Essentials: Difference between revisions
From Melvor Idle
→Creating Reusable HTML Components
Buttchouda (talk | contribs) No edit summary |
Buttchouda (talk | contribs) |
||
| Line 369: | Line 369: | ||
== Creating Reusable HTML Components == | == Creating Reusable HTML Components == | ||
Melvor Idle ships with [https://github.com/vuejs/petite-vue petite-vue] for mods to use to create reusable HTML components. You can use documentation from the [https://github.com/vuejs/petite-vue official GitHub page] to assist in using the <code>petite-vue</code> library. However, there are some helper functions for making it easier for mods to interact with. | |||
=== Import HTML Templates === | |||
Using either the <code>manifest.json</code>'s <code>"load"</code> property or the context API's <code>loadTemplates</code> method, you can import all <code><template></code> elements from an HTML file into the document body. These will then be available for use when creating a component. | |||
If you have the following HTML file: | |||
<nowiki><!-- templates.html --> | |||
<template id="counter-component"> | |||
<span class="text-light">{{ count }}</span> | |||
<button class="btn btn-secondary" @click="inc">+</button> | |||
</template></nowiki> | |||
You would import the template in one of the following two ways: | |||
<nowiki>// manifest.json | |||
{ | |||
"load": "templates.html" | |||
}</nowiki> | |||
''or'' | |||
<nowiki>// setup.mjs | |||
export function setup({ loadTemplates }) { | |||
loadTemplates('templates.html'); | |||
}</nowiki> | |||
=== Defining a Component === | |||
Using the [https://github.com/vuejs/petite-vue#components petite-vue documentation on components], you should define each component as a function. This component should define its template selector using the <code>$template</code> property, and then any additional properties or methods that the rendered component will use. For example: | |||
<nowiki>function Counter(props) { | |||
return { | |||
$template: '#counter-component', | |||
count: props.count, | |||
inc() { | |||
this.count++; | |||
} | |||
}; | |||
}</nowiki> | |||
=== Creating a Component Within the UI === | |||
Now that your template is loaded and you have a component defined, you can use the helper function <code>ui.create</code> to create an instance of the component within the UI. | |||
<nowiki>// Create a counter component at the bottom of the Woodcutting page | |||
ui.create(Counter({ count: 0 }), document.getElementById('woodcutting-container'));</nowiki> | |||
== Storing Data == | == Storing Data == | ||
