Use AnyMod in a Vue.js project

Setup

To use mod with Vue.js (opens new window), 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>

new Vue({
  el: '#demo'
})

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>

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

// create a root instance
new Vue({
  el: '#demo',
  mounted: function () {
    AnyMod.render()
  }
})

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>

new Vue({
  el: '#demo',
  mounted: function () {
    AnyMod.render()
  }
})

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.