How to use Carbon components in Vue3

by Vue.js Examples

Hello carbon vue3

This repo should help you get started with using Carbon with Vue3. The idea is that this app uses the best practices for starting a new app with Ve3.

Packages used

  • Carbon Vue3 – beta 0.0.6 (many components are still missing)
  • Vite – this seems to be 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

Pages & Components

  • 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, cv-data-table-cell
    • cv-button
    • 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
  • 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

Coding guide

  • Vue style guide The style guide is followed, but I do not know of a linter that finds style issues which means there are likely places I have missed to follow the guide. If you find something wrong, please fix it.
  • 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

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

GitHub

View Github