Hello carbon vue3

This repository is designed to help you get started with integrating Carbon into a Vue 3 application. It showcases the 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

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

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.
• fetch — REST calls via fetch
• @vueuse — Lazy image loading, manage local storage, and many other useful utilities
• 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 and 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 and chat bubbles
• Includes tailwind with a 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
npm add -g npm
npm install

Compile and Hot-Reload for Development

npm run dev

Build and test locally

npm run local-build

Lint with ESLint

npm run lint

Update dependencies

npm update --interactive