updating latest tutorials

tutorials/events-app/flow.md

@@ -0,0 +1,98 @@
+# Flow + Structure of Vue project
+
+- If components are to be imported elsewhere they should `export default` and set their name to be the name of the html element you want.
+- If components import an element they should `export default` and set a `components` with an array of the components being used in the html.
+
+```
+  import Nav from './components/partials/Nav.vue';
+  export default {
+    name: 'App',
+    components: {
+      Nav
+    }
+  }
+```
+
+## Main Page
+
+### `App.vue`
+
+This is the main entrypoint into the website.
+
+- `template` should inject a `<div id="app">`
+- insert the `<Nav />` component
+
+## Navigation
+
+- Create a `VueRouter` in `./router/index.js`
+- Create a `routes` array which takes a dict of each route 
+- Route should set three things:
+ - A `path` - this sets the URL path.
+ - A `name` - this is the name to appear in the navbar.
+ - A `component` - this should import the vue component
+
+Example:
+
+```
+  {
+    path: '/event/:id',
+    name: 'eventSingle',
+    component: () => import ('../views/EventSingle.vue')
+  }
+```
+
+### `./router/index.js`
+
+- Import all components
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // 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" */ '../views/About.vue')
+  },
+  {
+    path: '/event/:id',
+    name: 'eventSingle',
+    component: () => import ('../views/EventSingle.vue')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router
+
+
+To do - how to use the cards:
+
+EventCard
+
+- Takes a prop of the data you need
+- Creates a card for a single item
+- Links to a EventSingle using a route parameter
+
+EventSingle
+
+- Hits an API
+- Uses a route parameter to determine which event to show
+- Displays a whole page for a single event
+
+EventsList
+
+- Hits an API for its data
+- Uses a `v-for` to render a EventCard
+- Uses a router-link to link to a EventSingle