Documentation

Nuxt

Copy link to headline:@sit-onyx/nuxt

npm package
(opens in a new tab)

.

Copy link to headline:Changelog

A full changelog can be found here.

Copy link to headline:Features

Copy link to headline:Quick Setup

Install the module in your Nuxt(opens in a new tab) application with one command:

If you are also using the @nuxtjs/i18n(opens in a new tab) module, make sure to move @sit-onyx/nuxt before @nuxtjs/i18n.

Afterwards you're able to just use all onyx components inside your app and the global styles will automatically be set up for you.

Copy link to headline:Integration with @nuxtjs/i18n

onyx features built in translations and the Nuxt module extends on that by offering an out of the box integration with @nuxtjs/i18n(opens in a new tab). If your Nuxt project uses both modules, onyx will automatically detect it and use @nuxtjs/i18n to handle all the translations. This gives you all the bells and whistles of vue-i18n like lazy loading of translations.

Also, the onyx locales will automatically be registered depending on which locales you are using / defining in your project.

warning You must register the @sit-onyx/nuxt before @nuxtjs/i18n. Otherwise the translations for onyx won't be picked up by @nuxtjs/i18n.

Copy link to headline:Setup

In order for the onyx module to detect which locales to register, you must define your locales either by defining the code as IETF's BCP47 name (e.g. en-US, de-DE etc.) or by providing the language property. So any of the following configs will work correctly:

Copy link to headline:Customizing onyx translations

It might happen that a certain translation provided by onyx doesn't fit your project. As project specific translations will always overwrite the defaults from onyx, you can easily provide your own. Just define the key of the onyx translation inside your own messages scoped to the key "onyx". E.g. this example will remove the default brackets around the translation for "optional":

For all available translations / keys please see: i18n

Copy link to headline:Extending onyx translations

Maybe your project requires a language not supported by onyx. In this case you may provide translations for the keys within the "onyx" scope of your messages.

In case you'd like to use the messages of an existing onyx language, you can import it into your messages and overwrite them as you wish:

For more examples on how to customize your projects languages with support for onyx, feel free to take a look at one of our tests: @sit-onyx/nuxt i18n test fixture(opens in a new tab)

Onyx is open source, so if you're missing translations for a language feel free to contribute them so other projects can benefit from it as well.