Add nuxt 3 example

Author: Demivan

nuxt-3/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

nuxt-3/App.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <h3>Examples</h3>
+
+    <h4>Change locale</h4>
+    <div>
+      <button @click="$changeLocale('en')">English</button>
+      <button @click="$changeLocale('fr')">French</button>
+    </div>
+
+    <h4>$t method</h4>
+    <div>
+      <span>{{ $t('greeting', { name: 'World' }) }}</span>
+    </div>
+
+    <h4>$ta method</h4>
+    <div>
+      <span v-bind="$ta('greeting')">{{ $t('greeting', { name: 'World' }) }}</span>
+    </div>
+
+    <h4>Directive</h4>
+    <div>
+      <span v-t:greeting="{ name: 'World' }"></span>
+    </div>
+
+    <h4>Component</h4>
+    <div>
+      <i18n path="greeting" tag="div">
+        <template #name>
+          <b>{{ $t('user-name') }}</b>
+        </template>
+      </i18n>
+    </div>
+
+    <h4>Composition api (useFluent)</h4>
+    <div v-bind="compositionGreetingTa">
+      {{ compositionGreeting }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useFluent } from 'fluent-vue'
+
+export default defineComponent({
+  name: 'typescript',
+  setup () {
+    const { $t, $ta } = useFluent()
+
+    return {
+      compositionGreeting: computed(() => $t('greeting', { name: $t('user-name') })),
+      compositionGreetingTa: computed(() => $ta('greeting', { name: $t('user-name') }))
+    }
+  },
+  computed: {
+    username() {
+      return this.$t('user-name')
+    },
+    greeting() {
+      return this.$ta('greeting')
+    },
+  },
+})
+</script>
+
+<style>
+.test {
+  display: block;
+}
+</style>

nuxt-3/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

nuxt-3/modules/fluent-vue.ts

@@ -0,0 +1,15 @@
+import { defineNuxtModule, addVitePlugin } from 'nuxt/kit'
+import { ExternalFluentPlugin } from 'unplugin-fluent-vue/vite'
+
+export default defineNuxtModule({
+    meta: {
+        name: 'fluent-vue',
+    },
+    setup(_, nuxt) {
+        addVitePlugin(ExternalFluentPlugin({
+            locales: ['en', 'fr'],
+            baseDir: nuxt.options.srcDir,
+            ftlDir: nuxt.options.srcDir + '/translations',
+        }))
+    },
+});

nuxt-3/nuxt.config.ts

@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true }
+})

nuxt-3/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@fluent/bundle": "^0.18.0",
+    "fluent-vue": "^3.5.0",
+    "nuxt": "^3.10.3",
+    "vue": "^3.4.19",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "unplugin-fluent-vue": "^1.1.4"
+  }
+}

nuxt-3/plugins/fluent-vue.ts

@@ -0,0 +1,24 @@
+import { FluentBundle } from '@fluent/bundle';
+import { createFluentVue } from 'fluent-vue';
+
+export default defineNuxtPlugin((nuxtApp) => {
+    const locales: Record<string, FluentBundle> = {
+        'en': new FluentBundle('en'),
+        'fr': new FluentBundle('fr'),
+    };
+
+    const fluent = createFluentVue({
+        bundles: [locales['en']],
+    });
+
+    nuxtApp.vueApp.use(fluent);
+
+    return {
+        provide: {
+            changeLocale(locale: string) {
+                const bundle = locales[locale] ?? locales['en'];
+                fluent.bundles = [bundle];
+            }
+        }
+    }
+});