Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@nuxtjs/i18n
Advanced tools
@nuxtjs/i18n is a Nuxt.js module that provides internationalization (i18n) support for your Nuxt.js applications. It allows you to easily add multilingual support to your application, manage translations, and handle locale switching.
Basic Setup
This code demonstrates the basic setup of the @nuxtjs/i18n module in a Nuxt.js project. It configures two locales (English and French) and sets English as the default locale. It also provides translation messages for the 'welcome' key in both languages.
{
"modules": [
"@nuxtjs/i18n"
],
"i18n": {
"locales": [
{ "code": "en", "name": "English" },
{ "code": "fr", "name": "Français" }
],
"defaultLocale": "en",
"vueI18n": {
"fallbackLocale": "en",
"messages": {
"en": { "welcome": "Welcome" },
"fr": { "welcome": "Bienvenue" }
}
}
}
}
Locale Switching
This code demonstrates how to switch between locales in a Nuxt.js component using @nuxtjs/i18n. The $t function is used to translate the 'welcome' key, and the $i18n.setLocale method is used to change the current locale.
<template>
<div>
<p>{{ $t('welcome') }}</p>
<button @click="$i18n.setLocale('en')">English</button>
<button @click="$i18n.setLocale('fr')">Français</button>
</div>
</template>
Dynamic Route Localization
This code demonstrates how to configure dynamic route localization with @nuxtjs/i18n. It maps the root path ('/') to '/accueil' for the French locale, allowing for localized URLs.
{
"pages": {
"index": {
"en": "/",
"fr": "/accueil"
}
}
}
vue-i18n is a powerful internationalization plugin for Vue.js. It provides similar functionalities to @nuxtjs/i18n but is not specifically tailored for Nuxt.js. It requires more manual setup when used with Nuxt.js compared to the seamless integration provided by @nuxtjs/i18n.
react-i18next is a popular internationalization library for React applications. It offers similar features such as translation management and locale switching. However, it is designed for React and not directly compatible with Nuxt.js, which is based on Vue.js.
next-i18next is an internationalization library for Next.js, a React framework. It provides similar functionalities to @nuxtjs/i18n but is specifically designed for Next.js applications, making it a better fit for React-based projects.
I18n module for Nuxt
The i18n module for Nuxt 3
If you would like to use the stable version for Nuxt 2, please see the v7
branch
devDependencies
with your package manager:# Using npm
npm install @nuxtjs/i18n --save-dev
# Using yarn
yarn add --dev @nuxtjs/i18n
# Using pnpm
pnpm install -D @nuxtjs/i18n
@nuxtjs/i18n
to the modules
section of nuxt.config.ts
{
modules: [
'@nuxtjs/i18n',
],
}
We provide the Edge Release Channel nuxt i18n module, like Nuxt3
Nuxt i18n module is undergoing commits, improvements and bug fixes. You can opt-in to be the first to test it before the next release.
Update nuxt i18n module dependency inside package.json
:
{
"devDependencies": {
-- "@nuxtjs/i18n": "^8.0.0"
++ "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge"
}
}
Remove lockfile (package-lock.json
, yarn.lock
, or pnpm-lock.yaml
) and reinstall dependencies.
Update nuxt i18n module dependency inside package.json
:
{
"devDependencies": {
-- "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge"
++ "@nuxtjs/i18n": "^8.0.0"
}
}
Keep in mind that not all features are currently supported yet and some things might be broken.
#i18n
channel)MIT License - Copyright (c) Nuxt Community
v8.1.0 (2024-02-08T06:14:48Z)
This changelog is generated by GitHub Releases
localePath
- by @BobbieGoede in https://github.com/nuxt-modules/i18n/issues/2759 <samp>(d6874)</samp>FAQs
Internationalization for Nuxt
The npm package @nuxtjs/i18n receives a total of 186,876 weekly downloads. As such, @nuxtjs/i18n popularity was classified as popular.
We found that @nuxtjs/i18n demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.