prezui-demo-test

v1.0.5

Published

5 months ago

A test Nuxt app for testing NPM workflows

0High
0Medium
0Low

jamiefeiss

Prez UI v4 Theme Starter Template

This project was bootstrapped by create-prez-app.

Quick start

In the project root directory, install with your NPM package manager of choice (we recommend pnpm):

npm install

or for pnpm:

pnpm install

Then preview your theme by running:

npm run dev

or for pnpm:

pnpm dev

You may need to open the dev server (http://localhost:3000) in a second window in a private tab or different browser on first load to resolve the layout rendering error.

Configuration

Environment Variables

The main configuration required for running Prez UI are done with environment variables:

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.

Nuxt Config

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.

[!NOTE]
Server-side rendering (SSR) is currently not supported, but will be implemented in the near future.

See the Nuxt config docs for more info on how to configure Nuxt.

App Config

The app/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.

Extending your theme

This starter template uses 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.

[!IMPORTANT]
When updating to a newer version of prez-ui, ensure any overridden files that contain core logic are kept up-to-date.

See our theming documentation for a more in-depth guide on customising Prez UI.

Tailwind & CSS

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 app/assets/css/tailwind.css under :root with its colour values in HSL without commas between values. Dark mode variants of those variables goes in the .dark block. New variables are registered in the @theme inline block in the same file. For colours, prefix the variable with --color-*, e.g.:

/* app/assets/css/tailwind.css */

...

:root {
    /* define your Tailwind CSS variables (in HSL without commas) here */

    /* overridden variables */
    --primary: hsl(24.6 95% 53.1%); 
    --primary-foreground: hsl(60 9.1% 97.8%);

    /* new variable */
    --my-new-variable: hsl(70 10.8% 91.3%);
}

.dark {
    /* dark mode variants of CSS variables go here */
}

@theme inline {
    ...
    /* any new tailwind variables you declare go here. Colours are prefixed with --color-* */
    --color-my-new-variable: var(--my-new-variable);
}

You can also style your Prez UI theme using normal CSS by adding your styles to app/assets/css/theme.css.

Shadcn Components

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 more shadcn components in your theme, run a command like the following:

npx shadcn-vue@latest add <component>

pnpm dlx shadcn-vue@latest add <component>

These components are stored in app/components/ui, which should be kept separate to your theme's components.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme