Reorganized folder structure, by moving route Trade into views folder and created a components folder to hold the Trade views components. Also, created a component for the Header and placed layout structure into a folder.

package.json

@@ -12,6 +12,7 @@
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
+    "vue-to-react": "^1.0.0",
     "vuex": "^3.1.3"
   },
   "devDependencies": {

src/App.vue

@@ -1,33 +1,7 @@
 <template>
   <div id="app">
-    <header class="bg-secondary">
-      <nav class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
-        <h3 class="text-white header-title">
-          <img class="logo" src="./assets/freqtrade-logo.png" alt />
-          Freqtrade UI
-        </h3>
-        <ul class="navbar-nav mr-auto">
-          <li>
-            <router-link to="/" exact>Home</router-link>
-          </li>
-          <li>
-            <router-link to="/trade">Trade</router-link>
-          </li>
-          <li>
-            <router-link to="/about">About</router-link>
-          </li>
-        </ul>
-        <ul class="navbar-nav ">
-          <li class="nav-item" v-if="loggedIn">
-            <router-link to="/" v-on:click.native="logout()">Logout</router-link>
-          </li>
-          <li class="nav-item" v-else>
-            <!-- should open Modal window! -->
-            <Login />
-          </li>
-        </ul>
-      </nav>
-    </header>
+    <Header/>
+
     <main class="container-fluid">
       <div class="container">
         <BotAlerts />
@@ -37,19 +11,12 @@
     </main>
   </div>
 </template>
+
 <script>
-import { mapActions, mapState } from 'vuex';
-import Login from './views/Login.vue';
-import BotAlerts from './ftbot/BotAlerts.vue';
+import BotAlerts from '@/components/ftbot/BotAlerts.vue';
 
 export default {
-  components: { Login, BotAlerts },
-  computed: {
-    ...mapState('user', ['loggedIn']),
-  },
-  methods: {
-    ...mapActions('user', ['logout']),
-  },
+  components: { BotAlerts },
 };
 </script>
 <style scoped>

src/components/layout/Header.vue

@@ -0,0 +1,52 @@
+<template>
+  <header class="bg-secondary">
+      <nav class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
+        <h3 class="text-white header-title">
+          <img class="logo" src="@/assets/freqtrade-logo.png" alt />
+          Freqtrade UI
+        </h3>
+        <ul class="navbar-nav mr-auto">
+          <li>
+            <router-link to="/" exact>Home</router-link>
+          </li>
+          <li>
+            <router-link to="/trade">Trade</router-link>
+          </li>
+          <li>
+            <router-link to="/about">About</router-link>
+          </li>
+        </ul>
+        <ul class="navbar-nav ">
+          <li class="nav-item" v-if="loggedIn">
+            <router-link to="/" v-on:click.native="logout()">Logout</router-link>
+          </li>
+          <li class="nav-item" v-else>
+            <!-- should open Modal window! -->
+            <Login />
+          </li>
+        </ul>
+      </nav>
+    </header>
+</template>
+
+<script>
+
+import { mapActions, mapState } from 'vuex';
+
+import Login from '@/views/Login.vue';
+
+export default {
+    name: "Header",
+    components: {Login},
+    computed: {
+    ...mapState('user', ['loggedIn']),
+  },
+  methods: {
+    ...mapActions('user', ['logout']),
+  }
+}
+</script>
+
+<style>
+
+</style>

src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import Home from '@/views/Home.vue'
 
 Vue.use(VueRouter)
 
@@ -16,7 +16,7 @@ Vue.use(VueRouter)
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ '../ftbot/TradeView.vue')
+      component: () => import(/* webpackChunkName: "about" */ '@/components/ftbot/TradeView.vue')
     },
   {
     path: '/about',