build fix

src/App.vue

@@ -1,7 +1,13 @@
-<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
-import Footer from './components/Footer.vue'
+<script lang="ts">
+  import { RouterView } from 'vue-router'
+  import Footer from '@/components/Footer.vue'
+  export default {
+      name: 'App',
+      components:{
+        RouterView,
+        Footer
+      },
+    }
 </script>
 
 <template>

src/components/Content.vue

@@ -4,8 +4,9 @@
         name: 'Content',
         props:['jsonContent'],
         data: () => {
+            let rawHtml: String = ""
             return{
-               rawHtml: null
+               rawHtml
             }
         },
         setup(props){
@@ -15,13 +16,13 @@
             
         },
         methods: {
-            reloadContent(el: any, jsonContent : Array){
+            reloadContent(el: any, jsonContent : Array<any>){
                 if(jsonContent && jsonContent.length > 0){
                     for(const contentItem of jsonContent){
                         let itemEl = null
-                        switch(contentItem.type){
+                        switch(contentItem?.type){
                             case "text":
-                                let contentText = contentItem.text
+                                let contentText = contentItem?.text
                                 contentText = contentText.replace(/\n/g, "<br />");
                                 if(contentItem.bold){
                                     let bold =  document.createElement("b")

src/components/Footer.vue

@@ -1,5 +1,11 @@
-<script setup lang="ts">
-import Navigation from './Navigation.vue'
+<script lang="ts">
+  import Navigation from '@/components/Navigation.vue'
+  export default {
+      name: 'Footer',
+      components:{
+        Navigation
+      },
+    }
 </script>
 
 <template>

src/components/Navigation.vue

@@ -1,8 +1,7 @@
-
-
 <template>
       <nav>
-        <RouterLink to="/">{{ $t("Home") }}</RouterLink>
+
+        <RouterLink to="/">{{ t("Home") }}</RouterLink>
 
         <RouterLink v-for="link in links" v-model="links" :to="`${link.page.path}`">
             {{ link.Label }}
@@ -44,19 +43,28 @@ nav a:first-of-type {
 }
 </style>
 
-<script>
+<script lang="ts">
     import { useFooterLinksStore } from '@/stores/footer-content-pages'
     import {loadDynamicPages} from '@/router'
-    
+    import { useI18n } from 'vue-i18n'
+
     export default {
-        name: 'Page',
+        name: 'Navigation',
         data () {
             return {
-            links: [],
-            error: null,
-            footerLinksStroe: null
+            links: [] as Array<any>,
+            error: null as any,
+            footerLinksStroe: null as any
             }
         },
+        setup(){
+          const { t } = useI18n({
+            inheritLocale: true
+          })
+          return{
+            t
+          }
+        },
         async mounted () {
           if(!this.footerLinksStroe){
             this.footerLinksStroe = useFooterLinksStore()

src/i18n.js

@@ -1,19 +0,0 @@
-import { createI18n } from "vue-i18n";
-import de from './locales/de.json'
-import en from './locales/en.json'
-
-function loadLocaleMessages(){
-    const locales = [{de:de}, {en:en}]
-    const messages = {}
-    locales.forEach(lang => {
-        const key = Object.keys(lang)
-        messages[key] = lang[key]
-    })
-    return messages
-}
-
-export default createI18n({
-    locale: (localStorage.getItem('lang') || 'de'),
-    fallbackLocale: "de",
-    messages: loadLocaleMessages()
-})

src/i18n.ts

@@ -0,0 +1,14 @@
+import { createI18n } from 'vue-i18n'
+import de from './locales/de.json'
+import en from './locales/en.json'
+
+export const i18n = createI18n({
+    legacy: false,
+    locale: 'de',
+    fallbackLocale: 'de',
+    globalInjection: true,
+    messages: {
+      'de': de,
+      'en': en
+    }
+})

src/main.ts

@@ -3,8 +3,9 @@ import './assets/css/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router, { loadDynamicPages } from './router'
-import i18n from './i18n'
 import { createPinia } from 'pinia'
+// i18n
+import { i18n } from "./i18n";
 
 const pinia = createPinia()
 const app = createApp(App)
@@ -12,7 +13,7 @@ const app = createApp(App)
 app.use(pinia)
    .use(i18n)
 
-await loadDynamicPages(localStorage.getItem('lang') || 'de')
+loadDynamicPages(localStorage.getItem('lang') || 'de')
 app.use(router)
    
 app.mount('#app')

src/router/index.ts

@@ -1,12 +1,12 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-import PageView from '../views/PageView.vue'
+import HomeView from '@/views/HomeView.vue'
+import PageView from '@/views/PageView.vue'
 import { usePageStore } from '@/stores/pages'
 import axios from 'axios'
 
 let locale:String = (localStorage.getItem('lang') || 'de')
-let pages = []
-let addPages = []
+let pages = [] as Array<any>
+let addPages = [] as Array<any>
 
 
 export async function loadDynamicPages(newLocale:String){

src/stores/footer-content-pages.ts

@@ -4,11 +4,11 @@ import axios from 'axios'
 
 
 export const useFooterLinksStore = defineStore('footerLinks',{
-  state: () => ({ token: "28f1084766b4010f8a295faf9fdbf83bc35b48fd0c678c09468e503a1ac474b49b03c5c8d2fbb98e1876427ace5f9d58180e3c79afa6d172c97738056e28c7adecff2bb9dfdac40fe6716c743a437b70dbaa8924262b3fa5d5b50258fcf6a163ada089cc5c76b34b3bcd4ec148594b3db5f12888c8bca941898b8ae542d923e5",
-                locale:  null,
-                links: [] }),
- 
-   
+  state: () => ({ 
+                token: "28f1084766b4010f8a295faf9fdbf83bc35b48fd0c678c09468e503a1ac474b49b03c5c8d2fbb98e1876427ace5f9d58180e3c79afa6d172c97738056e28c7adecff2bb9dfdac40fe6716c743a437b70dbaa8924262b3fa5d5b50258fcf6a163ada089cc5c76b34b3bcd4ec148594b3db5f12888c8bca941898b8ae542d923e5",
+                locale:  "" as String,
+                links: [] 
+              }),
    
    actions: {
     async getLinks(locale:String){

src/stores/pages.ts

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia'
 
 
 export const usePageStore = defineStore('pages',{
-  state: () => ({ pages: [] }),
+  state: () => ({ pages: [] as Array<any> }),
  
    actions: {
     getPages(){

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import logo from '../assets/images/logo.svg'
+  import logo from '../assets/images/logo.svg'
 </script>
 
 <template>

src/views/PageView.vue

@@ -1,31 +1,38 @@
-<template>
-    <main>
-        <h1> {{ page?.Title }}</h1>
-        <Content :jsonContent="page?.Content"/>
-    </main>
-  </template>
-
-<script>
+<script lang="ts">
    import { usePageStore } from '../stores/pages'
    import Content from '@/components/Content.vue'
+   import { useRoute } from 'vue-router'
     export default {
-        name: 'Page',
+        name: 'PageView',
         components:{
             Content
         },
+        setup() {
+            const route = useRoute()
+            return {
+                route
+            }
+        },
         data () {
             return {
-            page: null,
-            error: null
+                page: null as any
             }
         },
         async mounted () {
             const pageStore = await usePageStore()
-            this.page = await pageStore.getPageByTitle(this.$route.name)
+            this.page = await pageStore.getPageByTitle(this.route.name as String)
         },
         async updated(){
             const pageStore = await usePageStore()
-            this.page = await pageStore.getPageByTitle(this.$route.name)
+            this.page = await pageStore.getPageByTitle(this.route.name as String)
         }
     }
-</script>
+</script>
+
+<template>
+    <main>
+        <h1> {{ page?.Title }}</h1>
+        <Content :jsonContent="page?.Content"/>
+    </main>
+</template>
+