diff --git a/examples/nuxt-app/README.md b/examples/nuxt-app/README.md
index 8edfed49ae..90c2d22cca 100644
--- a/examples/nuxt-app/README.md
+++ b/examples/nuxt-app/README.md
@@ -1,31 +1,55 @@
-# Nuxt 3 Minimal Starter
+# Nuxt-app
-We recommend to look at the [documentation](https://v3.nuxtjs.org).
+A Nuxt 3 app with all Ripple and SDP core inclusions.
-## Setup
+Separate [example layers](#example-layers) are included under [/layers](/layers) to demonstrate specific features and use cases. These can be disabled in [nuxt.config.ts](nuxt.config.ts) if needed.
-Make sure to install the dependencies
+## Dev mode
+
+Copy [.example.env](.example.env) to `.env` if using non-reference back end / site ID.
+
+Install monorepo deps
```bash
-yarn install
+pnpm i
```
-## Development
+Start the server in dev mode
-- Copy `.example.env` to `.env`
+```bash
+pnpm -F nuxt-app dev
+```
-Start the development server on http://localhost:3000
+Now serving on [http://localhost:3000](http://localhost:3000)
+
+## Build mode (production-like)
+
+Build the app to `.output`
```bash
-yarn dev
+pnpm -F nuxt-app build
```
-## Production
+Start the server on `.output` in build mode
+
+```bash
+pnpm -F nuxt-app start
+```
-Build the application for production:
+Same as above, but using `.env` for runtime environment
```bash
-yarn build
+pnpm -F nuxt-app preview
```
-Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).
+Now serving on [http://localhost:3000](http://localhost:3000)
+
+## Example layers
+
+1. [layers/example-components](layers/example-components)
Examples of custom components (used in cypress tests)
+
+2. [layers/fixture-api](layers/fixture-api)
Use json fixtures instead of back end API calls
+
+3. [layers/map-features](layers/map-features)
Map features including popup, side panel and shape layer (used in cypress tests)
+
+4. [layers/ripple-ui-forms-ext](layers/ripple-ui-forms-ext)
Extend `ripple-ui-forms` with a custom control
diff --git a/examples/nuxt-app/layers/example-components/README.md b/examples/nuxt-app/layers/example-components/README.md
new file mode 100644
index 0000000000..cc498dd173
--- /dev/null
+++ b/examples/nuxt-app/layers/example-components/README.md
@@ -0,0 +1,96 @@
+## About this layer
+
+A collection of custom components for specific use cases.
+
+1. [components/global/TableExtraContentComponentExample.vue](components/global/TableExtraContentComponentExample.vue)
Use custom mappings for extra content in a non-standard column e.g.
+
+ ```json
+ "props": {
+ "offset": 0,
+ "showExtraContent": true,
+ "caption": "My Table",
+ "footer": "Some notes about the table",
+ "headingType": { "horizontal": true, "vertical": true },
+ "columns": [
+ {
+ "label": "Recommendation",
+ "objectKey": "field_fv_recommendation_number"
+ },
+ { "label": "Title", "component": "TideSearchListingTableLink" },
+ {
+ "label": "Category",
+ "objectKey": "field_fv_recommendation_category_name"
+ },
+ { "label": "Status", "objectKey": "fv_recommendation_status" }
+ ],
+ "extraContent": {
+ "component": "TableExtraContentComponentExample",
+ "props": {
+ "label": "Details"
+ }
+ }
+ ...
+ ```
+
+2. [components/global/TableExtraContentItemComponentExample.vue](components/global/TableExtraContentItemComponentExample.vue)
Call `getSearchResultValue` and map to component. e.g.
+ ```json
+ "extraContent": {
+ "items": [
+ {
+ "objectKey": "Organisation"
+ },
+ {
+ "label": "Funded for",
+ "objectKey": "Funded For"
+ },
+ {
+ "label": "Email",
+ "objectKey": "Email",
+ "component": "TideSearchListingTableEmail"
+ },
+ {
+ "label": "Website",
+ "objectKey": "Website/Links",
+ "objectTextKey": "Organisation",
+ "component": "TideSearchListingTableUrl"
+ },
+ {
+ "objectKey": "Statewide Service",
+ "component": "TableExtraContentItemComponentExample",
+ "props": {
+ "variant": "dark"
+ }
+ }
+ ]
+ }
+ ```
+
+3. [components/global/TideSearchBarComponentExample.vue](components/global/TideSearchBarComponentExample.vue)
Add a custom control to search bar, backed with a custom function:
+ ```json
+ "customQueryConfig": {
+ "component": "TideSearchBarComponentExample",
+ "function": "exampleQueryFunction"
+ },
+ ...
+ ```
+
+4. [components/global/TideSearchBelowFilter.vue](components/global/TideSearchBelowFilter.vue)
Testing the `belowFilter` component slot used in `searchConfig`, e.g.
+ ```json
+ "layoutConfig": {
+ "belowFilter": {
+ "component": "TideSearchBelowFilter"
+ }
+ },
+ ...
+ ```
+
+5. [components/global/TideSearchEmpty.vue](components/global/TideSearchEmpty.vue)
Testing the `empty` component slot used in `searchConfig` used to override the default message for no results, e.g.
+ ```json
+ "results": {
+ "empty": {
+ "component": "TideSearchEmpty"
+ },
+ ...
+ ```
+
+6. [components/global/TideSearchResultExampleSkeleton.vue](components/global/TideSearchResultExampleSkeleton.vue)
Skeleton to demonstrate a specific search result composition
diff --git a/examples/nuxt-app/components/global/TableExtraContentComponentExample.vue b/examples/nuxt-app/layers/example-components/components/global/TableExtraContentComponentExample.vue
similarity index 100%
rename from examples/nuxt-app/components/global/TableExtraContentComponentExample.vue
rename to examples/nuxt-app/layers/example-components/components/global/TableExtraContentComponentExample.vue
diff --git a/examples/nuxt-app/components/global/TableExtraContentItemComponentExample.vue b/examples/nuxt-app/layers/example-components/components/global/TableExtraContentItemComponentExample.vue
similarity index 100%
rename from examples/nuxt-app/components/global/TableExtraContentItemComponentExample.vue
rename to examples/nuxt-app/layers/example-components/components/global/TableExtraContentItemComponentExample.vue
diff --git a/examples/nuxt-app/components/global/TideSearchBarComponentExample.vue b/examples/nuxt-app/layers/example-components/components/global/TideSearchBarComponentExample.vue
similarity index 100%
rename from examples/nuxt-app/components/global/TideSearchBarComponentExample.vue
rename to examples/nuxt-app/layers/example-components/components/global/TideSearchBarComponentExample.vue
diff --git a/examples/nuxt-app/components/global/TideSearchBelowFilter.vue b/examples/nuxt-app/layers/example-components/components/global/TideSearchBelowFilter.vue
similarity index 100%
rename from examples/nuxt-app/components/global/TideSearchBelowFilter.vue
rename to examples/nuxt-app/layers/example-components/components/global/TideSearchBelowFilter.vue
diff --git a/examples/nuxt-app/components/global/TideSearchEmpty.vue b/examples/nuxt-app/layers/example-components/components/global/TideSearchEmpty.vue
similarity index 100%
rename from examples/nuxt-app/components/global/TideSearchEmpty.vue
rename to examples/nuxt-app/layers/example-components/components/global/TideSearchEmpty.vue
diff --git a/examples/nuxt-app/components/global/TideSearchResultExampleSkeleton.vue b/examples/nuxt-app/layers/example-components/components/global/TideSearchResultExampleSkeleton.vue
similarity index 100%
rename from examples/nuxt-app/components/global/TideSearchResultExampleSkeleton.vue
rename to examples/nuxt-app/layers/example-components/components/global/TideSearchResultExampleSkeleton.vue
diff --git a/examples/nuxt-app/layers/example-components/nuxt.config.ts b/examples/nuxt-app/layers/example-components/nuxt.config.ts
new file mode 100644
index 0000000000..f716d9f9da
--- /dev/null
+++ b/examples/nuxt-app/layers/example-components/nuxt.config.ts
@@ -0,0 +1,3 @@
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({})
diff --git a/examples/nuxt-app/layers/fixture-api/README.md b/examples/nuxt-app/layers/fixture-api/README.md
new file mode 100644
index 0000000000..fcc835c60e
--- /dev/null
+++ b/examples/nuxt-app/layers/fixture-api/README.md
@@ -0,0 +1,11 @@
+## About this layer
+
+This layer holds a couple of complete page layouts that can be used to test specific use cases.
+
+No backend is needed, the API is stubbed with flat file json fixtures (also used for cypress).
+
+1. [_fixture/page](http://localhost:3000/_fixture/page) Fixtures both page and site content, leaves sidebar slot open for debug
+
+2. [_fixture/tide-site](http://localhost:3000/_fixture/tide-site) Fixtures page content, but uses back end for site content
+
+3. [_fixture/page-exposed](http://localhost:3000/_fixture/page-exposed) Fixtures both page and site content, expose all layout slots
diff --git a/examples/nuxt-app/layers/fixture-api/nuxt.config.ts b/examples/nuxt-app/layers/fixture-api/nuxt.config.ts
new file mode 100644
index 0000000000..f716d9f9da
--- /dev/null
+++ b/examples/nuxt-app/layers/fixture-api/nuxt.config.ts
@@ -0,0 +1,3 @@
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({})
diff --git a/examples/nuxt-app/pages/_form.vue b/examples/nuxt-app/layers/fixture-api/pages/_fixture/page-exposed.vue
similarity index 94%
rename from examples/nuxt-app/pages/_form.vue
rename to examples/nuxt-app/layers/fixture-api/pages/_fixture/page-exposed.vue
index bef3f4cb97..692b2fa804 100644
--- a/examples/nuxt-app/pages/_form.vue
+++ b/examples/nuxt-app/layers/fixture-api/pages/_fixture/page-exposed.vue
@@ -80,8 +80,6 @@
diff --git a/examples/nuxt-app/pages/_layout.vue b/examples/nuxt-app/layers/fixture-api/pages/_fixture/page.vue
similarity index 62%
rename from examples/nuxt-app/pages/_layout.vue
rename to examples/nuxt-app/layers/fixture-api/pages/_fixture/page.vue
index 9b470f170b..93c5c014ab 100644
--- a/examples/nuxt-app/pages/_layout.vue
+++ b/examples/nuxt-app/layers/fixture-api/pages/_fixture/page.vue
@@ -7,8 +7,6 @@
diff --git a/examples/nuxt-app/pages/_fixture.vue b/examples/nuxt-app/layers/fixture-api/pages/_fixture/tide-site.vue
similarity index 73%
rename from examples/nuxt-app/pages/_fixture.vue
rename to examples/nuxt-app/layers/fixture-api/pages/_fixture/tide-site.vue
index 3cc0a3976f..7cdaedd601 100644
--- a/examples/nuxt-app/pages/_fixture.vue
+++ b/examples/nuxt-app/layers/fixture-api/pages/_fixture/tide-site.vue
@@ -3,7 +3,7 @@
diff --git a/examples/nuxt-app/nuxt.config.ts b/examples/nuxt-app/nuxt.config.ts
index 1e31a21e82..b306f8f431 100644
--- a/examples/nuxt-app/nuxt.config.ts
+++ b/examples/nuxt-app/nuxt.config.ts
@@ -1,4 +1,5 @@
import { defineNuxtConfig } from 'nuxt/config'
+
export default defineNuxtConfig({
runtimeConfig: {
public: {
@@ -20,11 +21,15 @@ export default defineNuxtConfig({
'@dpc-sdp/nuxt-ripple-analytics',
'@dpc-sdp/nuxt-ripple-preview',
'@dpc-sdp/ripple-sdp-core',
+ // Local layers
+ './layers/example-components',
+ './layers/fixture-api',
+ './layers/map-features',
'./layers/ripple-ui-forms-ext'
],
// Nuxt devtools
sourcemap: true,
devtools: {
- enabled: true
+ enabled: false
}
})