Change components to work without nuxt

client/build/webpack.base.conf.js

@@ -35,6 +35,7 @@ module.exports = {
     extensions: ['.js', '.vue', '.json', '.gql', '.graphql'],
     alias: {
       '@': resolve('src'),
+      '~': resolve('src'),
       styles: resolve('styles')
     }
   },

client/src/App.vue

@@ -1,7 +1,27 @@
 <template>
-  <div>
+  <div class="container">
-    <h1>Hello</h1>
+    <header>Header</header>
-    <router-view></router-view>
+    <aside>
+      <h2>Themen</h2>
+      <ul>
+        <li>1. Berufliche Grundbildung</li>
+        <li>2. Geld und Kauf</li>
+        <li>3. Geld und Kauf</li>
+        <li>4. Geld und Kauf</li>
+        <li>5. Geld und Kauf</li>
+        <li>6. Geld und Kauf</li>
+        <li>7. Geld und Kauf</li>
+        <li>8. Geld und Kauf</li>
+        <li>9. Geld und Kauf</li>
+      </ul>
+      <h2>Basiswissen</h2>
+      <h2>ABU News</h2>
+
+    </aside>
+    <main>
+      <router-view></router-view>
+    </main>
+    <footer>Footer</footer>
   </div>
 </template>
 
@@ -18,4 +38,5 @@
 
 <style lang="scss">
   @import "styles/main";
+  @import "@/assets/main.scss";
 </style>

client/src/assets/_variables.scss

@@ -1,2 +0,0 @@
-$red: blue;
-$blue: orange;

client/src/assets/main.scss

@@ -10,7 +10,6 @@
 
 
 .container {
-  color: $red;
   margin: 0 auto;
   width: 100%;
   max-width: 1440px;

client/src/components/ModuleTeaser.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="module-teaser">
-    <img src="~/assets/maggie.jpg" alt="" class="module-teaser__image">
+    <img src="@/assets/maggie.jpg" alt="" class="module-teaser__image">
     <div class="module-teaser__body">
       <h3 class="module-teaser__meta-title">Modul 1</h3>
       <h3 class="module-teaser__title">Mein neues Umfeld</h3>
@@ -10,13 +10,14 @@
 </template>
 
 <style scoped lang="scss">
+  @import "@/assets/_variables.scss";
+
   .module-teaser {
     box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
     border: 1px solid #E2E2E2;
     height: 330px;
     width: 300px;
     border-radius: 12px;
-    color: $blue;
 
     &__image {
       width: 100%;

client/src/layouts/default.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="container">
-    <header>Header</header>
-    <aside>
-      <h2>Themen</h2>
-      <ul>
-        <li>1. Berufliche Grundbildung</li>
-        <li>2. Geld und Kauf</li>
-        <li>3. Geld und Kauf</li>
-        <li>4. Geld und Kauf</li>
-        <li>5. Geld und Kauf</li>
-        <li>6. Geld und Kauf</li>
-        <li>7. Geld und Kauf</li>
-        <li>8. Geld und Kauf</li>
-        <li>9. Geld und Kauf</li>
-      </ul>
-      <h2>Basiswissen</h2>
-      <h2>ABU News</h2>
-
-    </aside>
-    <main>
-      <nuxt/>
-    </main>
-    <footer>Footer</footer>
-  </div>
-</template>

client/src/pages/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  import ALL_MODULES from '~/graphql/gql/allModules'
+  import ALL_MODULES from '@/graphql/gql/allModules'
 
   export default {
     data() {

client/src/pages/topic.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-  import ModuleTeaser from '~/components/ModuleTeaser.vue';
+  import ModuleTeaser from '@/components/ModuleTeaser.vue';
 
   export default {
     components: {

client/src/plugins/vue-axios.js

@@ -1,5 +0,0 @@
-import axios from 'axios'
-import VueAxios from 'vue-axios'
-import Vue from 'vue'
-
-Vue.use(VueAxios, axios)

client/src/plugins/vue-vimeo-player.js

@@ -1,4 +0,0 @@
-import Vue from 'vue'
-import VueVimeoPlayer from 'vue-vimeo-player'
-
-Vue.use(VueVimeoPlayer)

client/src/router/index.js

@@ -1,12 +1,15 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Dashboard from '@/pages/PageDashboard'
+import index from '@/pages/index'
+import topic from '@/pages/topic'
 import NotFound from '@/pages/PageNotFound'
 
 const routerOptions = [
-  { path: '/', name: 'dashboard', component: Dashboard },
+  {path: '/', name: 'index', component: index},
-  { path: '/dashboard', name: 'dashboard', component: Dashboard },
+  {path: '/dashboard', name: 'dashboard', component: Dashboard},
-  { path: '*', component: NotFound }
+  {path: '/topic', name: 'topic', component: topic},
+  {path: '*', component: NotFound}
 ]
 
 const routes = routerOptions.map(route => {