@twicpics/vue

TwicPics integration with Vue.js. This library is also available as a NuxtJS module.

⚠️ Deprecation warning ⚠️

This package has been deprecated in favor of TwicPics Components.

TwicPics Components is a collection of web components that make it dead easy to unleash the power of TwicPics in your own projects and using the framework of your choice.

👉 Check the documentation

Setup

1. Add @twicpics/vue dependency to your project

yarn add @twicpics/vue
# or npm install @twicpics/vue

2. Import components

import Vue from "vue";
import VueTwicpics from "@twicpics/vue";
import "@twicpics/vue/dist/vuetwicpics.css";

Vue.use(VueTwicpics, {
  // Your TwicPics custom 
  domain: "https://sub-domain.twic.pics",
  // Optional settings
  defaultParams: {
    ...
  }
});

Options

domain (required)

This is your very own TwicPics domain.

defaultParams (optional)

anticipation

• Default value: 0.2 (any value that is not a number will be ignored)

TwicPics will lazy-load images by default. To avoid too abrupt a transition with elements appearing into view and then images very obviously loading afterwards, TwicPics will "anticipate" lazy loading by a factor of the actual viewport. This behavior is controlled by this setting.

maxDpr

• Default value: 2 (any value that is not a number will be ignored)

TwicPics will take the Device Pixel Ratio of the current device into consideration when determining the sizes of images to load. By default, it will not take a DPR greater than 2 into consideration. If the DPR of the device is higher than 2, TwicPics will assume it to be 2. So you can lower it to 1 or be more permissive (for instance by setting it to 3 or 4).

step

• Default value: 10 (any value that is not a number will be ignored)

To avoid requesting too may variants of the same image, TwicPics will round the width of images to the closest multiple of step. The height will then be computed in order to respect the original aspect ratio.

Usage

TwicImg component

<twic-img src="<image-path>"
          width="<integer>"
          height="<integer>"
          placeholder="<none|preview|meancolor|maincolor>"
          ratio="<ratio>"
          step="<integer>"
          focus="<auto|coordinates>"
          transition="<boolean>" />

Example

<template>
  <main>
    <twic-img
      src="/my-image.jpg"
      ratio="16/9"
      step="100"
      placeholder="preview"
      alt="my image" />
  </main>
</template>

<script>
export default {

}
</script>

Demo

NuxtJS

This library is also available as a NuxtJS module.

License

MIT License

Copyright (c) TwicPics