Vue3 plugin + composition api

Question

According documentation I made a helpres.ts plugin file with translate method which I would like to use inside components.

import { useAppStore } from '@/store/app'

export default {
    install: (app) => {

        const appStore = useAppStore()

        app.config.globalProperties.$translate = (translations, key) => {

            let defaultTranslation = translations[key] ? translations[key][0] : ''  // First item as default value or ''

            const translation = translations.find((item, key) => {
                if ( item[key] && item[key].locale == appStore.defaultLang.val ) {
                    return true;
                }
            });

            return translation ? translation : defaultTranslation
        }
    }
}

Then I register plugin in main.ts this way

import helpers from './plugins/helpers';
app.use(helpers)

But documentation does not mention how to use plugins inside components. How can I call helpres.translate inside the code and inside templates?

Answer 1

1. globalProperties

To access a function from a plugin in templates, use:

const myPlugin = {
  install: (app) => {
    // inject a globally available $translate() method
    app.config.globalProperties.$translate = funcTranslate
    ...
  }
}

and use in template:

<p>{{ $translate(testStore, "one") }}</p>

2. provide/inject

To access a function from a plugin in component code, use:

const myPlugin = {
  install: (app) => {
    // allow the application to have access to the function translate
    app.provide('translate', funcTranslate)
  }
}

and use in code component:

setup() {
    // inject global function
    const translate = inject("translate");

    console.log(translate(testStore, "two"));
  }

Full example of using the plugin:

const {
  reactive,
  createApp,
  inject
} = Vue;

// test store
const testStore = reactive({
  one: "One",
  two: "Two"
});

// function for translate
const funcTranslate = (translations, key) => {
  return translations[key];
}

// vue plugin
const myPlugin = {
  install: (app) => {
    // inject a globally available $translate() method
    app.config.globalProperties.$translate = funcTranslate

    // allow the application to have access to the function translate
    app.provide('translate', funcTranslate)
  }
}

const app = createApp({
  setup() {
    // inject global function
    const translate = inject("translate");

    console.log(translate(testStore, "two"));

    return {
      testStore
    }
  }
})

app.use(myPlugin);

app.mount('#app');

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <p>{{ $translate(testStore, "one") }}</p>
</div>