In this example, we'll build a simple mod with Vue.js.

TIP

There is a Vue mod that you can clone to start quickly. This example shows how to build up this Vue mod from scratch.

1. Start with a blank mod

Create or clone a blank mod to get started.

2. Add the Vue.js script

Click the settings gear in the JavaScript panel. Then from the dropdown menu, click Vue.js to add the Vue.js script.

TIP

If you're using a bundle build with Vue, you can add the URL to your bundle instead of the Vue script used here.

3. Add a field called message

Click the Fields tab in the settings window, and add a field called message with type set to Simple text

Click Add field and then click on the link for the message field. Add some text and click Publish.

4. Write your Vue mod

Now you're ready to build the mod. Add the following code to the mod's JS panel:

let app = new Vue({
  el: mod.el,
  data() {
    return {
      message: mod.data.message
    }
  }
})
1
2
3
4
5
6
7
8

TIP

The mod's DOM element is available in the JS panel as mod.el (line 2).

Our message field is available in the JS panel as mod.data.message (line 5).

Now in the HTML panel, add some code to insert the data:

<h2>{{ message }}</h2>
1

WARNING

When using Vue's curly brace syntax ({{ }}), be sure the mod HTML panel is set to "HTML (Plain)" and not to "Handlebars".

5. Style your mod

You can still style your mod as usual. Add the following to the CSS panel:

h2 {
  color: blue;
}
1
2
3

6. Save your mod

When you click Save, your mod is automatically pre-compiled and displayed. It should look like the example below:

Now you're ready to build any kind of mod you want using Vue.js.

Last Updated: 9/18/2018, 10:29:38 PM