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 setup lang="ts">
  import { useI18n } from "@inertia/scripts/composables/useI18n";
  import { onMounted } from "vue";

  const { t, n } = useI18n();

  onMounted(() => {
    console.log(t("hello-world"));
    console.log(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 setup lang="ts">
import { useFeature } from '@inertia/scripts/composables/useFeature.js';
import { onMounted } from 'vue';

const { getFeature } = useFeature();

onMounted(() => {
    console.log(getFeature('new-feature'));
});

LocaleUri Plugin

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

Example of using the localeUri plugin:

<template>
    <div>
        <h1 v-if="localeUri === 'en'">Let's go Liverpool</h1>
        <h1 v-if="localeUri === 'it'">Forza Napoli</h1>
    </div>
</template>

<script setup lang="ts">
import { useCurrentLocale } from '@inertia/scripts/composables/useCurrentLocale';
import { onMounted } from 'vue';

const { localeUri } = useCurrentLocale();
</script>