Pages and Layouts - CWA (Components Web App)

Convention is better than configuration: so we discover which CWA components are available through the directory structure. Additional configuration can be provided in your nuxt.config.ts file

We believe that web designers and developers are best placed to make critical decisions, so your website user cannot make alterations which compromise the branding and design integrity of the website.

The first terminology to be aware of is what we mean by a layout and a page. A layout will tend to comprise a header, footer and navigation which is used across many web pages. Pages are the UI structure and style commonly used within the layouts.

Within your layouts and pages you will define where CwaComponentGroup should appear. These are areas in which your UI components will appear.

Create a Layout

This is the default layout included in the skeleton.

app/cwa/layouts/primary.vue

<template>
  <div :class="['relative', 'flex-grow', 'flex', 'flex-col', ...($cwa.resources.layout?.value?.data?.uiClassNames || [])]">
    <VitePwaManifest />
    <CwaUiProgressBar :show="showPageLoadBar" :percent="percent" class="page-progress-bar fixed left-0 top-0 z-[200]" />
    <Spinner :show="$cwa.resources.isLoading.value" class="absolute top-4 right-4 z-50" />
    <header v-if="$cwa.resources.layoutIri.value">
      <div class="relative">
        <div class="mx-auto flex max-w-7xl items-center p-6 justify-start space-x-10 lg:px-8">
          <nav class="space-x-5 flex w-full items-center justify-between">
            <div class="space-x-5 flex items-center">
              <SvgoLogo :font-controlled="false" class="text-white h-8 opacity-80 mr-5" />
              <CwaComponentGroup reference="top" :location="$cwa.resources.layoutIri.value" :allowed-components="['/component/navigation_links']" />
            </div>
            <ClientOnly>
              <nuxt-link v-if="$cwa.auth.status.value === CwaAuthStatus.SIGNED_OUT" to="/login" class="transition justify-self-end px-2.5 py-1 bg-primary rounded text-base font-medium text-white opacity-90 hover:opacity-100">
                Sign In
              </nuxt-link>
            </ClientOnly>
          </nav>
        </div>
      </div>
    </header>
    <div class="bg-inherit">
      <slot />
    </div>
    <div v-if="$cwa.resources.layoutIri.value">
      <CwaComponentGroup reference="bottom" :location="$cwa.resources.layoutIri.value" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { CwaAuthStatus } from '#cwa/runtime/api/auth'
import Spinner from '#cwa/runtime/templates/components/utils/Spinner.vue'
import { useCwa } from '#imports'

const $cwa = useCwa()

const percent = computed(() => $cwa.resources.pageLoadProgress.value.percent || 3)
const showPageLoadBar = computed(() => percent.value < 100)
</script>

The layout has many useful parts and examples, including page loading progress bar, a loading spinner (which will show even when all the resources required for the next page to show are complete), how to detect whether a user is logged in, and defining areas that your components will appear using CwaComponentGroup

Additional configuration

You can provide a user-readable name for your layouts and define pre-set css class name customisation.

app/nuxt.config.ts

{
  cwa: {
    layouts: {
      Primary: {
        name: 'Primary Layout',
        classes: {
            'Blue Background': ['bg-blue-600']
        }
      }
    }
  }
}

Create a page

A page is much simpler to create. And you can define whatever HTML structure and classes you need, including as many CwaComponentGroup instances as required.

app/cwa/pages/PrimaryPageTemplate.vue

<template>
  <div>
    <CwaComponentGroup
        reference="primary"
        :location="props.iri"
    />
  </div>
</template>

<script setup lang="ts">
import type { IriProp } from '#cwa/runtime/composables/cwa-resource'

const props = defineProps<IriProp>()
</script>

Additional configuration

You can provide a user-readable name for your pages and define pre-set css class name customisation.

app/nuxt.config.ts

{
  cwa: {
    pages: {
      PrimaryPageTemplate: {
        name: 'Primary Page',
        classes: {
          'Big Text': ['text-2xl']
        }
      }
    }
  }
}

Installation

Get started with the Components Web App template.

Create a component

In 5 minutes you will have your own component defined in your API, front-end and with in-line content management.