Quickly Add Image and Text Watermarks in Vue with vue-watermark

vue-watermark is a tiny yet customizable Vue component that makes it easy to overlay watermarks on images, videos, and other content.

It supports both image and text watermarks with control over styling like size, position, color, and more.

Ideal for r adding branding to portfolio sites, protecting shared media content, or overlaying textures to create stylish effects.

How to use it:

1. Install and import the vue-watermark component.

import { Watermark } from '@watermarkify/vue-watermark'

2. Wrap your content to the <Watermark />.

<Watermark :options="watermarkOptions">
  <div>Your Content Here</div>
</Watermark>

3. Customize the watermark.

const watermarkOptions = ref({
  width: null,
  height: null,
  content: null, // text watermarker
  image: null, // image watermarker
  gap: [20, 20],
  offset: [null, null],
  zIndex: 5,
  rotate: -20,
  font: {
    color: 'rgba(0,0,0,.2)',
    fontSize: 18,
    fontWeight: 'normal',
    fontStyle: 'normal',
    fontFamily: 'sans-serif',
  },
})

Preview:

Download Details:

Author: watermarkify

Live Demo: https://watermarkify.github.io/vue-watermark/

Download Link: https://github.com/watermarkify/vue-watermark/archive/refs/heads/develop.zip

Official Website: https://github.com/watermarkify/vue-watermark

Install & Download:

# Yarn
$ yarn @watermarkify/vue-watermark

# NPM
$ npm i @watermarkify/vue-watermark