Hello carbon vue3

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

If you are looking for a Nuxt example, checkout Hello carbon nuxt

Packages used

• Carbon Vue3
• Vite - this is the default for new Vue3 projects instead of WebPack
• Pinia - this replaces Vuex store
• i18next - this repo demonstrates how to include translations using i18next. All UI elements are translated and most content is translated.
• superagent - I like this package better than axios and use it here to demo making REST calls
• v-lazy-image - All images are lazy loaded via this package
• 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-90.scss for instructions on creating the css file.

Pages & Components

This repo demo site

• Header with Side nav
  • Side nav with divider
  • Language selection in the header bar, login and switcher buttons are also included
• Home page
  • cv-grid,cv-row,cv-column
  • cv-aspect-ratio
  • REST API examples integrated with Pinia store
• Fish page
  • Fully translatable data table including controls and aria labels
  • Slotted data & headings
  • Searchable data
  • cv-data-table-skeleton
  • 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 examples integrated with Pinia store
• Bugs page
  • cv-accordion-skeleton
  • cv-accordion, cv-accordion-item
  • cv-tag
  • cv-icon-button
  • slotted title and content for accordion
  • REST API examples integrated with Pinia store
  • Fun 3D card flipper css
• Build-a-bug
  • cv-progress with custom icons
• Villagers page
  • cv-content-switcher, cv-content-switcher-button
  • cv-content-switcher-content
  • REST API examples integrated with Pinia store
  • Fun animated icons & chat bubbles
• Includes tailwind with basic Carbon colors theme

Coding guide

• Vue style guide The style guide is enforced with eslint-plugin-vue - Recommended.
• Prettier and eslint rules are enforced as pre-commit hooks via husky.

Recommended IDE Setup

WebStorm

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Project Setup

nvm use 18
npm add -g pnpm
pnpm install

Compile and Hot-Reload for Development

pnpm run dev

Build and test locally

pnpm run local-build

Lint with ESLint

pnpm run lint

Update dependencies

pnpm update --interactive