Theming of PrezUI for Geoscience Australia.
See:
This project was bootstrapped by create-prez-app.
In the project root directory, install with your NPM package manager of choice (we recommend pnpm):
npm installThen preview your theme by running:
npm run devThe main configuration required for running Prez UI are done with environment variables:
| Variable | Description | Type | Default |
|---|---|---|---|
NUXT_PUBLIC_PREZ_API_ENDPOINT (required) |
Configures the Prez API endpoint | string | - |
NUXT_PUBLIC_PREZ_AUTO_DETECT_HTML |
Enables rendering HTML in data | boolean | false |
NUXT_PUBLIC_PREZ_AUTO_DETECT_MARKDOWN |
Enables rendering markdown & mermaid diagrams in data | boolean | false |
You can create an .env file in the project root to set these environment variable. See .env.example for all environment variable options and defaults. See Nuxt Environment Variables for more info on environment variables in Nuxt.
The nuxt.config.ts file contains your configuration for Nuxt, which extends upon Prez UI's base layer Nuxt config. This is also where you can customise things like the HTML <head> content, such as setting the document title, adding extra CSS files, etc. This is also where you can set Vite config.
See the Nuxt config docs for more info on how to configure Nuxt.
The app.config.ts file contains your app-level config, where you can customise the navigation items, renaming items throughout the application, customising prepended items in the breadcrumbs, and pagination config. This app config extends upon Prez UI's base layer app config.
This starter template uses Nuxt layers to extend upon the base Prez UI layer application, so you only need to customise what you need.
Overriding pages, components, layouts, composables and utils can be done by simply creating a file of the same name in the same directory structure for Nuxt to automatically replace it with your version in the application. Refer to Prez UI's base layer source code to help you override files.
See our theming documentation for a more in-depth guide on customising Prez UI.
Prez UI uses Tailwind for most of its styling, which you can use in this starter template to easily style using classes.
To override Prez UI's colour scheme (e.g. primary, secondary, etc.), or add your own variables to use in Tailwind, simply add a CSS variable of the same name in assets/css/tailwind.css under :root with its colour values in HSL without the hsl() function. Then register those variables in tailwind.config.js wrapped in the hsl() function under theme.extend.colors, e.g.:
// tailwind.config.js
module.exports = {
...
theme: {
extend: {
colors: {
// add your CSS variables here, e.g.:
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
}
}
}
...
}You can also style your Prez UI theme using normal CSS by adding your styles to assets/css/theme.css.
Prez UI uses the prez-components component library, which is based on the shadcn-vue component library. Shad comes preinstalled in this starter template, but if you need to add shadcn components in your theme, run a command like the following:
npx shadcn-vue@latest add button(Note: for pnpm, run pnpm dlx instead of npx)
These components are stored in components/ui, which should be kept separate to your theme's components.