Use Anymod in a Vue.js project

Setup

To use mod with Vue.js, add the mod's tag to your HTML and mount Vue as usual:

<div id="demo">
  <!-- Card with top image -->
  <div id="anymod-aklnr"></div>
</div>
1
2
3
4
new Vue({
  el: '#demo'
})
1
2
3

Inside a custom Vue component

To use mods inside a custom Vue component, call Anymod.render() once Vue has mounted:

<div id="demo">
  <my-component></my-component>
</div>
1
2
3
// register
Vue.component('my-component', {
  template: '<div id="anymod-aklnr"></div>'
})

// create a root instance
new Vue({
  el: '#demo',
  mounted: function () {
    Anymod.render()
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

Example

Rendering multiple mods

You can render multiple mods the same way as a single mod, like so:

<div id="demo">
  <!-- Card with top image -->
  <div id="anymod-aklnr"></div>
  <!-- GitHub button -->
  <div id="anymod-oorka"></div>
  <!-- Team page -->
  <div id="anymod-dmkdn"></div>  
</div>
1
2
3
4
5
6
7
8
new Vue({
  el: '#demo',
  mounted: function () {
    Anymod.render()
  }
})
1
2
3
4
5
6

Re-rendering

You can call Anymod.render() as often as you'd like in your Vue.js component (or elsewhere). This method will not lead to an API call every time; if a mod has already been fetched once, Anymod.render() will use that data instead of making another API call.

TIP

See the section on Anymod.render for more.

Last Updated: 10/5/2018, 9:15:24 PM