# VueI18nPhrase

The VueI18nPhrase class is the first-class citizen of our library and the main point of interaction between the Vue I18n Phrase In-Context Editor and the Vue I18n.

# Constructor

constructor( vueI18n: Vue['$i18n'], options: VueI18nPhraseOptions )


options argument is assigned to the component using config setter

# Properties

  • # vueI18n: Vue['$i18n']

  • # config: PhraseConfig

  • # phraseEnabled: boolean - property controlling the status of the In-Context Editor. Propagates the change to globalThis.PHRASEAPP_ENABLED.


If the In-Context Editor is not yet loaded, changing phraseEnabled to true will trigger loading of the minified js source of the In-Context Editor.


Whenever disabled, the Vue I18n Phrase In-Context Editor will try to bring back the original Vue I18n formatter. For more information on how the formatters are being handled, please head to the introduction.

# VueI18nPhraseOptions

Partial type of the PhraseConfig with only 2 properties required: phraseEnabled and projectId.

# VueI18nPhraseFormatter

Implements Formatter interface. When installing the plugin, instance of this class is being used as Vue I18n's formatter property.

# Constructor

constructor( options: VueI18nPhraseFormatterOptions )

# Properties

  • # prefix: string - prefix added to the interpolated message.

  • # suffix: string - suffix added to the interpolated message.

# Methods

  • interpolate( message: string, values: unknown[], path: string ): string[]

# VueI18nPhraseFormatterOptions

prefix: string
suffix: string

# PhraseConfig

Type describing all possible Phrase In-Context Editor config options.

phraseEnabled: boolean;
baseUrl: string;
profileUrl: string;
apiBaseUrl: string;
oauthEndpointUrl: string;
helpUrl: string;
logoUrl: string;
stylesheetUrl: string;
version: string;
priorityLocales: string[];
projectId: string;
branch: string;
ajaxObserver: boolean;
debugMode: boolean;
prefix: string = '{{__';
suffix: string = '__}}';
autoLowercase: boolean;
forceLocale: boolean;
loginDialogMessage: string;
autoLogin: {
    perform: boolean;
    email: string;
    password: string;
sso: {
    enabled: boolean;
    enforced: boolean;
    provider: string;
    identifier: string;
fullReparse: boolean = true;