Devlos-ui NPM | npm.io

devlos-ui

Beautifully designed components to add to your projects.

Usage

Use the import statement to import any components needed.

import { DragSelect } from 'devlos-ui';

Simply use it as a component in any vue application.

<DragSelect
  v-model="selectedItems"
  :items="items"
  class="grid grid-cols-4 gap-4 border-2 border-black p-4 dark:border-white"
>
  <template #item="{ item }">
    <div
      class="flex flex-col items-center justify-center border border-black p-2 dark:border-white"
    >
      <div>ID: {{ item.id }}</div>
      <div>Name: {{ item.name }}</div>
      <div>Value: {{ item.value }}</div>
    </div>
  </template>
</DragSelect>

Installation

Create project

Start by creating a new Vue project using vite:

npm create vite@latest

Add Tailwind and its configuration

Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Add this import header in your main css file, src/index.css in our case:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ... */

Configure the tailwind template paths in tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};