auth0-events_app_1-tutorial/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

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