Global Plugins

There are a few available Global Plugins that we use in our components.

These plugins are available to all components and can be used to simplify common tasks.

The drawback is that all projects using the components must also use these plugins.

Please add any new Global Plugins to this page and consider before adding a new Global Plugin if it is really necessary to add it to the global scope.

Localization Plugin

The localization plugin is used to translate strings and localize numbers.

Example of using the localization plugin:

<template>
    <div>
        {{ $t('hello-world') }}
        {{ $n(1000) }}
    </div>
</template>

<script>
export default {
    mounted() {
        console.log(this.$t('hello-world'));
        console.log(this.$n(1000));
    },
};
</script>

Features Plugin

The features plugin is used to check if a feature is enabled in your component.

Example of using the features plugin:

<template>
    <div v-if="feature('new-feature')">
        New Feature
    </div>
</template>

<script>
export default {
    mounted() {
        console.log(this.feature('new-feature'));
    },
};

LocaleUri Plugin

The localeUri plugin is used to check if the website is a UK website or an international website.

Example of using the localeUri plugin:

<template>
    <div>
        <h1 v-if="isUkWebsite">Let's go Liverpool</h1>
        <h1 v-if="isInternationalWebsite">Forza Napoli</h1>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log(this.isUkWebsite);
        console.log(this.isInternationalWebsite);
    },
};
</script>