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.
ℹ️ 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.
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'} |
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/[email protected]"></script>That's all!! You can use environment-sticker component.
See detail on with Yarn / npm Section.
Give a ⭐️ if this project helped you!
This README was generated with ❤️ by readme-md-generator