Day 19 - Nuxt Config and Site Deployment

Assignment 4 - Page Buildng in Vue/Nuxt

• 15% of your 262 Mark
• Build Two pages using components
  • ui, layout, utility (min 5)
• Due: Tuesday November 29th

Card Component Optimization

• Use objects for grouped props (colors, info, link)
• Cannot use template literals for tailwind classes (would work for vanilla css)

Migrate and Optimize List Component

• Copy the list component from our vue activity into your nuxt repo
• Set up support for an ordered list and definition list using Boolean values
• Optimize list item and remove v-for in AppList

Metadata and Configuration

• nuxt.config.ts: global head content, import fonts, viewport etc
• useHead() can be used for page level metadata
• Add fonts to tailwind
  • additions to your tailwind config will overwrite the default

Important Modules

• Nuxt Image
  • Automatically optimize images
• Nuxt Icon
  • don’t be limited by FontAwesome!

Nuxt Img Usage

• Add Images to the public or assets directories
  • nuxt-img will autoload from public
• Load the images onto your About Page using the Nuxt Image Module (everything except for src is optional)
  • <NuxtImg src="path-to-img/" format="webp" height="100" width="200" quality="80" />
• Nuxt Image Syntax Notes
• Assets directory documentation (covers assets and publi directories)

Nuxt Icon Usage

• vscode plugin for syntax highlighting
• module instructions
• browse available icons
• syntax:
  • <Icon name=fa6-solid:bars" />
• set icon default size in app.config.js (see docs)

Deployment to Netlify

• Set Up, Authorize, and Publish a Website
• Nuxt 3 Deployment