Nuxt3 RC4にTailwind Elementsを導入する（RCなので暫定）

RCでまだまだ対応ライブラリの少ないNuxt3ですが、TailwindCSSのモジュール@nuxtjs/tailwindcssは
本体の開発者がメンテナンスしてくれているためか、RC以前から問題なく動いているので使用しています。

今回アニメーション周りの動きなどが欲しくなったのでTailwindプラグインである
Tailwind Elementsをなんとか導入したのでメモ。

前提として前述の@nuxtjs/tailwindcssをインストールしてます
Introduction | Nuxt Tailwind

バージョン

"devDependencies": {
    "@nuxtjs/tailwindcss": "^5.1.3",
    "nuxt": "3.0.0-rc.4",

https://tailwindcss.nuxtjs.org/

Tailwind Elements Quick Start

yarn使ってるのでインストール

yarn add tw-elements

バージョン

 "tw-elements": "^1.0.0-alpha12"

プラグイン周りはドキュメントどおり設定します
tailwindcssの設定はnuxt.config.ts に記述してるのでこんな感じ

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
// 省略
  tailwindcss: {
    config: {
      content: ['./node_modules/tw-elements/dist/js/**/*.js'],
      plugins: [
        require('tw-elements/dist/plugin')
      ],
//省略

残るJSの読み込みですが、

<script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>

↑のパターンで、useHeadでscriptタグ追加でも動きました。
が、速度的にファイルをまとめてほしいので、
↓こちらのパターンでなんとかやります。

import 'tw-elements';

documentを使用しておりSSRには対応してないので、layoutやpageでimportするとエラーになるため、
client側だけで動くプラグイン利用します。

plugins/tw-elements.client.ts

import * as twElements from 'tw-elements'
export default twElements

内容はimportしてexportするだけ
一行で書けた気もするけどとりあえず動いたのでよし

アコーディオンのサンプルコードをコピペしてアニメーションも動くのを確認できました