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 header
    • 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


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


View Github