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

Showing content from https://github.com/IBM/hello-carbon-vue3 below:

IBM/hello-carbon-vue3: Sample project showing how to use Carbon components in 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

• 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

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.

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

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

WebStorm

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

nvm use
npm add -g npm
npm install

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