chore: transform to module

README.md

@@ -1,75 +0,0 @@
-# Nuxt 3 Minimal Starter
-
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="max-w-7xl mx-auto py-24">
-    <UButton color="green" truncate>Click</UButton>
-  </div>
-</template>

assets/css/main.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package.json

@@ -1,31 +1,45 @@
 {
-  "name": "nuxt-app",
+  "name": "nuxt-ui3",
   "private": true,
   "type": "module",
-  "scripts": {
+  "exports": {
-    "build": "nuxt build",
+    ".": {
-    "dev": "nuxt dev",
+      "types": "./dist/types.d.ts",
-    "generate": "nuxt generate",
+      "import": "./dist/module.mjs",
-    "preview": "nuxt preview",
+      "require": "./dist/module.cjs"
-    "postinstall": "nuxt prepare",
+    }
-    "lint": "eslint ."
   },
-  "devDependencies": {
+  "main": "./dist/module.cjs",
-    "@nuxt/eslint-config": "^0.2.0",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "lint": "eslint .",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
     "@nuxt/kit": "^3.10.3",
+    "@nuxtjs/tailwindcss": "^6.11.4",
     "autoprefixer": "^10.4.18",
     "defu": "^6.1.4",
-    "eslint": "^8.57.0",
+    "nuxt-icon": "^0.6.8",
-    "nuxt": "npm:nuxt-nightly@pr-26085",
     "postcss": "^8.4.35",
     "radix-vue": "^1.4.9",
     "tailwind-variants": "^0.2.0",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.1"
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "vue-tsc": "^2.0.5"
   },
-  "dependencies": {
+  "devDependencies": {
-    "ohash": "^1.1.3"
+    "@nuxt/eslint-config": "^0.2.0",
+    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/schema": "^3.10.3",
+    "eslint": "^8.57.0",
+    "nuxt": "npm:nuxt-nightly@pr-26085",
+    "ohash": "^1.1.3",
+    "vue-tsc": "^2.0.5"
   }
 }

playground/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="max-w-7xl mx-auto py-24">
+    <UButton color="green" truncate icon="i-heroicons-rocket-launch">
+      Click
+    </UButton>
+  </div>
+</template>

playground/nuxt.config.ts

@@ -1,11 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  css: ['~/assets/css/main.css'],
+  modules: ['../src/module']
-  postcss: {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {}
-    }
-  }
 })

playground/tailwind.config.ts

@@ -0,0 +1,4 @@
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>>{
+}

playground/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

src/module.ts

@@ -1,5 +1,5 @@
 import { defu } from 'defu'
-import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir } from '@nuxt/kit'
+import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
@@ -9,10 +9,10 @@ export default defineNuxtModule({
       nuxt: '^3.10.0'
     }
   },
-  setup (_, nuxt) {
+  async setup (_, nuxt) {
     const resolver = createResolver(import.meta.url)
 
-    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui, {
+    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
       primary: 'green',
       gray: 'cool',
       icons: {
@@ -20,6 +20,19 @@ export default defineNuxtModule({
       }
     })
 
+    await installModule('nuxt-icon')
+    await installModule('@nuxtjs/tailwindcss', {
+      exposeConfig: true,
+      config: {
+        darkMode: 'class',
+        content: {
+          files: [
+            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}')
+          ]
+        }
+      }
+    })
+
     addComponentsDir({
       path: resolver.resolve('./runtime/components'),
       prefix: 'U',

src/runtime/components/Button.vue

@@ -5,7 +5,7 @@ import type { LinkProps } from './Link.vue'
 
 export const theme = {
   slots: {
-    base: 'focus:outline-none rounded-md font-medium',
+    base: 'inline-flex items-center focus:outline-none rounded-md font-medium',
     label: '',
     icon: 'flex-shrink-0'
   },
@@ -16,9 +16,15 @@ export const theme = {
       green: 'bg-green-500 hover:bg-green-700'
     },
     size: {
-      '2xs': 'px-2 py-1 text-xs gap-x-1',
+      '2xs': {
-      xs: 'px-2.5 py-1.5 text-xs gap-x-1.5',
+        base: 'px-2 py-1 text-xs gap-x-1'
-      sm: 'px-2.5 py-1.5 text-sm gap-x-1.5',
+      },
+      xs: {
+        base: 'px-2.5 py-1.5 text-xs gap-x-1.5'
+      },
+      sm: {
+        base: 'px-2.5 py-1.5 text-sm gap-x-1.5'
+      },
       md: 'px-3 py-2 text-sm gap-x-2',
       lg: 'px-3.5 py-2.5 text-sm gap-x-2.5',
       xl: 'px-3.5 py-2.5 text-base gap-x-2.5'
@@ -173,9 +179,9 @@ const trailingIconName = computed(() => {
 
 <template>
   <ULink :type="type" :disabled="disabled || loading" :class="ui.base()" v-bind="$attrs">
-    <!-- <slot name="leading" :disabled="disabled" :loading="loading">
+    <slot name="leading" :disabled="disabled" :loading="loading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.icon({ isLeading })" aria-hidden="true" />
-    </slot> -->
+    </slot>
 
     <span v-if="label || $slots.default" :class="ui.label({ truncate })">
       <slot>