@piveau/vanilla-nuxt

Vanilla Piveau UI with Nuxt

Look at the Nuxt documentation to learn more.

Prerequisites

• Use Node verion >= 22
• Have pnpm installed globally: npm install -g pnpm OR use corepack: corepack enable

Development Server

Start the development server on http://localhost:3000:

  pnpm dev

Production

Build the application for production:

  pnpm build

Locally preview production build:

  pnpm preview

Check out the deployment documentation for more information.

Build and run Docker image

  docker build -t vanilla-nuxt .
  docker run -p 3000:3000 vanilla-nuxt

In a deployment, you should set the environment variable NUXT_SESSION_PASSWORD to a random value.

Create your own Piveau UI

Start with a new Nuxt project

First, create a new Nuxt project using the Nuxt CLI

At the moment of writing, the recommended command is:

  pnpm create nuxt@latest <project-name>

(You should be fine with choosing the defaults in the following dialogs.)

pnpm requires you to approve build scrips:

  pnpm approve-builds

You can test your app by running:

  cd <project-name>
  pnpm dev

and opening http://localhost:3000 in your browser.

Integrate the Vanilla Piveau UI Layer

Replace the contents of app/app.vue with the following code:

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Replace the contents of nuxt.config.ts with:

export default defineNuxtConfig({
  extends: ['@piveau/vanilla-nuxt'],
})

The layer registers its components without directory prefixes. App components with the same name take priority. The named alias #layers/vanilla remains available for explicit references to layer files.

Create a new file .env with the appropriate endpoints (see .env.example):

NUXT_PUBLIC_BASE_URL=https://demo.piveau.io/
NUXT_PUBLIC_PIVEAU_HUB_REPO=https://demo.piveau.io/api/hub/repo/
NUXT_PUBLIC_PIVEAU_HUB_SEARCH=https://demo.piveau.io/api/hub/search/

Run the app again to see if everything works:

  pnpm dev

Start customizing your app

Examples:

• Overwrite components from the Vanilla Piveau UI layer by creating a component with the same name in your own components folder.
• Add a new page (with automatic routing!) by creating a .vue file in your own pages folder.
• Replace the header and footer by creating your own app/layouts/default.vue file.
• Add your own styles by creating a app/assets/css/main.css file and importing it in nuxt.config.ts:

css: [
  '~/assets/css/main.css',
]

• Replace just the header logo: the easiest way is to add your own piveau-logo-gray.svg to the public folder. Or, add your own Header.vue to the components folder with a modified logo source.