Skip to main content

Day 22 - Group Assignment Work Day

Achievements 3 - Optimize your Nuxt Skills

  • Due Friday December 9th @ 11:59PM
  • Choose 2 achievements
    • (if you have another activity that you want to focus on outside of the ones listed, please contact Ashlyn)

Dynamic Routing

  • Create routes dynamically using the [...slug].vue naming convention
  • You can create dynamic directories as well
  • What these do is read page info from another directory or a headless cms, and generate pages and routes for each of them
  • Use these for content that is dynamically generated, especially if it uses a template for a layout
    • ie: blog posts, product pages…

Nuxt Content Module

  • This is a core Nuxt module that allows the creation of a content directory to store page data in
  • simply create .md, .yaml, or .json files in this directory and it will create routes for them

Markdown Driven

This is the easiest and quickest way to get moving with Nuxt content

  • Create markdown files and use those for your page content
  • Add <ContentDoc /> to your [...slug].vue file for where the markdown should be injected (just like NuxtPage)
Metadata
  • write metadata such as page title and description in a frontmatter section
Markdown Components
::component-name
---
prop: value
prop: value
---
content that goes in slots
::
  • make sure to use kebab case, slots are written between the opening and closing :: :: and props are between --- ---
::component-name
Add slot content here
::

Important Point on Components in Markdown

  • to do this, you must put the markdown components in a components/content/ directory. Otherwise nuxt won’t read them

Content using Yaml or JSON

For more complex layouts and less bloglike workflows, yaml or json files are perfect for storing your page content.

Nuxt Content will create routes for these files as well. however you will need to fetch the data using a composable

Fetching and organizing data

  • Syntax (in <script setup></script> tags):

    const path = useRoute();
const { data } = await useAsyncData(`content/${path}`, () => {
  return queryContent().where({ _path: path}).findOne().
})

  • This will give you access to all the page data

  • If you want to make multiple groupings of your page data, change { data } to { data: varName } and you can use varName to access variables

  • NOTE: If this isn’t for dynamic pages, remove the .where() method and add the route into queryContent('/route')

Lab Time

Work on your Group Projects

Resources