scripts aren't working with $.gettext, only with the useGettext hook

[nanoander]

Issue: after running vue-gettext-extract, the expected pot and po files are created, but they have not the translation strings when using $.gettext in templates. It works when using the useGettext hook tho.

This works:

<script setup lang="ts">
import { useGettext } from 'vue3-gettext';
...
const { $gettext } = useGettext();
...
</script>
<template>
  <span>{{ $gettext('Some text...') }}</span>
</template>

but this doesn't:

<template>
  <span>{{ $.gettext('Some text...') }}</span>
</template>

Details:

"vue": "3.2.33", "vue3-gettext": "2.2.3"

App setup

import { createGettext } from 'vue3-gettext';
import translations from './i18n/translations.json';

const gettext = createGettext({
  availableLanguages: {
    en: 'English',
    es: 'Spanish',
  },
  defaultLanguage: 'en',
  translations: translations,
});

const app = createApp(App);
app.use(gettext);
app.mount('#app');

[lzurbriggen]

@nanoander I'm a bit confused, but here are some pointers:

• You should be able to use {{ $gettext('text') }} in templates without any imports (use useGettext only if you need gettext in your script block). I'm not sure where you got $.gettext('text') from, that won't/shouldn't work.
• the extraction only works for functions with the exact names $gettext etc. (see extraction script).

At some point I may make the extract script customizable so you can define your own function names/tokens, but I can't promise anything atm.