> ## Documentation Index
> Fetch the complete documentation index at: https://hm-95ec977f.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Install daisyUI for Nuxt

export const CodeRunner = props => {
  const code = props.code;
  const language = props.language || "bash";
  const filename = props.filename;
  const [hasRun, setHasRun] = React.useState(false);
  const copyToClipboard = async text => {
    try {
      await navigator.clipboard.writeText(text);
    } catch (err) {
      const textArea = document.createElement('textarea');
      textArea.value = text;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
    }
  };
  const handleCopy = async () => {
    await copyToClipboard(code);
  };
  const handleRun = async () => {
    setHasRun(true);
    await copyToClipboard(code);
    try {
      window.location.href = 'kmtrigger://macro=web_2_terminal';
    } catch (err) {
      console.error('Could not trigger URL scheme:', err);
    }
  };
  const highlightCode = (code, language) => {
    if (typeof window !== "undefined" && window.Prism && window.Prism.languages[language]) {
      return window.Prism.highlight(code, window.Prism.languages[language], language);
    }
    return code;
  };
  if (typeof document === "undefined") {
    return null;
  }
  const highlightedCode = highlightCode(code, language);
  return <div className="hover:!border-primary dark:hover:!border-primary-light" style={{
    margin: "20px 0",
    borderRadius: "12px",
    overflow: "hidden",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    backgroundColor: "rgba(0, 0, 0, 0.3)",
    backdropFilter: "blur(10px)",
    WebkitBackdropFilter: "blur(10px)",
    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
    filter: hasRun ? "grayscale(1) blur(2px)" : "none",
    opacity: hasRun ? 0.6 : 1,
    transition: "all 0.3s ease"
  }}>
      <div style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "8px 16px",
    backgroundColor: "rgba(255, 255, 255, 0.05)",
    borderBottom: "1px solid rgba(255, 255, 255, 0.1)"
  }}>
        {filename && <span style={{
    fontSize: "13px",
    color: "rgba(255, 255, 255, 0.8)",
    fontWeight: "500",
    fontFamily: "monospace"
  }}>
            {filename}
          </span>}
        
        <div style={{
    display: "flex",
    gap: "4px",
    marginLeft: "auto"
  }}>
          <button onClick={handleCopy} style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "32px",
    height: "32px",
    border: "none",
    borderRadius: "6px",
    cursor: "pointer",
    backgroundColor: "transparent",
    color: "rgba(255, 255, 255, 0.6)",
    transition: "all 0.2s ease"
  }} onMouseEnter={e => {
    e.target.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
    e.target.style.color = "rgba(255, 255, 255, 0.9)";
    e.target.style.transform = "scale(1.05)";
  }} onMouseLeave={e => {
    e.target.style.backgroundColor = "transparent";
    e.target.style.color = "rgba(255, 255, 255, 0.6)";
    e.target.style.transform = "scale(1)";
  }} title="Copy code">
            <Icon icon="copy" size={16} />
          </button>
          
          <button onClick={handleRun} style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "32px",
    height: "32px",
    border: "none",
    borderRadius: "6px",
    cursor: "pointer",
    backgroundColor: "transparent",
    color: "rgba(34, 197, 94, 0.8)",
    transition: "all 0.2s ease"
  }} onMouseEnter={e => {
    e.target.style.backgroundColor = "rgba(34, 197, 94, 0.1)";
    e.target.style.color = "rgba(34, 197, 94, 1)";
    e.target.style.transform = "scale(1.05)";
  }} onMouseLeave={e => {
    e.target.style.backgroundColor = "transparent";
    e.target.style.color = "rgba(34, 197, 94, 0.8)";
    e.target.style.transform = "scale(1)";
  }} title="Run in terminal">
            <Icon icon="play" size={16} />
          </button>
        </div>
      </div>

      <div style={{
    padding: "16px",
    backgroundColor: "rgba(0, 0, 0, 0.2)"
  }}>
        <pre style={{
    margin: "0",
    padding: "0",
    fontSize: "14px",
    lineHeight: "1.5",
    fontFamily: "'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
    overflowX: "auto",
    color: "#f8f8f2",
    backgroundColor: "transparent"
  }}>
          <code className={`language-${language}`} dangerouslySetInnerHTML={{
    __html: highlightedCode
  }} />
        </pre>
      </div>
    </div>;
};

### 1. Create a new Nuxt project

Create a new Nuxt project in the current directory

<CodeRunner
  code="npx nuxi@latest init
npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest"
  language="bash"
/>

### 2. Install Tailwind CSS and daisyUI

```sh:Terminal theme={null}
npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
```

Add Tailwind CSS to Vite config

```js:nuxt.config.ts theme={null}
import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
  vite: {
    plugins: [tailwindcss()],
  },
  css: ["~/assets/app.css"],
});
```

Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)

```postcss:assets/app.css theme={null}
@import "tailwindcss";
@plugin "daisyui";
```

Now you can use daisyUI class names!