testing

index.d.ts

@@ -1,27 +1,26 @@
 import { NuxtAxiosInstance } from '@nuxtjs/axios'
+import VueI18n, {IVueI18n} from "vue-i18n";
 
 declare module 'vue/types/vue' {
+
   interface Vue {
-    $axios: NuxtAxiosInstance
-    i18n: any
+    $axios: NuxtAxiosInstance,
   }
 }
-
 declare module '@nuxt/types' {
+
   interface NuxtAppOptions {
-    $axios: NuxtAxiosInstance
-    $i18n: any
+    $axios: NuxtAxiosInstance,
   }
 
   interface Context {
-    $axios: NuxtAxiosInstance
-    $i18n: any
+    $axios: NuxtAxiosInstance,
+    $i18n: VueI18n & IVueI18n
   }
 }
 
 declare module 'vuex/types/index' {
   interface Store<S> {
     $axios: NuxtAxiosInstance
-    i18n: any
   }
 }

package.json

@@ -14,19 +14,18 @@
     "@nuxtjs/composition-api": "^0.22.1",
     "core-js": "^3.8.3",
     "nuxt": "^2.14.12",
-    "nuxt-i18n": "6.20.6",
+    "nuxt-i18n": "6.21.0",
     "prism-themes": "1.5.0",
     "sass": "1.32.8"
   },
   "devDependencies": {
     "@nuxt/types": "^2.14.12",
     "@nuxt/typescript-build": "^2.0.4",
-    "@nuxtjs/color-mode": "2.0.4",
+    "@nuxtjs/color-mode": "2.0.5",
+    "@nuxtjs/tailwindcss": "^4.0.1",
     "node-sass": "^5.0.0",
-    "@nuxt/postcss8": "^1.0.3",
-    "nuxt-vite": "^0.0.34",
-    "nuxt-windicss": "^0.3.2",
-    "sass-loader": "^10.1.1",
-    "windicss": "2.4.3"
+    "nuxt-vite": "^0.0.36",
+    "postcss": "^8.2.8",
+    "sass-loader": "^11.0.1"
   }
 }

settings/Arch.ts

@@ -25,7 +25,6 @@ const pageTransition = {
 const target = 'server'
 
 const server = {
-  host: '0.0.0.0',
   port: 3333
 }
 

settings/BuildModules.ts

@@ -6,11 +6,18 @@ const color_mode = {
   classSuffix: '',
 }
 
+const tailwindcss = {
+  cssPath: './assets/css/tailwind.css',
+  configPath: 'tailwind.config.js',
+  exposeConfig: true,
+  jit: true
+}
+
 export default  [
   '@nuxt/typescript-build',
   '@nuxtjs/composition-api',
   '@nuxt/postcss8',
-  'nuxt-windicss',
+  ['@nuxtjs/tailwindcss', tailwindcss],
   'nuxt-vite',
   ['@nuxtjs/color-mode', color_mode],
 ]

src/components/Logo.vue

@@ -15,6 +15,14 @@
   </svg>
 </template>
 
+<script lang="ts">
+
+export default {
+
+}
+
+</script>
+
 <style>
 .NuxtLogo {
   animation: 1s appear;

src/locales/en-EN.ts

@@ -0,0 +1,3 @@
+export default {
+  test: "test"
+}

src/locales/fr-FR.ts

@@ -1 +1,3 @@
-export default {}
+export default {
+  test: "teste"
+}

src/pages/index.vue

@@ -14,14 +14,12 @@
         >
           Documentation
         </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          rel="noopener noreferrer"
+        <div
           class="button--grey"
+          @click="setLocale(getLocale.toString() === 'fr' ? 'en' : 'fr')"
         >
-          GitHub
-        </a>
+          {{ $t("test") }}
+        </div>
       </div>
     </div>
   </div>
@@ -29,8 +27,18 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import {setLocale, getLocale} from "../services/useTranslation";
 
-export default Vue.extend({})
+export default Vue.extend({
+
+  const
+
+  setup() {
+    return {
+      setLocale, getLocale
+    }
+  }
+})
 </script>
 
 <style>

src/services/useTranslation.ts

@@ -0,0 +1,16 @@
+import {useContext} from "@nuxtjs/composition-api";
+
+export const translate = (code: string) => {
+  const { $i18n } = useContext()
+  $i18n.t(code)
+}
+
+export const setLocale = async (locale: string) => {
+  const {$i18n} = useContext()
+  await $i18n.setLocale(locale)
+}
+
+export const getLocale = () =>{
+  const { $i18n } = useContext()
+  return $i18n.getBrowserLocale()
+}