Anonymous

Mod Creation/Essentials: Difference between revisions

From Melvor Idle
No edit summary
Line 369: Line 369:
== Creating Reusable HTML Components ==
== Creating Reusable HTML Components ==


coming soon
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 ==
91

edits