CMLABS Components
CMLABS Components Design System only for NuxtJS 2 project using TailwindCSS as the base CSS Utility Framework.
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
<cm-editor>
component. -
floating-vue - used for
<cm-tooltip>
and<cm-dropdown>
components. -
v-calendar - used for
<cm-date-picker>
,<cm-date-time-picker>
, and<cm-time-picker>
components. -
vee-validate - automatically registers
<ValidationObserver>
and<ValidationProvider>
components with standard rules configuration. (see the configuration here) -
vt-notifications - used for
<cm-toast>
component. -
vue-cleave-component - used for
<cm-cleave>
component. -
vue-final-modal - used for
<cm-modal>
component. -
vue-js-toggle-button - used for
<cm-toggle>
component. -
vue-multipane - automatically registers
<Multipane>
and<MultipaneResizer>
components. -
vue-slider-component - used for
<cm-slider>
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 yourtailwind.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
- Add
@cmlabs/components
package to your project.
# Using npm
npm install @cmlabs/components
# Using yarn
yarn add @nuxtjs/tailwindcss
- Add
@cmlabs/components
to themodules
section ofnuxt.config.js
.
{
modules: [
'@cmlabs/components'
]
}
- Add boxicons cdn to your
nuxt.config.js
to use the icons.
{
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
Usage
Make sure to add the boxicons cdn in order to use bx-icon
syntax to render your icons.
Examples:
<cm-button outline variant="info">
Hello, World
</cm-button>
<cm-dropdown placement="bottom-start">
<template #toggler>
<cm-dropdown-toggler>
<div class="flex items-center gap-4">
<cm-icon
class="text-gray-80 text-xl"
icon="bx-cog"
/>
<p> Manage User </p>
</div>
</cm-dropdown-toggler>
</template>
<cm-dropdown-card>
...
</cm-dropdown-card>
</cm-button>