How Page Modules Work in Nuxt.js

Follow

Page Modules in Agility CMS are the functional components that make up a page. Editors use these to compose what type of content is on each page and in what order they appear.

Developers define what page modules are available in the CMS and what fields they have. Each module defined in Agility CMS should correspond to a Vue Component in your Nuxt.js site.

Generally speaking, if you don't have any modules defined or editors don't add modules to pages, then there won't be anything to output for your pages.

Pages, Page Templates, Content Zones & Modules

Learn how pages are generated and rendered

What is in a Page Module?

A Page Module in Agility CMS has a name, description, and fields.

The Name is a representation of the module's intended functionality, such as Posts Listing or Rich Text Area.

It is recommended that each module gets a description, this helps users understand when and where to use this definition.

Fields represent the content that can be managed by editors within the module. These fields are then used in code (passed as props) to display the content the editor intended.

Learn how to How to Create a Page Module.

An Example

In the agilitycms-nuxtjs-starter site, the name of the page module is used to find a corresponding Vue component that matches the same name. If a match is found, that component is dynamically imported and rendered.

For example, if a module has a reference name of RichTextArea in the CMS, then while the page is being rendered, it will look for ./src/components/agility-pageModules/RichTextArea.vue in the ./src/components/agility-pageModules directory.

Screen_Shot_2021-04-28_at_10.49.28_AM.png

Internally, the <AgilityContentZone /> component will dynamically import the module and pass all the field values for that module as props.

// RichTextArea.vue

<template>
  <div class="relative px-8">
    <div class="max-w-2xl mx-auto my-12 md:mt-18 lg:mt-20">
      <div class="prose max-w-full mx-auto" v-html="item.fields.textblob" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    contentID: Number,
    item: Object,
    page: Object,
    pageInSitemap: Object,
    dynamicPageItem: Object,
  },
};
</script>

How to Add a new Page Module

If you create a new Page Module within Agility CMS, you'll want to create the corresponding Vue component for it within the .src/components/agility-pageModules directory.

All of the Page Modules that are being used within the site need to be imported into the agility.components.js file within the .src directory and added to the moduleComponents object:

// Our Agility Modules
import TextBlockWithImage from "./components/agility-pageModules/TextBlockWithImage";
import RichTextArea from "./components/agility-pageModules/RichTextArea";
import Heading from "./components/agility-pageModules/Heading";
import FeaturedPost from "./components/agility-pageModules/FeaturedPost";
import PostsListing from "./components/agility-pageModules/PostsListing";
import PostDetails from "./components/agility-pageModules/PostDetails";

export default {
  dataFetch: {
    ...
  },
  moduleComponents: {
    TextBlockWithImage,
    RichTextArea,
    Heading,
    FeaturedPost,
    PostsListing,
    PostDetails,
  },
  pageTemplateComponents: {
    ...
  },
};

If there is no Vue component for your module, then nothing can be rendered for it in your Nuxt.js site.

How to Change the Fields

You can alter your fields at any time and the field values passed to your component will update automatically the next time you run another build.

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.