harrybeckwith

<script>
export default {
  data() {
    return {
      lightbox: {
        images: {
          thumbnails: ["1.jpg", "2.jpg", "3.jpg"],
          large: ["1.jpg", "2.jpg", "3.jpg"]
        },
        captions: ["surfing", "swimming","running"],

harrybeckwith

<template>
  <div>
    <img
      @click="lightboxEffect(index)"
      v-for="(thumbnail, index) in thumbnails"
      :key="thumbnail"
      :src="thumbnailsPath + thumbnail"
      class="light-box__thumbnail"
    >
    <transition name="fade" mode="out-in">

harrybeckwith

<template>
  <div>
    <img
      @click="lightboxEffect(index)"
      v-for="(thumbnail, index) in thumbnails"
      :key="thumbnail"
      :src="thumbnailsPath + thumbnail"
      class="light-box__thumbnail"
    >

harrybeckwith

<template>
  <section class="container">
    <LightBox
      :thumbnails="lightbox.images.thumbnails"
      :largeImages="lightbox.images.large"
      :thumbnailsPath="lightbox.thumbnailsPath"
      :largePath="lightbox.largePath"
      :captions="lightbox.captions"
      class="lightBox"
    />

harrybeckwith

<template>
  <section>
    <h2>Light box</h2>
    <LightBox
      :thumbnails="lightbox.images.thumbnails"
      :largeImages="lightbox.images.large"
      :thumbnailsPath="lightbox.thumbnailsPath"
      :largePath="lightbox.largePath"
      :captions="lightbox.captions"
      class="lightBox"

harrybeckwith

<template>
  <div>
    <img
      @click="lightboxEffect(index)"
      v-for="(thumbnail, index) in thumbnails"
      :key="thumbnail"
      :src="thumbnailsPath + thumbnail"
      class="light-box__thumbnail"
    >
    <transition name="fade" mode="out-in">

harrybeckwith

import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue'
import { routes } from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'

harrybeckwith

import User from './components/user/User.vue';
import UserStart from './components/user/UserStart.vue';
import UserDetail from './components/user/UserDetail.vue';
import UserEdit from './components/user/UserEdit.vue';
import Home from './components/Home.vue';
import Header from './components/Header.vue';

export const routes = [
    { path: '', name: 'home', components: {
        default: Home,

harrybeckwith

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: { id: 'aaa', name: 'Adsasas' },
    events: [
      {

harrybeckwith

<template>
<div>
  <h1>Create Event {{ userName}}</h1>
  <p>There are {{catLength}} categories</p>
  <ul>
    <li v-for="cat in categories" :key="cat">
        {{cat}}
    </li>
  </ul>
<p>