Skip to main content

Day 14 - Project Structure and DRY Code

Assignment 3: Crafting Components

  • Due Monday November 21st
  • Weight: 10%
  • Build and apply 5 components to a Vue app

Props

  • Documentation
  • Props are a convention in many frameworks, they refer to how variables are passed between parent and child components
  • By using props, you can set a component’s layout to be specific about how it displays information from the parent component
  • Note that the options api and composition api use different syntax to define props
  • Props are a one way data flow from parent to child (page to component)

Tips

  • When defining props, make sure to define their variable type (ie: string, array…)

Activity

  • Set up a prop on your AppHeader.vue component
  • use it to take the page title and description text from the app.vue page. This component would take the h1 tag content and actions

Components

  • Vue Components Documentation
  • Single File Components are nested within one another and on pages to build a website.
  • Follow the style guide on naming components
  • You will need to use es6 import syntax to add components to vue files (in nuxt, this behaviour requires less work)

Why components?

  • components allow you to create reusable code (edit once, fix everywhere)
  • They make it easier to spot errors
  • They also make it easier to upgrade your code over time
  • Modularity is awesome

Component Naming

  • 2+ word names
  • Prefix general components with App, V, or Base
    • ie: AppHeader.vue for page headers, AppList.vueand AppListItem.vue
  • Prefix UI components that only show up once per page with The
  • Use consistent naming conventions:
    • ie:
      • TheNav.vue
      • TheNavLink.vue
      • TheFooter.vue
      • AppCard.vue
      • AppCardImage.vue
      • and so on…

Activity: Setting up a Layout Component

  • Create an AppHeader.vue component and add it to an app.vue page
  • set up your props:
    • background color
    • h1 headline text
    • paragraph description text
  • Apply your AppHeader to the HomeView and AboutView
  • Create an AppButton.vue component and set it to take text as a prop
    • Add it to the header

Types of Components

  • Note: For small projects, you can keep all your components in the components folder. Your naming convention should be consistent to allow for easy searching.
  • However it can be helpful to organize your code into subfolders too
  • UI
    • Specific, used for UI elements like the navbar, footer, dashboards (anything that has recurring information)
  • Layout
    • Generic, used to organize information, might contain some recurring component specific content
    • page headers, sections, gallery layouts
  • Utilities
    • Generic, small components such as buttons, links, headlines. These can make great use of slots as well as props

Activity: Set up UI and Utility Components

  • Create a topbar component called either TheHeader.vue or TheNav.vue, create reusable child components such as TheNavLink.vue
    • Set them up to take placeholder text as props
    • Use them to make a topbar (if you genrally use different conventions, feel free to change it up)
    • Add the topbar to App.vue
    • Don’t worry about adding lots of styles, focus on making sure that the data renders correctly first

Props

  • Documentation
  • Props are a convention in many frameworks, they refer to how variables are passed between parent and child components
  • By using props, you can set a component’s layout to be specific about how it displays information from the parent component
  • Note that the options api and composition api use different syntax to define props
  • Props are a one way data flow from parent to child (page to component)

Tips

  • When defining props, make sure to define their variable type (ie: string, array…)

Activity

  • Set up a prop on your AppHeader.vue component
  • use it to take the page title and hero description text from the app.vue page

List Rendering

  • Vue List Rendering Docs
  • Use v-for to render a loop of information
  • It must have a key added. which should be the name of the iterator + .id
  • example (will print out a list of hero names providing that heroes exists as a list)
  • v-for is one of the most used directives along with v-bind and v-on
  • when you specific item in items the “items” must refer to the actual variable that you’re iterating through, but the word “item” can be anything that you want to use as an interator
<ul>
  <li v-for="hero in heroes" :key="hero.id">
  {{ hero.name }}
  </li>
</ul>
  • Vue List Rendering Docs
  • Use v-for to render a loop of information
  • It must have a key added. which should be the name of the iterator + .id
  • example (will print out a list of hero names providing that heroes exists as a list)
  • v-for is one of the most used directives along with v-bind and v-on
  • when you specific item in items the “items” must refer to the actual variable that you’re iterating through, but the word “item” can be anything that you want to use as an interator
<ul>
  <li v-for="hero in heroes" :key="hero.id">
  {{ hero.name }}
  </li>
</ul>