* initialisation of all libraries

feature: #1

src/api/HttpClient.js

@@ -0,0 +1,7 @@
+import axios from 'axios'
+
+export default axios.create({
+  baseURL: 'https://localhost:8080/',
+  timeout: 1000,
+  headers: { 'X-Custom-Header': 'foobar' }
+})

src/assets/main.css

@@ -1,4 +1,7 @@
 @import './base.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 #app {
   max-width: 1280px;

src/components/PageNotFound.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>Page not Found!</h1>
+  </div>
+</template>
+<script></script>

src/i18n.js

@@ -0,0 +1,17 @@
+import { createI18n as _createI18n } from 'vue-i18n'
+import en from './locales/en.json'
+import de from './locales/de.json'
+export const SUPPORT_LOCALES = ['en', 'de']
+
+export function createI18n() {
+  return _createI18n({
+    legacy: false,
+    globalInjection: true,
+    locale: 'de',
+    fallbackLocale: 'en',
+    messages: {
+      en,
+      de
+    }
+  })
+}

src/locales/de.json

@@ -0,0 +1,6 @@
+{
+  "hello": "Hallo i18n in SFC!",
+  "welcome": "Willkommen!",
+  "yes-button": "Ja",
+  "no-button": "Nein!"
+}

src/locales/en.json

@@ -0,0 +1,6 @@
+{
+  "hello": "Hello i18n in SFC!",
+  "welcome": "Welcome!",
+  "yes-button": "Yes",
+  "no-button": "No!"
+}

src/main.js

@@ -1,11 +1,23 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import { createI18n } from './i18n'
+import store from './store'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
+
+/* add icons to the library */
+library.add(faUserSecret)
 
 import './assets/main.css'
 
+const i18n = createI18n()
+
 const app = createApp(App)
 
 app.use(router)
-
+app.use(i18n)
+app.use(store)
+app.component('FontAwesomeIcon', FontAwesomeIcon)
 app.mount('#app')

src/router/index.js

@@ -12,10 +12,13 @@ const router = createRouter({
     {
       path: '/about',
       name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
+      // this page is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'notfound',
+      component: () => import('../components/PageNotFound.vue')
     }
   ]
 })

src/store/index.js

@@ -0,0 +1,10 @@
+import { createStore } from 'vuex'
+import moduleA from './moduleA.module'
+import moduleB from './moduleB.module'
+
+export default createStore({
+  modules: {
+    a: moduleA,
+    b: moduleB
+  }
+})

src/store/moduleA.module.js

@@ -0,0 +1,6 @@
+export default {
+  state: () => ({}),
+  mutations: {},
+  actions: {},
+  getters: {}
+}

src/store/moduleB.module.js

@@ -0,0 +1,6 @@
+export default {
+  state: () => ({}),
+  mutations: {},
+  actions: {},
+  getters: {}
+}

src/views/AboutView.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <font-awesome-icon icon="fa-solid fa-user-secret" />
   </div>
 </template>
-
 <style>
 @media (min-width: 1024px) {
   .about {