Nuxt.jsでDaisyUIを利用する方法（備忘録）

daisyUIとは

オープンソースのtailwindcssのコンポーネントライブラリー
vuetifyと比較するとコンポーネントの種類は少ないが、tailwindcssが元になってるので、
当たり前ではあるがtailwindcssとの相性は抜群

個人的に使いやすさも可愛いさもいい感じで使っていて楽しい！

事前準備

nuxtのプロジェクトフォルダ作成

$ npx create-nuxt-app my-project
$ cd my-project

※UIフレームワークを何にするか質問されるがNone（何も利用しない）を選択する

daisyUIのインストール

まずはtailwindcssをインストールする

$ yarn add -D tailwindcss postcss@latest autoprefixer@latest @nuxt/postcss8
$ npx tailwindcss init

nuxt.config.jsに下記追記

nuxt.config.js

export default {
  buildModules: [
    '@nuxt/postcss8',
    // ...
  ],
}

nuxt.config.js

export default {
  build: {
    postcss: {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    },  
  }
}

$ npx tailwindcss initで作成されるtailwind.config.jsを下記のように修正する

tailwind.config.js

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

次にプロジェクトのルートディレクトリにassetsフォルダを作成し、さらにその中にcssフォルダを作成
assets/css/styles.cssを作成し、下記のように記載して保存する

assets/css/styles.css

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

※vs codeで開発している場合、postCSS Language Supportというプラグインをインストールすると文法違うよって怒られないようになります

先ほど作成したstyles.cssをnuxt.config.jsに記載して読み込ませます

nuxt.config.js

export default {
  css: [
    '@/assets/css/styles.css',
  ],
}

これでtailwindcssが利用できるようになりました。
tailwindcssだけでも十分コーディングが楽になりますが、daisyUIをインストールしてもっと楽をしていきましょう

$ yarn add daisyui

インストール完了後、tailwind.config.jsに下記内容を追記する

tailwind.config.js

module.exports = {
  //...
  plugins: [require("daisyui")],
}

これでdaisyUIが利用できるようになりました！

試しにdaisyUIを使ってみよう

pages/index.vue

<template>
  <div class="w-1/2 pt-40 mx-auto">
    <button class="btn btn-info">Info</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-error">Error</button>
  </div>
</template>

こんな感じでクラス2つで一瞬でボタンができちゃう

vuetifyでも簡単にボタンはできますがtailwindcssを自然に利用できるdaisyUIの使用感がgoodです
みなさんも是非一度使ってみてください・・・