Skip to content

Latest commit

 

History

History
152 lines (120 loc) · 5.61 KB

README.md

File metadata and controls

152 lines (120 loc) · 5.61 KB

Hello carbon nuxt

This repository is designed to help you get started with integrating Carbon into a Nuxt application. It showcases best practices for setting up a new Nuxt app with Carbon, providing a solid foundation for your project.

If you are looking for a plain Vue 3 example, checkout Hello carbon Vue3

Packages used

  • Carbon for Vue 3 - Vue implementation of the Carbon Design System A collection of Carbon Components
  • Nuxt - The Intuitive Vue Framework
  • @nuxtjs/i18n - This repository demonstrates how to implement translations using @nuxtjs/i18n. All user interface (UI) elements and the majority of the content have been translated.
  • @sidebase/nuxt-auth - User authentication and sessions via authjs. Tested and working with IBM Id & w3 Id.
  • @nuxtjs/tailwindcss - Tailwind CSS with custom Carbon colors
  • winston - A logger for just about everything
  • Husky - pre-commit hooks
  • lint-staged - Run linters against staged git files
  • commit-lint- Helps your team adhere to a commit convention
  • cypress - Implement e2e tests with cypress to help screen PRs

Carbon styles

The carbon styles are imported as a pre-compiled css file. The fie is created by using sass on the command line to generate the css. See carbon-gray-90.scss for instructions on creating the css file.

Pages & Components

demo site for this repository

  • Header with mobile navigation under "hamburger" menu

    header

    • Language selection in the header bar, login and switcher buttons are also included
    • The login works with IBMid and other providers from next-auth

  • Home page

    • cv-grid,cv-row,cv-column
    • auth demo login with useAuth(), getProviders, and status

  • Characters page

    • cv-accordion with auth close function
    • tailwind custom color for title

  • Comics page

    • cv-tile, cv-modal

  • Events page

    • Fully translatable data table including controls and aria labels
    • Slotted data & headings
    • Searchable data
    • cv-data-table, cv-data-table-action, cv-data-table-heading
    • cv-data-table-row (expandable rows), cv-data-table-cell
    • cv-button, cv-toggle
    • REST API integrated with table paging

  • Page transitions

    • cv-loading

  • Server side

    • REST api calls with authentication check and caching of results
    • middleware logging with winston

🎨 Calling All UX Designers!

Hey there, creative geniuses! Are you a UX designer who loves to experiment, ideate, and bring interfaces to life? Well, guess what? You're more than welcome to join the fun here!

This project is a showcase for Carbon components with Nuxt, so the only guideline is to highlight those amazing components in your designs. Whether you:

  • Want to revamp the UI/UX for a smoother user experience,
  • Have creative ideas for showcasing Carbon components in unique ways,
  • Think the layout could use a bit more flair,
  • Or simply want to experiment and have fun...

You're in the right place!

No suggestion is too wild, and no contribution is too small. Go open a pull request or just open an issue with a Figma link, let your imagination run wild with the Carbon components. We’re here for brainstorming, prototyping, and pixel-perfect designs (or not-so-perfect ones—we’re cool with that too).

Prereqs

Setup

Make sure to install the dependencies:

# npm
npm install

Getting Started

A mock version of the comics endpoints is in mock-api.json. Load this in the Mockoon desktop app or start in the command line.

npm install -g @mockoon/cli
mockoon-cli start --data ./local-dev/mock/mock-api.json

Set up the authentication (local mock)

cd local-dev
docker compose up

This will launch a local openid keycloak server and allow you to log in with admin/potato-history

Copy .env.example to .env

cp .env.example .env

Edit .env and change any values for your system

Start the development server on

# npm
npm run dev

Server should be running at http://localhost:4507

Log in with admin/potato-history

Production

Build the application for production:

# npm
npm run build

Locally preview production build:

# npm
npm run preview

Check out the deployment documentation for more information.

Set environment vars on the deployed system

MARVEL_APIKEY=Your Marvel api key from https://developer.marvel.com/
MARVEL_PRIVATE_KEY=Your Marvel secret key from https://developer.marvel.com/
MARVEL_URL=https://gateway.marvel.com/

AUTH_PROVIDER=ibmid or w3id or github or someother prrovider
AUTH_ORIGIN=the auth url for your deployed site i.e. https://example.com/api/auth
NUXT_AUTH_SECRET=set to a long string
AUTH_CLIENT_ID=Login provider client id
AUTH_CLIENT_SECRET=Login provider client secret