CPNT 200 Day 7 - CMS Dev Team & Flex Day

Assignment 5: Group Project

• Due: December 5 @ 11:59pm
• Groups of 3 - 4

Topics

• v-model follow up
• Todo App Refactor
• Some sitewide data options
• vuetify config
• Group Assignment

Passing Information Between Components

• This gist shows how to create a form component, pass form field values to it, and then send the user input to another component to render the information
• Pay particular attention to which variables are named the same

Tailwind Configuration

• This gist demonstrates a few ways that you can structure your tailwind configuration
• It covers two different ways to set up your fonts. Choose one and stick with it
• The tailwind.config.js example shows a couple of the settings. running npx tailwind init --full will create this configuration

V-Model Followup

• Vue Documentation on passing data to and from child components

• A theory focused gist for v-model

• An example focused gist for v-model

• Extra information about using this

• On the parent component side, use vue model to bind the input to a data() variable

• On the child component side, bind the input value to the value from the model and set an event listener with v-on.

  • v-on:input="$emit('input', $event.target.value)

Activity

• Implement a simple v-model on an input field using v-model
• Put the input into a component
• (extra difficulty) Experiment with the label location:
  • In the component
  • Outside of the component

Todo App Code Refactoring: DRY Code

• Create major components
  • form
  • list
  • header
• Create small components
  • button
  • list item
• Optimize styles
  • small elements
    • buttons
    • headings
  • large elements
    • form
    • List of Items

Feature Add

• Open discussion on other features
  • brief brainstorming about implementation ideas
• Goal: 5+ ideas of feature implementation with notes on scope

Creating Site Wide Data

• Some data needs to be used across the whole site, you have a few options for doing this.
  • store in a json file in the static directory
  • when using @nuxt/content, store in the content directory
  • store as data in a layout (limited sitewide accessibility)
• Depending on the data, it might just be easier to write some things out when needed.

Tailwind and Vuetify Configuration

These two css frameworks take very different approaches. Tailwind is focused on customization, vuetify (like other material frameworks) is focused on consistent component focused design.

Tailwind Basic Configuration Options

• Automatically set up a full default configuration using

npx tailwindcss init --full

- This will create [this default configuration](https://unpkg.com/browse/tailwindcss@2.2.19/stubs/defaultConfig.stub.js) in your project.
- Review the `tailwind.config.js` file
  - Change the colors, fonts, borderRadius, spacing, and any others that you want to customize
  - Try adding [plugins](https://tailwindcss.com/docs/plugins)

• Manually Configure tailwind
  • theme
  • colors
  • fontFamily
  • extend spacing
• Check this Gist for some notes on customizing TailwindCSS

Vuetify Basic Configuration Options

• Review the basic installation instructions
• Set up your apps theme following the theme configuration notes
• Review the vuetify.js file
  • change the color values
  • Set a light and dark variant of your design
  • Set up your fonts
• Note that vuetify isn't intended to be customized as much as tailwind is.
  • This is because the components have all been designed to follow material design guidelines.

Group Assignment

• Define Groups

• Discuss Blog Articles

  • An article on blog lengths
  • small articles: 500 - 750 words (300 minimum)
  • medium articles: 750-1500 words
  • long articles: 2000+ words

• A few types of blog posts

  • Tutorial
  • Analytic
  • Opinion
  • Critique

• Examples of content to add to your posts:

  • Images
  • Vectors
  • Code blocks
  • Gifs
  • Videos
  • Tag cloud
  • Contents

• Review Github Kanban board for project management

  • Extra 2pts on assignment for organizing project with this (must link to the kanban board in your project submission)

Lab Time

• Group Assignment