@twicpics/vue

TwicPics integration with Vue.js

Showing:

Popularity

Downloads/wk

59

GitHub Stars

12

Maintenance

Last Commit

6mos ago

Contributors

2

Package

Dependencies

1

Size (min+gzip)

17.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

@twicpics/vue

npm version npm downloads License

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

Setup

  1. Add @twicpics/vue dependency to your project
yarn add @twicpics/vue
# or npm install @twicpics/vue
  1. 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>" />
NameDescriptionTypeDefaultRequired
srcAbsolute or relative path to an image.Stringtrue
widthSee ratio.Integerfalse
heightSee ratio.Integerfalse
ratioUnitless width/height values. You can either use ratio or width and height to set the aspect-ratio of your image. If both are used, ratio win. A squared image will be rendered by default.String1/1false
placeholderCan be preview, meancolor, maincolor or none.Stringpreviewfalse
stepSee TwicPics documentation for details.Integer10false
focusCan be auto or coordinates - see TwicPics documentation for details.String10false
transitionWhether or not to load images with a fade in effect.Booleantruefalse
transitionDurationDuration of the transition effect.String400msfalse
transitionTimingFunctionCSS timing function applied to the transition effect.Stringeasefalse
transitionDelayTransition delay of the transition effect.String0msfalse
altAlt attribute contentStringImage name without extentionfalse

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

Edit TwicPics Vue

NuxtJS

This library is also available as a NuxtJS module.

License

MIT License

Copyright (c) TwicPics

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100