Vue Env Notify

A VueJS package to let you know the environment you are currently interacting with in the browser.

yarn add @sten-agency/vue-env-notify 

# npm i @sten-agency/vue-env-notify

Setup

Add id="favicon" to your link tag for favicon.

import Vue from 'vue'
import vueEnvNotify from "@sten-agency/vue-env-notify";

Vue.use(vueEnvNotify, {
  env: process.env.NODE_ENV,
  trackNetwork: true,
  offlineFavicon: null,
  envAssets: {
    development: null,
    staging: null,
    production: null,
  },
});

Options

Name | Type | Description ---- | ---- | ----------- env | String | Set the NODE_ENV enviroment variable trackNetwork | Boolean | Set to true or false offlineFavicon | String | URL of your offline favicon envAssets | Object | URL for the different environments

Functions

Name | Usage ---- | ---- setTitle | vueEnvNotify.setTitle(process.env.NODE_ENV, this.$route.meta.title);

To use page title features, follow the step below

In your App.vue file

1. Import vue-env-notify - import vueEnvNotify from "@sten-agency/vue-env-notify";
2. Add the code below to the mounted hook

vueEnvNotify.setTitle(process.env.NODE_ENV, this.$route.meta.title);

3. Also watch for changes on $route(to)

$route(to) {
  vueEnvNotify.setTitle(process.env.NODE_ENV, to.meta.title);
},

and last don't forget to add meta.title to your route file like below.

meta: {
  title: "Home Page", 
},