web-dev/tutorials/events-app/flow.md

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