Vue I18n Phrase In-Context Editor

# API

# 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 (opens new window).

# Constructor

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

TIP

options argument is assigned to the component using config setter

# Properties

WARNING

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.

TIP

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 (opens new window). When installing the plugin, instance of this class is being used as Vue I18n's formatter property (opens new window).

# 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. Further details here (opens new window).

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;
sanitize?: (content: string) => string;

← Examples →