fluent-vue/examples

Examples projects that use fluent-vue

Internationalization plugin for Vue.js

fluent-vue is a Vue.js integration for Fluent.js - JavaScript implementation of Mozilla's Project Fluent

🚀 Features

• Simple api for developers: Just 2 methods, 1 directive and 1 component
• Powerfull syntax for translators: Use the entire expressive power of every language without need for changes to application source code
• Isolation: Locale-specific logic doesn't leak to other locales. A simple string in English can map to a complex multi-variant translation in another language
• Seamless migration: Works for both Vue 3 and 2
• No bundler required: Usable via CDN

🎉 Example

<template>
  <div>
    <div>{{ $t('hello-user', { userName }) }}</div>
    <div>{{ $t('shared-photos', { userName, photoCount, userGender }) }}</div>
  </div>
</template>

<fluent locale="en">
# Simple things are simple.
hello-user = Hello, {$userName}!

# Complex things are possible.
shared-photos =
  {$userName} {$photoCount ->
     [one] added one photo
    *[other] added {$photoCount} new photos
  } to {$userGender ->
     [male] his stream
     [female] her stream
    *[other] their stream
  }.
</fluent>

📖 Documentation

Documentation can be found here: https://fluent-vue.demivan.me

Examples for different Vue.js versions and build systems can be found here.

📜 Changelog

Changes for each release are documented in the CHANGELOG.md.

📦 Packages

Project	NPM	Repo
fluent-vue		fluent-vue/fluent-vue
unplugin-fluent-vue		fluent-vue/unplugin-fluent-vue

📄 License

MIT License © 2020 Ivan Demchuk

examples's Issues

Add more examples

When unplugin-fluent-vue is done:

• Nuxt 2
• Nuxt 3

Add steps to build projects to README

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update Vite (@vitejs/plugin-vue, vite)
• Update all non-major dependencies (@babel/core, @vue/compiler-core, @vue/compiler-sfc, actions/checkout, actions/setup-node, core-js, css-loader, html-webpack-plugin, nuxt, typescript, vue, vue-loader, vue-router, vue-template-compiler, vue-tsc, webpack)
• Update fluent-vue (fluent-vue, unplugin-fluent-vue)
• Update pnpm/action-setup action to v4
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/test.yml

• actions/checkout v4.1.1
• actions/setup-node v4.0.0
• pnpm/action-setup v3.0.0

npm

nuxt-3/package.json

• @fluent/bundle ^0.18.0
• fluent-vue ^3.5.1
• nuxt ^3.10.3
• vue ^3.4.19
• vue-router ^4.3.0
• @vue/compiler-core ^3.4.21
• unplugin-fluent-vue ^1.3.0

vue-2-vite-typescript/package.json

• @fluent/bundle 0.18.0
• fluent-vue 3.4.0
• vue 2.7.14
• typescript 5.1.6
• unplugin-fluent-vue 1.1.4
• vite 5.2.8
• vite-plugin-vue2 2.0.3
• vue-template-compiler 2.7.14
• vue-tsc 2.0.10

vue-2-webpack/package.json

• @fluent/bundle 0.18.0
• @fluent/dedent 0.5.0
• fluent-vue 3.4.0
• vue 2.7.14
• css-loader 7.0.0
• html-webpack-plugin 5.5.3
• unplugin-fluent-vue 1.1.4
• vue-loader 15.10.1
• vue-template-compiler 2.7.14
• webpack 5.88.2
• webpack-cli 5.1.4
• webpack-dev-server 5.0.4

vue-3-vite-external-translations/package.json

• @fluent/bundle 0.18.0
• fluent-vue 3.4.0
• vue 3.3.4
• @vitejs/plugin-vue 5.0.4
• @vue/compiler-sfc 3.3.4
• unplugin-fluent-vue 1.1.4
• typescript 5.1.6
• vite 5.2.8
• vue-tsc 2.0.10

vue-3-vite-typescript/package.json

• @fluent/bundle 0.18.0
• fluent-vue 3.4.0
• vue 3.3.4
• @vitejs/plugin-vue 5.0.4
• @vue/compiler-sfc 3.3.4
• unplugin-fluent-vue 1.1.4
• typescript 5.1.6
• vite 5.2.8
• vue-tsc 2.0.10

vue-3-vue-cli/package.json

• @fluent/bundle 0.18.0
• @fluent/dedent 0.5.0
• core-js 3.32.0
• fluent-vue 3.4.0
• vue 3.3.4
• @babel/core 7.22.9
• @vue/cli-plugin-babel 5.0.8
• @vue/cli-service 5.0.8
• @vue/compiler-sfc 3.3.4
• unplugin-fluent-vue 1.1.4

---

• Check this box to trigger a request for Renovate to run again on this repository

Are SFC translations scoped to the current component?

Just started messing around with fluent-vue, so apologies if I'm missing the answer to this in the docs.

Are the translations in an SFC scoped to just that component?

I'm trying to add translations to a parent component that the child component will use. In some cases its for organization, in others because the child components are generic