TwicPics Components + Nuxt2

This project is a demonstration project of TwicPics Components using Nuxt 2.

How to build

Using npm

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run serve

# build for production
$ npm run build

Using yarn

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production
$ yarn build

Overview

What is TwicPics?

TwicPics is a Responsive Image Service Solution (SaaS) that enables on-demand responsive image generation.

With TwicPics, developers only deal with high-resolution versions of their media while end-users receive optimized, perfectly sized, device-adapted versions delivered from a server close to them.

TwicPics acts as an image proxy. It requests your master image, be it on your own web server, cloud storage or DAM, then generates a device-adapted version with best-in-class compression, delivered directly to the end-user from the closest delivery point available.

What is 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.

Basically, TwicPics components replace img and video tags. They greatly and transparently optimize your CLS by providing LQIP (Low-Quality Image Placeholders) and Lazy Loading out of the box.

Simply replace this:

<img src="https://assets.twicpics.com/examples/football.jpg" />

With this:

<TwicImg src="https://assets.twicpics.com/examples/football.jpg" />

Thanks to the open source TwicPics Components, delivering responsive images in your Nuxt 2 projects has never been easier.

TwicPics configuration

Requirement

The only requirement is to have a TwicPics account. If you don't already have one, you can easily create your own TwicPics account for free.

Configuring @twicpics/components

TwicPics components for Nuxt2 comes as an Nuxt2 Module and is configured as such.

An example of configuration is set within nuxt.config.js file.

All you have to do is set your configuration options to the desired values (see documentation).

Examples

All the examples proposed in this project are located in the pages directory. Feel free to inspire yourself from these different use cases to unleash the power of TwicPics in your own projects.

Questions and feedback

Fell free to submit an issue or to ask us anything by dropping an email at support@twic.pics.

Licence