Skip to content

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

License

Notifications You must be signed in to change notification settings

doyaaaaaken/vue-environment-sticker

Repository files navigation

Welcome to vue-environment-sticker 👋

Version License: Apache--2.0

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);

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>

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

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

Show your support

Give a ⭐️ if this project helped you!


This README was generated with ❤️ by readme-md-generator

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published