Vue Component Lab Activties

These are intended to develop your skills and methodology at creating components in a frontend framework.

Important Topics

Naming conventions
- prefixes:
  - The: For components that are only used once on a given page
  - App or V: For components that are generic and presentational
- Stringing words together
  - ie: TheHeader TheHeaderLogo TheHeaderNav
    - All of these would only be used once and together. They're named like that to group them easily and note parent/child relationships
Props
- props are used to pass specific information into a component.
- Bind props to attributes like this: :href="link.href"
- Render variables in the dom with double moustache syntax: {{ variable Name }}
Slots
- use slots to make your component wrap around content like a regular html element
- They can be used alongside or often in place of props
```
<AppButton>Some random text</AppButton>
```
Imports
- make sure to import your components onto the page that they will be used (watch the relative path)

Create an AppButton component
Give it basic props and/or slots
Create class props using class and style binding
Use this to generate primary/secondary buttons in a Page Header
EXTRA Challenge: create a PageHeader component that takes an image and headline as well as info for buttons to be passed down too

Create a generic and a specific card component
Use a mix of content and class props (depending on the design)
Create a wrapper component that will handle layout
Verify that it works well.
Think of another use case for your layout component and standardize it so that it can be easily used in both use cases