Install the components:
$ yarn add seng-components
In your Vue entry file import the library
import 'seng-components';
Because the components are registered globally you can use the components out of the box in your own components.
SengLazy makes it possible to render it's children when the content is in the view.
<template>
<div class="comp">
<h2>Example</h2>
<SengLazy>
<img src="example.png" alt="ex" />
</SengLazy>
</div>
</template>
In the example above is the image only rendered when the image is actually in view. The component works with the Intersection Observer API. The options found in the on MDNdocs can be passed as props to the components.
SengImage makes it easier to create responsive images that respond to breakpoints and to the network speed of the client.
<template>
<div class="comp">
<h2>Example</h2>
<SengImage
:src="require('path/to/image.jpg')"
:normal="require('path/to/image@2.jpg')"
:large="require('path/to/image@3.jpg')"
:breakpoints="{
normal: '375px',
large: '768px',
}"
/>
</div>
</template>
If you want to use WebP you need to install a plugin in WebPack. Plugin download and install instructions.
yarn install
yarn run serve
yarn run build
yarn run lint