# 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