Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/davidnixon/hello-carbon-nuxt below:

davidnixon/hello-carbon-nuxt: Carbon components & Nuxt template with support for IBM id and other OpenID providers

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

If you are looking for a Carbon 11 with Vue, checkout Hello carbon 11 web components with Vue 3

• 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

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.

demo site for this repository

• Header with mobile navigation under "hamburger" menu

  • 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

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).

• nvm
• Node v22 nvm install 22
• Mockoon - run mocks for comics endpoints
• Docker or podman or Rancher Desktop

Make sure to install the dependencies:

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

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

Edit .env and change any values for your system

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

Log in with admin/potato-history

Build the application for production:

Locally preview production build:

Check out the deployment documentation for more information.

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4