Change components to work without nuxt

This commit is contained in:
Ramon Wenger 2018-08-09 14:36:16 +02:00
parent da9e011f16
commit 562fbca542
11 changed files with 36 additions and 48 deletions

View File

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

View File

@ -1,7 +1,27 @@
<template>
<div>
<h1>Hello</h1>
<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>
<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>

View File

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

View File

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

View File

@ -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%;

View File

@ -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>

View File

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

View File

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

View File

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

View File

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

View File

@ -1,11 +1,14 @@
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: '/topic', name: 'topic', component: topic},
{path: '*', component: NotFound}
]