CPNT 200 Day 5 - VueJS Dynamic Templating

Assignment 4: Vue Templating

• Due: Saturday November 27

Topics

• Vscode Extensions
• VueJS Dynamic Templating
• Tailwind and Vuetify Basic Config
• Prep for Tomorrow

Vscode Extensions

• Eslint and Prettier can be installed globally npm install -g prettier eslint.
  • If you do this, then you can run eslint --init in your project to configure your project settings
  • Note that you will want to have project based eslint and prettier installed because otherwise formatting may not be consistent.

Eslint

• Run eslint --init in your project root
• Official Documentation
• Eslint Getting Started Docs
• Medium Article Tutorial

Prettier

• Official Documentation
• Prettier + Eslint
  • Install 2 packages ontop of prettier and eslint to make them work together better

  npm install --save-dev eslint-config-prettier eslint-plugin-prettier
  

  • Try using a popular style guide like airbnb's
• Edit the `prettier.
• Blog Tutorial

Vetur

• Review This documentation
  • Add vue to your eslint config
• Use a jsconfig.json file to improve vue syntax highlighting in your project
  • This article is really helpful
    • IntelliSense doesn't work with code completion properly with absolute imports
    • Put this in your jsconfig.json to make it work properly with nuxt

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

• Note that this should be done when you select jsconfig.json at nuxt project setup
• Vetur Documentation

Vue Syntax Review

• We will take some time to review the syntax we worked on last week, this will be to create content to loop through when we get to dynamic content

Props and Data

• Data is a components memory
• Props are properties that a child component takes from a parent component
  • parent child relationship in vue refers to :

  |- components/
    |- Button.vue
  |- pages/
    |- index.vue
  

  • In this example, you would use a button on the page
  • the page is the parent, the button is the child
  • components in the components directory can have child components too

V-bind review

• Use v-bind to 'bind' data to an html element

Activity: Vue Card Component

• Create contents for a single card component as data on a page
• Examples:
  • Team Member
  • Product
  • Character
• Create a card component layout
  • use object notation to assign props
  • use v-bind to send the object to the component
• We will be duplicating these dynamically with v-for loops

VueJS Dynamic Templating

Vue offers a lot of options for templating. These are some of the commonly used directives that you can use in your projects. Review the documentation for more

Advanced Content Rendering

• v-for

  Render content from arrays, objects, and lists. Documentation

• v-if/v-else

  Render content based on conditional statements. Documentation

List rendering with V-for

• Use v-for to loop through arrays of variables and render groups of content

    <li v-for="item in items" :key="item.name> </li>
  

  • This will access a a group of objects in an array called items in data.
  • It uses the name property of the item as the counter.
  • It will create a list item with the array item's name in the text
  • You can also access the index.

  <li v-for="(item, index) in items">  +  + ': ' + </li>
  

• V-for Detailed Gist
  • This gist covers basic and advanced syntax using examples

Activity: Display Cards with V-for

• Add more content to your card data
• Create a v-for loop to render the cards onto a page

Extra challenge

• Create a list that displays only some content from your array of objects
• Use the name argument to display content
• Use the index argument to display content
• Try rendering content in a range

Conditional Rendering with v-if/else

• Add conditional logic with v-if, v-else-if, v-else
  • booleans are great for if/else statements
  • Avoid using this on the same element as a v-for
  • Display content under certain conditions ex:

  <h1 v-if="true">Show this</h1>
  <h1 v-else> show this if false</h1>
  

• This can be used at all levels of your html hierarchy
• It can also be applied directly to the <template> tag
  • This allows you to make components render content dramatically different based on specific conditions
• v-if fully sets event listeners and child components in conditional blocks
• v-if is lazy, and will not render initial content if it doesn't have to
• v-if/v-else Gist

v-show

• There is also a directive called v-show. This conditional rendering is only used for css changes as it is always rendered by the DOM, v-if/else is more effecient for actual content
• v-if has a higher toggle cost and v-show has higher initial render cost.
  • use v-show to hide something as you would with display: none
  • use v-if for conditions that won't change much

Activity: Conditional Rendering

• Using the data created for the v-for activity, create another component that renders information based on specific conditions
• Examples:
  • Use a conditional v-if/else etc to show a specific welcome message based on user input
  • Create a Dark mode toggle
  • Use v-show to hide certain elements

Tailwind & Vuetify Basic Config (Extra Content)

• Tailwind Basic Configuration Options
  • Automatically set up a full default configuration using

  npx tailwindcss init --full
  

  • This will create this default configuration 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
  • Manually Configure tailwind
    • theme
    • colors
    • fontFamily
    • extend spacing
• 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.

Prep for November 23

• Read the essential and strongly recommended sections of the vuejs style guide
• Read In Defense of a Fuzzy Website
• Scan These websites:
  • Cassie Evan's Website
  • Josh Comeau's Website
  • We will review this site for content that:
    • Would use vue rendering syntax
    • Be created using a CMS
  • And we will discuss:
    • Design Styles
    • How she showcases her work
  • Be ready for small group discussion
• Start thinking about what role in web development you would like to focus on for the CPNT 200 Group Project
  • Backend Developer (Setting up CMS, Netlify Deployment)
  • Content Creator (Gathers assets, writes articles, determine cms needs)
  • Frontend Developer (Setting up Nuxt, writes a lot of vue syntax)
  • Designer (Setting up CSS Framework, general site design)