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

Install & Download:

# Yarn
$ yarn @watermarkify/vue-watermark
# NPM
$ npm i @watermarkify/vue-watermark

Description:

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:

Image and Text Watermarks

Changelog:

v0.0.7 (04/08/2024)

  • Update

Add Comment