applayout:
<template>
<div>
<v-app id="example-1" toolbar footer>
<v-navigation-drawer class="grey darken-4" style="background-image: url(/images/bg-dark-pattern.png); background-repeat: repeat; position: fixed;" persistent v-model="drawer" light enable-resize-watcher absolute>
<img style="width:50%; margin-left:25%;padding-top:10px;padding-bottom:20px;" src="/images/logo-transparent.png">
<!-- Menu -->
<app-menu></app-menu>
<!-- Route content -->
</v-navigation-drawer>
<v-toolbar class="white fixed">
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-spacer></v-spacer>
<v-select append-icon="search" v-bind:items="states" v-model="a1" autocomplete></v-select>
</v-toolbar>
<main>
<v-container fluid>
<router-view></router-view>
</v-container>
</main>
<v-footer class="grey darken-4 text-xs-center">
<span class="white--text ">logo © 2017</span>
</v-footer>
</v-app>
</div>
</template>
<script>
import AppMenu from '/imports/ui/AppMenu.vue';
export default {
components: {
AppMenu
},
data() {
return {
components: {
AppMenu
},
cards: [
{ title: 'Pre-fab homes', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
{ title: 'Favorite road trips', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
{ title: 'Favorite road trips', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
{ title: 'Favorite road trips', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
{ title: 'Favorite road trips', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
{ title: 'Favorite road trips', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
{ title: 'Best airlines', src: 'https://www.maduniverset.dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 }
],
a1: null,
states: [
"Alabama",
"Alaska",
"American Samoa",
"Arizona",
"kylling",
"California",
"Colorado",
"Connecticut",
"Delaware",
"District of Columbia",
"Federated States of Micronesia",
"Florida",
"Georgia",
"Guam",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Marshall Islands",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Northern Mariana Islands",
"Ohio",
"Oklahoma",
"Oregon",
"Palau",
"Pennsylvania",
"Puerto Rico",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virgin Island",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
],
drawer: true,
computed: {
binding() {
const binding = {}
if (this.$vuetify.breakpoint.mdAndUp) binding.column = true
return binding
}
}
}
}
}
</script>
Routes.js
// Import the router
import { RouterFactory, nativeScrollBehavior } from 'meteor/akryum:vue-router2'
// Create router instance
const routerFactory = new RouterFactory({
mode: 'history',
scrollBehavior: nativeScrollBehavior
});
// Not found
import NotFound from '/imports/ui/NotFound.vue';
RouterFactory.configure(router => {
router.addRoute({
path: '*',
component: NotFound,
});
}, -1);
export default routerFactory;
Forside.vue (frontpage)
<template>
<v-layout row wrap>
<v-flex style="padding:4px;" v-bind="{ [`xs${card.flex}`]: true }" v-for="card in cards" :key="card.title" xs12 sm6 md3 order-md1 order-sm3>
<v-card>
<v-card-media :src="card.src" height="200px">
<v-container fill-height fluid>
<v-layout fill-height>
<v-flex xs12 align-end flexbox>
<span class="headline white--text" v-text="card.title"></span>
</v-flex>
</v-layout>
</v-container>
</v-card-media>
<v-card-actions class="white">
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>favorite</v-icon>
</v-btn>
<v-btn icon>
<v-icon>bookmark</v-icon>
</v-btn>
<v-btn icon>
<v-icon>share</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
<v-flex xs12 sm12 class="my-3">
<div class="text-sm-center">
<h2 class="headline">Nyeste opskrifter</h2>
<span class="subheading">
Nyeste opskrifter på Maduniverset
</span>
</div>
</v-flex>
</v-layout>
</template>
<script>
export default {
data() {
return {
cards: [
{ title: 'Pre-fab homes', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
{ title: 'Favorite road trips', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
{ title: 'Favorite road trips', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
{ title: 'Favorite road trips', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
{ title: 'Favorite road trips', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
{ title: 'Favorite road trips', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 },
{ title: 'Best airlines', src: 'https://www..dk/images/11047-grillet-pizza-kartoffelskiver-mascarpone.jpg', flex: 6 }
],
a1: null,
states: [
"Alabama",
"Alaska",
"American Samoa",
"Arizona",
"kylling",
"California",
"Colorado",
"Connecticut",
"Delaware",
"District of Columbia",
"Federated States of Micronesia",
"Florida",
"Georgia",
"Guam",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Marshall Islands",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Northern Mariana Islands",
"Ohio",
"Oklahoma",
"Oregon",
"Palau",
"Pennsylvania",
"Puerto Rico",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virgin Island",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
],
drawer: true,
computed: {
binding() {
const binding = {}
if (this.$vuetify.breakpoint.mdAndUp) binding.column = true
return binding
}
}
}
}
}
</script>
AppMenu.vue
<template>
<div class="app-menu">
<router-link :to="{ path: '/', name:'Forside', exact: true }"><span style="color:#fff;">Forside</span></router-link><br>
<router-link :to="{ path: '/kategorier', name:'Kategorier' }"><span style="color:#fff;">Kategorier</span></router-link>
</div>
<!--
<v-list dense style="background-color:transparent; color:#fff; /* For IE8 and earlier */" class="listnav">
<v-list-tile @click="">
<v-list-tile-action>
<v-icon style="color: #fff;">home</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title style="color: #fff;">Forside</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon style="color: #fff;">list</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title style="color:#fff;">Kategorier</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
-->
</template>
main.js
// Libs
import {Meteor} from 'meteor/meteor';
import {Vue} from 'meteor/akryum:vue';
import routerFactory from '/imports/routes.js';
require('../node_modules/vuetify/dist/vuetify.min.css')
require('../node_modules/vuetify/dist/vuetify.min.js')
// App layout
import AppLayout from '/imports/ui/AppLayout.vue';
// App start
Meteor.startup(() => {
// Start the router
const router = routerFactory.create();
new Vue({
router,
render: h => h(AppLayout),
}).$mount('app');
});
main.routes.js
export default [
{
path: '',
name: 'Forside',
component: '/imports/ui/Forside.vue',
path: 'Kategorier',
name: 'Kategorier',
component: '/imports/ui/Kategorier.vue',
},
];
console.log("routes test 3");