# 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
```


## Rendering Objects


### Cards + Card List


We have:


- A EventCard of which many of them form a EventsList
- A EventSingle which is a page for each card


We use an EventsList template to render the cards - this imported and used in the `Home.vue`


A router exists for each Event - this is used to link each EventCard to an EventSingle. An EventSingle is a template for a EventCard.


The EventsList hits an api to generate the cards dynamically. The EventSingle hits an api to get details of a single card.


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