Vue-environment-sticker NPM

Vue.js component which shows a sticker displaying current environment name (e.g. 'demo', 'stg')

You can make it easier to understand which environments you are accessing (staging? demo? production?) and reduce incidents.

✨ Demo

CodePen

Image of Demo page

ℹ️ Theare are only few themes available. I'll waiting your pull requests for the new COOL themes. See HOW_TO_DEVELOP.md if you're interested in it.

Usage

with Yarn / npm

Install it.

yarn add vue-environment-sticker

# or if you use npm
# `npm install vue-environment-sticker`

Then, import and register the component.

import Vue from "vue";
import EnvironmentSticker from "vue-environment-sticker";

Vue.component("environment-sticker", EnvironmentSticker);

The component itself does not include any CSS. You'll need to include it separately:

import 'vue-environment-sticker/dist/vue-environment-sticker.css';

Alternatively, you can import the scss for complete control of the component styles:

@import "vue-environment-sticker/dist/vue-environment-sticker.css";

That's all!! You can use environment-sticker component like below.

<body>
  <div class="content-wrapper>
   <h1>Demo page</h1>
  </div>
  
  <EnvironmentSticker
      label="STAGING"
      theme="SQUARE"
  />
</body>

These are available props. (all props are optional.)

name	type	default value	description
label	String	`DEMO`	label which shows environment name
position	String	`BOTTOM_RIGHT`	sticker position. Available values: `BOTTOM_RIGHT` / `BOTTOM_LEFT`
theme	String	`SQUARE`	The appearance of the label. Available values: `SQUARE` ℹ️ Theare are only few themes available. I'll waiting your pull requests for the new COOL themes. See HOW_TO_DEVELOP.md if you're interested in it.
containerStyles	Object	`{}`	CSS styles for the container. This is bound as inline style. e.g. `{padding: '4px'}`
labelStyles	Object	`{}`	CSS styles for the label. This is bound as inline style. e.g. `{fontSize: '12px', color: 'blue'}`

via CDN (directly install in the browser)

you can install it directly in the browser through CDN.

<!-- include VueJS first -->
<!--<script src="https://unpkg.com/vue@latest"></script>-->

<!-- use the latest vue-environment-sticker release -->
<script src="https://unpkg.com/vue-environment-sticker@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-environment-sticker@latest/dist/vue-environment-sticker.css">

<!-- or point to a specific vue-environment-sticker release -->
<script src="https://unpkg.com/vue-environment-sticker@0.2.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-environment-sticker@0.2.0/dist/vue-environment-sticker.css">

That's all!! You can use environment-sticker component.
See detail on with Yarn / npm Section.