Overwriting the Resources Template

❗️
Advanced Concepts
The following page is for advanced users who understand HTML and are familiar with VueJS Slots.

❗️
VueJs Template Syntax
If you display resource content, you need to make sure that you are using the v-html directive to render it correctly.

Default Slot

All of the "optipub-elements" allow you to overwrite the way the information is displayed through the "default" slot.

<template v-slot:default="data">
  <!-- custom templating -->
</template>

<optipub-resources publication-id="1">
  <template v-slot:default="data">
    <ul v-for="resource in data.resources" :key="resource.id">
      <li>{{ resource.title }}</li>
    </ul>
  </template>
</optipub-resources>

Header

The "header" slot allows you to change the title of the element without affecting any of the data or default template underneath.

<template v-slot:header>
  <!-- custom templating -->
</template>

<optipub-resources publication-id="1">
  <template v-slot:header>
    <h1>Articles</h1>
  </template>
</optipub-resources>

Language

The "language" slot allows you to change the language dropdown. This slot is only visible when more than one language is available.

<template v-slot:language="data">
  <!-- custom templating -->
</template>

<optipub-resources publication-id="1">
  <template v-slot:language="data">
    <select :value="data.locale" @change="data.setLocale($event.target.value)">
      <option v-for="item in data.locales" :key="item.code" :value="item.code">
        {{ item.label }}
      </option>
    </select>
  </template>
</optipub-resources>

Resources

The "resources" slot allows for you to change the list of resources that is being rendered. This allows you complete control over the array of resources being rendered.

<template v-slot:resources="data">
  <!-- custom templating -->
</template>

<optipub-resources publication-id="1">
  <template v-slot:resources="data">
    <ul v-for="resource in data.resources" :key="resource.id">
      <li><a href="#">{{ resource.title}}</a></li>
    </ul>
  </template>
</optipub-resources>

Resource

The "resource" slot allows for you to change the layout of the resource without having to loop through the array.

<template v-slot:resource="data">
  <!-- custom templating -->
</template>

<optipub-resources publication-id="1">
  <template v-slot:resource="data">
    <a href="#">{{ data.resource.title}}</a>
    <p>{{ data.resource.description }}</p>
  </template>
</optipub-resources>

Image

The "image" slot allows for you to change all of the images. This gives you the potential to add watermarks, custom CSS properties, and more on just the images.

<template v-slot:image="data">
  <!-- custom templating -->
</template>

<optipub-resources publication-id="1">
  <template v-slot:image="data">
    <img :src="data.resource.thumbnail.path" :alt="data.resource.thumbnail.keywords">
  </template>
</optipub-resources>

Title

The "title" slot allows for you to make changes to just the resource title.

<template v-slot:title="data">
  <!-- custom templating -->
</template>

<optipub-resources publication-id="1">
  <template v-slot:title="data">
    <h2>{{ data.resource.title}}</h2>
  </template>
</optipub-resources>

Description

The "description" slot allows for you to make changes to the description of the resource.

<template v-slot:description="data">
  <!-- custom templating -->
</template>

<optipub-resources publication-id="1">
  <template v-slot:description="data">
    <strong>OptiPub -- </strong><p>{{ data.resource.description }}</p>
  </template>
</optipub-resources>

Content

The "content" slot allows for you to make changes to the formatting of the resource body. This slot is only visible when the show-content property is set.

<template v-slot:content="data">
  <!-- custom templating -->
</template>

<optipub-resources publication-id="1" show-content>
  <template v-slot:content="data">
    <div class="py-0" v-html="data.resource.content"></div>
  </template>
</optipub-resources>

Pagination

The "pagination" slot allows you to change the paginator. This slot is only visible when the pagination property is set.

<template v-slot:pagination="data">
  <!-- custom templating -->
</template>

<optipub-resources publication-id="1" pagination>
  <template v-slot:pagination="data">
    <!-- custom templating -->
  </template>
</optipub-resources>

Loader

The "loader" slot allows you to change the loading indicator. This slot is only visible while the resources are loading.

<template v-slot:loader>
  <!-- custom templating -->
</template>

<optipub-resources publication-id="1">
  <template v-slot:loader>
    <p>Loading resources...</p>
  </template>
</optipub-resources>

Default Error

The "default-error" slot allows you to change the message that is displayed when the element is missing required information.

<template v-slot:default-error>
  <!-- custom templating -->
</template>

<optipub-resources>
  <template v-slot:default-error>
    <p>Required information missing: Publication ID</p>
  </template>
</optipub-resources>