[Experimental] Vue implementation of the Carbon Design System
A collection of Carbon Components implemented using
Vue.js.
Vue.jsThe intention is to provide a library of robust and high-quality components to assist a developer working with Vue.js to leverage the Carbon Design System in their applications. The components are built with best practices (see our Contribution Guidelines for more details) to make full use of the Vue.js framework and integrate simply and efficiently into Vue.js applications. We intend these components to be exemplary, and therefore value getting the design principles and details right over rushing to a tactical delivery.
This project is a collaborative effort to embody the Carbon design system in Vue.js. In terms of guidance for the component designs, reference has been made to carbon components react.
This project is intended to be strictly focused on Vue.js implementations of the Carbon Components.
- Each component, used as documented, should render the HTML with attached CSS and JS as specified and illustrated by Carbon Components, nothing more, nothing less.
- If we find a defect or deficiency in the Carbon Components, we should raise an issue with that project, and assist in delivering a fix if possible, rather than cause this project to deviate from the Carbon Components.
- This project will not include additional components not part of Carbon Components, however helpful they seem, nor combination components to enable particular patterns of usage. Such add-ons may be very useful but should form satellite projects to this one.
- In terms of component structure, names and properties, this project will follow the lead established by carbon components react, and only deviate if there are compelling reasons to do so.
Initial development ongoing.
View available Vue.js components here. Usage information is available when you click the blue ? icon in the top right corner of the selected component.
The components do not import any of the carbon styles themselves. Use the SCSS or CSS from carbon-components to provide the styling. You can also use the unpkg cdn to bring in the styles wholesale - unpkg.com/carbon-components/css/carbon-components.css aliases the latest css file.
In your main js file (where you include Vue)
import CarbonComponentsVue from 'carbon-components-vue/src/index';
Vue.use(CarbonComponentsVue);<script>
...
import CvButton from 'carbon-components-vue/src/components/cv-button/cv-button';
...
components: {
CvButton,
},
...
</script>Please refer to the Contribution Guidelines before starting any work.
Fork, create branch, submit PR. The PR will be used as part of a review process.
sh deploy-gh-pages.sh