Duxt UI
Getting Started

Installation

Install different packages that are needed to make the components work.

Nuxtr Extension

If you are a Nuxt 3 developer, I think this extension is a must have. Install it if you are using VSCode.

It can be found here --> https://marketplace.visualstudio.com/items?itemName=Nuxtr.nuxtr-vscode

Setup Tailwind CSS

For the components to work, you have to add Tailwind CSS to your project. You can do so manually by following the instructions given on the Tailwind CSS website OR you can use the Nuxtr extension to do it for you.

Visit the Nuxtr extension docs to see how to use it to configure Tailwind CSS.

Add cn helper

The cn helper is used to conditionally apply classes to an element. It is used in the components to make them more customizable.

  • Install the dependencies
yarn add class-variance-authority clsx tailwind-merge
  • Create a file called cn.ts or cn.helper.ts or whatever in the utils folder of your project.
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

/**
 * Helper function to merge tailwind classes with clsx
 */
export function cn(...inputs: any[]) {
  return twMerge(clsx(inputs));
}

Adding this file to the utils folder will make it available to all the components in your project as Nuxt 3 automatically imports all files in the utils folder.

Add Icons

For the icons to work, you have to add the nuxt-icon module to your project.

yarn add --dev nuxt-icon

Then, add the following to your nuxt.config.ts file.

export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    "nuxt-icon",
  ],
  // ...
});

Add Headless UI

Some components use Headless UI. Within this project, I decided to use the nuxt-headlessui module.

yarn add --dev nuxt-headlessui

Then, add the following to your nuxt.config.ts file.

export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    "nuxt-headlessui",
  ],
  // Optionally change the default prefix.
  headlessui: {
    prefix: "H",
  },
  // ...
});

Add VueUse

Some components use VueUse. You can add it by following the instructions on the VueUse website.

yarn add --dev @vueuse/nuxt @vueuse/core

Then add the following to your nuxt.config.ts file.

export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    "@vueuse/nuxt",
  ],
  // ...
});

Add Lodash

Some components use Lodash. You can add it by following the instructions on the Nuxt Lodash website.

yarn add --dev nuxt-lodash

Then add the following to your nuxt.config.ts file.

export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    "nuxt-lodash",
  ],
  // ...
});

Add Transitions

Some components use Vue Transitions. You can add it by following the instructions on the Vue Transitions website.

yarn add @morev/vue-transitions

Then add the following to your nuxt.config.ts file.

export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    "@morev/vue-transitions/nuxt",
  ],
  // ...
});

Configure tailwind.config.ts

For most of the form element's style to work, you have to add the @tailwindcss/forms plugin to your project.

yarn add --dev @tailwindcss/forms

In this UI thing, I am using the class strategy for the forms plugin.

Add the following to your tailwind.config.ts file.

import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";
import twForm from "@tailwindcss/forms";

export default <Partial<Config>>{
  darkMode: "class",
  theme: {
    extend: {
      container: {
        center: true,
        padding: {
          DEFAULT: "1rem",
          sm: "2rem",
          lg: "4rem",
          xl: "5rem",
          "2xl": "6rem",
        },
      },
      fontFamily: {
        sans: ["Inter var", ...fontFamily.sans],
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        info: {
          DEFAULT: "hsl(var(--info))",
          foreground: "hsl(var(--info-foreground))",
        },
        warning: {
          DEFAULT: "hsl(var(--warning))",
          foreground: "hsl(var(--warning-foreground))",
        },
        success: {
          DEFAULT: "hsl(var(--success))",
          foreground: "hsl(var(--success-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
    },
  },
  plugins: [twForm({ strategy: "class" })],
};

Configure CSS

Add the following to your tailwind.css file. This file is created by the Nuxtr extension. If you have tailwind styles located somewhere else, you can add it there.

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --warning: 38 93% 52%;
    --warning-foreground: 210 40% 98%;

    --info: 217 78% 44%;
    --info-foreground: 210 40% 98%;

    --success: 155 86% 43%;
    --success-foreground: 210 40% 98%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 94% 37%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground selection:bg-primary selection:text-primary-foreground;
  }
}

IntelliSense

If you are using VSCode, be sure to install the Tailwind CSS IntelliSense extension. This will give you IntelliSense for your Tailwind classes.

Introduction

Re-usable components for Nuxt 3 projects

Styling

Learn the convention behind the styling of the components.