Mod Creation/Essentials: Difference between revisions

Mod Creation/Essentials (view source)

Revision as of 02:18, 17 October 2022

2,080 bytes added , 17 October 2022

→‎Creating Reusable HTML Components

Buttchouda

89

edits

@@ Line 369: / Line 369: @@
 == 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 ==