CMLABS Components

[![npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

> CMLABS Components Design System only for NuxtJS 2 project using TailwindCSS as the base CSS Utility Framework.

- ✨  Release Notes
- 📖  Documentation

Introduction

This package uses @nuxt/postcss8 (for [TailwindCSS] requirement) and @nuxtjs/moment (for datepicker component) under the hood and register them automatically so it is encouraged for you not to install these packages in your project.

The base component uses cm-{component_name} as a prefix for conventional use and to avoid component name conflict issue. Some component uses external libraries (which have been automatically registered) as defined below:

- @blowstack/ckeditor-nuxt - used for component.
- floating-vue - used for and components.
- v-calendar - used for , , and components.
- vee-validate - automatically registers and components with standard rules configuration. (see the configuration here)
- vt-notifications - used for component.
- vue-cleave-component - used for component.
- vue-final-modal - used for component.
- vue-js-toggle-button - used for component.
- vue-multipane - automatically registers and components.
- vue-slider-component - used for component.

The library and dependencies are installed with respect of the Vue version for compatibility. For the next major updates, these library and dependencies will be upgraded. There is no need for you to install the listed packages above (the libraries have been installed automatically).

Please do *note that this package is used only in NuxtJS 2 project at the moment.

Features

- 👌  NuxtJS version 2 compatible.
- ⚡️  TailwindCSS version 3 installed.
- 🗜  Automatically merge your tailwind.config.js with the package's default configuration.
- 📦  Automatically install and configure peer component library dependencies.
- 🎨  Uses only CMLABS style guide. (see the theme here)
- 🪄  Accessibility and usability driven components.
- ⚙️  Configurable and composable components.
- ☀️  Light and Dark support for the components.

Installation

1. Add @cmlabs/components package to your project.

``bash


Using npm

npm install @cmlabs/components

Using yarn

yarn add @nuxtjs/tailwindcss
`

2. Add @cmlabs/components to the modules section of nuxt.config.js.

`js
{
modules: [
'@cmlabs/components'
]
}
`

3. Add boxicons cdn to your nuxt.config.js to use the icons.

`js
{
head: {
...
link: [
...
{
rel: 'stylesheet',
href: 'https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css'
},
...
],
...
},
}
`

That's it! You can now use Tailwind classes and CMLABS components in your Nuxt app ✨

📖  Read more about the configuration

Usage

Make sure to add the boxicons cdn in order to use bx-icon syntax to render your icons.

📖  Read more about boxicons usage

$3

`vue

Hello, World

`

`vue




...


``

📖  Read more about the components

License

MIT License

[npm-version-src]: https://img.shields.io/npm/v/@cmlabs/components/latest.svg
[npm-version-href]: https://npmjs.com/package/@cmlabs/components

[npm-downloads-src]: https://img.shields.io/npm/dt/@cmlabs/components.svg
[npm-downloads-href]: https://npmjs.com/package/@cmlabs/components

[license-src]: https://img.shields.io/npm/l/@nuxtjs/tailwindcss.svg
[license-href]: https://npmjs.com/package/@nuxtjs/tailwindcss