{"id":17152081,"url":"https://github.com/selemondev/nuxt-ui-vue","last_synced_at":"2025-02-23T10:32:25.532Z","repository":{"id":188664733,"uuid":"677033391","full_name":"selemondev/nuxt-ui-vue","owner":"selemondev","description":":construction: WIP Fully styled and customizable components from Nuxt UI to Vue 3.","archived":true,"fork":false,"pushed_at":"2024-03-01T20:15:33.000Z","size":651,"stargazers_count":47,"open_issues_count":5,"forks_count":4,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-02-12T10:18:34.997Z","etag":null,"topics":["component-framework","nuxt","nuxt-components","tailwindcss-components-library","ui-components","ui-framework","vue-component-library","vue-components","vue3-component-library","vue3-typescript","vue3-ui-framework"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/nuxt-ui-vue","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/selemondev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-08-10T15:23:54.000Z","updated_at":"2024-10-06T04:49:15.000Z","dependencies_parsed_at":"2023-08-16T10:58:48.020Z","dependency_job_id":"2b12f2c9-e3e3-4ec8-8ba8-d09fa0c3a2ed","html_url":"https://github.com/selemondev/nuxt-ui-vue","commit_stats":null,"previous_names":["selemondev/nuxtlabs-ui-vue","selemondev/nuxt-ui-vue"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fnuxt-ui-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fnuxt-ui-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fnuxt-ui-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fnuxt-ui-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/selemondev","download_url":"https://codeload.github.com/selemondev/nuxt-ui-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240304560,"owners_count":19780312,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-framework","nuxt","nuxt-components","tailwindcss-components-library","ui-components","ui-framework","vue-component-library","vue-components","vue3-component-library","vue3-typescript","vue3-ui-framework"],"created_at":"2024-10-14T21:42:46.018Z","updated_at":"2025-02-23T10:32:24.788Z","avatar_url":"https://github.com/selemondev.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\n\u003ch1 align=\"center\"🚧 \u003eNuxt-UI-Vue\u003c/h1\u003e\n\u003c/p\u003e\n\n## Current Versions\n\nWith each release of `nuxt-ui` a parallel update will be applied to `nuxt-ui-vue`, ensuring that the library is up to date and providing you, as the developer, with a seamless experience.\n\nBelow are the current versions of both libraries:\n\n| nuxt-ui          | nuxt-ui-vue      |\n|------------------|------------------|\n| v2.8.1           | v1.0.1-beta.9    |\n\n## Features\n\n- 🦾 **TypeScript Support** - Built with TypeScript in mind and from the ground up.\n- 🔥 **Icon** - Use any icon from [Iconify](https://icones.netlify.app/) in your project from your favourite icon set.\n-  🛠️ **On Demand Import** - Nuxt UI Vue comes with an intelligent resolver that automatically imports only used components.\n- ⚡️ **Powerful Tools** - Nuxt UI Vue is built on top of powerful tools such as TailwindCss, VueUse, Headless UI etc.\n- 🎨 **Themeable** - Customize any component to match your brand and style.\n\n## Getting Started \n\nAdd `Nuxt UI Vue` to your project by running one of the following commands below:\n\n```bash\n\n# pnpm\npnpm add nuxt-ui-vue\n\n# yarn\nyarn add nuxt-ui-vue\n\n# npm\nnpm install nuxt-ui-vue\n\n```\n\nAnd also add `@tailwindcss/forms` plugin by running the following command:\n\n```bash\n\n# pnpm\npnpm add -D @tailwindcss/forms\n\n# yarn\nyarn add --dev @tailwindcss/forms\n\n# npm\nnpm install -D @tailwindcss/forms\n\n```\n\n## Usage\n\n\n1. Register the `@tailwindcss/forms` plugin and add the `Nuxt-UI-Vue` theme file, the darkMode class and the tailwindCss colors configuration in your tailwind.config.cjs file as shown below:\n\n\n```ts\nimport tailwindColors from './node_modules/tailwindcss/colors'\n\nconst colorSafeList = []\n\nconst deprecated = ['lightBlue', 'warmGray', 'trueGray', 'coolGray', 'blueGray']\n\nfor (const colorName in tailwindColors) {\n  if (deprecated.includes(colorName))\n    continue\n\n  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]\n\n  const pallette = tailwindColors[colorName]\n\n  if (typeof pallette === 'object') {\n    shades.forEach((shade) =\u003e {\n      if (shade in pallette) {\n        colorSafeList.push(`text-${colorName}-${shade}`),\n        colorSafeList.push(`accent-${colorName}-${shade}`),\n        colorSafeList.push(`bg-${colorName}-${shade}`),\n        colorSafeList.push(`hover:enabled:bg-${colorName}-${shade}`),\n        colorSafeList.push(`focus:bg-${colorName}-${shade}`),\n        colorSafeList.push(`ring-${colorName}-${shade}`),\n        colorSafeList.push(`focus:ring-${colorName}-${shade}`),\n        colorSafeList.push(`border-${colorName}-${shade}`)\n      }\n    })\n  }\n}\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', 'node_modules/nuxt-ui-vue/dist/theme/*.{js,jsx,ts,tsx,vue}'],\n  darkMode: 'class',\n  safelist: colorSafeList,\n  theme: {\n    extend: {\n      colors: tailwindColors\n    },\n  },\n  plugins: [require('@tailwindcss/forms')],\n}\n```\n\nSince TailwindCss doesn't support dynamic class names, you need to configure the `tailwind.config.cjs` file as shown above. You can read more about safelisting tailwindcss classes [here](https://tailwindcss.com/docs/content-configuration#safelisting-classes)\n\n\n### Component registration\n\n\nWith `Nuxt UI Vue`, you have the flexibility to register components precisely as you wish:\n\n### Import All Components\n\nTo import all the components provided by `Nuxt UI Vue`, add `Nuxt UI Vue` in your main entry file as shown below:\n\nWith Nuxt-UI-Vue, you have the flexibility to register components precisely as you wish:\n\n```ts\nimport { createApp } from 'vue'\nimport './style.css'\nimport nuxtLabsTheme from 'nuxt-ui-vue/dist/theme/nuxtlabsTheme'\n\nimport install from 'nuxt-ui-vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(install, nuxtLabsTheme)\napp.mount('#app')\n```\n\n**By doing this, you are importing all the components that are provided by Nuxt-UI-Vue and in your final bundle all the components including the ones you didn't use will be bundled. Use this method of component registration if you are confident that you will use all the components.**\n\n### Individual Components with Tree Shaking\n\nProbably you might not want to globally register all the components but instead only import the components that you need. You can achieve this by doing the following: \n\n1. Import the `createUI` option as well as the components you need as shown below:\n\n```ts\nimport { createApp } from 'vue'\nimport './style.css'\nimport nuxtLabsTheme from 'nuxt-ui-vue/dist/theme/nuxtlabsTheme'\n\nimport { UButton, UDropdown, createUI } from 'nuxt-ui-vue'\n\nimport App from './App.vue'\n\nconst app = createApp(App)\n\nconst UI = createUI({\n  prefix: 'T',\n  components: [UDropdown, UButton],\n})\n\napp.use(UI, nuxtLabsTheme)\n\napp.mount('#app')\n```\n\n2. Now you can use the component as shown below:\n\n```vue\n\u003cscript setup lang='ts'\u003e\nconst items = [\n  [{\n    label: 'Profile',\n    avatar: {\n      src: 'https://avatars.githubusercontent.com/u/739984?v=4'\n    }\n  }], [{\n    label: 'Edit',\n    icon: 'heroicons:pencil-square-20-solid',\n    shortcuts: ['E'],\n    click: () =\u003e {\n      // eslint-disable-next-line no-console\n      console.log('Edit')\n    }\n  }, {\n    label: 'Duplicate',\n    icon: 'heroicons:document-duplicate-20-solid',\n    shortcuts: ['D'],\n    disabled: true\n  }], [{\n    label: 'Archive',\n    icon: 'heroicons:archive-box-20-solid'\n  }, {\n    label: 'Move',\n    icon: 'heroicons:arrow-right-circle-20-solid'\n  }], [{\n    label: 'Delete',\n    icon: 'heroicons:trash-20-solid',\n    shortcuts: ['⌘', 'D']\n  }]\n]\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"grid place-items-center w-full min-h-screen\"\u003e\n    \u003cdiv\u003e\n      \u003cTDropdown :items=\"items\" :popper=\"{ placement: 'bottom-start' }\"\u003e\n        \u003cTButton color=\"white\" label=\"Options\" trailing-icon=\"heroicons:chevron-down-20-solid\" /\u003e\n      \u003c/TDropdown\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nThe `prefix` option is only available for individual component imports.\n\n### Auto Imports with Tree Shaking\n\n**Nuxt-UI-Vue** comes with an intelligent resolver that automatically imports only used components.\n\nThis is made possible by leveraging a tool known as [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) which lets you auto import components on demand thus omitting import statements and still get the benefits of tree shaking.\n\nTo achieve this you need to do the following: \n\n1. Install the `unplugin-vue-components` package by running one of the following commands:\n\n```bash\n\n#pnpm\npnpm add -D unplugin-vue-components\n\n#yarn\nyarn add -D unplugin-vue-components\n\n#npm\nnpm i -D unplugin-vue-components\n\n```\n\n2. Head over to your `main.ts` or `main.js` file and set `registerComponents` to `false` as shown below:\n\n```ts\nimport { createApp } from 'vue'\nimport './style.css'\nimport nuxtLabsTheme from 'nuxt-ui-vue/dist/theme/nuxtlabsTheme'\n\nimport { createUI } from 'nuxt-ui-vue'\n\nimport App from './App.vue'\n\nconst app = createApp(App)\n\nconst UI = createUI({\n  registerComponents: false,\n})\n\napp.use(UI, nuxtLabsTheme)\n\napp.mount('#app')\n```\n\n3. Head over to your `vite.config.ts` or `vite.config.js` file and add the following:\n\n```ts\n// other imports\nimport { NuxtUIVueComponentResolver } from 'nuxt-ui-vue'\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineConfig({\n  plugins: [\n    // other plugins\n    Components({\n      resolvers: [\n        NuxtUIVueComponentResolver()\n      ]\n    })\n  ],\n})\n```\n\n4. Now you can simply use any component that you want and it will be auto imported on demand ✨\n\n```vue\n\u003cscript setup lang='ts'\u003e\nconst items = [\n  [{\n    label: 'Profile',\n    avatar: {\n      src: 'https://avatars.githubusercontent.com/u/739984?v=4'\n    }\n  }], [{\n    label: 'Edit',\n    icon: 'heroicons:pencil-square-20-solid',\n    shortcuts: ['E'],\n    click: () =\u003e {\n      // eslint-disable-next-line no-console\n      console.log('Edit')\n    }\n  }, {\n    label: 'Duplicate',\n    icon: 'heroicons:document-duplicate-20-solid',\n    shortcuts: ['D'],\n    disabled: true\n  }], [{\n    label: 'Archive',\n    icon: 'heroicons:archive-box-20-solid'\n  }, {\n    label: 'Move',\n    icon: 'heroicons:arrow-right-circle-20-solid'\n  }], [{\n    label: 'Delete',\n    icon: 'heroicons:trash-20-solid',\n    shortcuts: ['⌘', 'D']\n  }]\n]\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"grid place-items-center w-full min-h-screen\"\u003e\n    \u003cdiv\u003e\n      \u003cUDropdown :items=\"items\" :popper=\"{ placement: 'bottom-start' }\"\u003e\n        \u003cUButton color=\"green\" label=\"Options\" trailing-icon=\"heroicons:chevron-down-20-solid\" /\u003e\n      \u003c/UDropdown\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Component Customizations\n\nIn regards to customization, Nuxt UI Vue offers two ways of customizing your components. The first way is through the `variants` property and the second way is by creating your own `theme file`.\n\nHere is an example of customizing a `UButton` component through the `variants` property: \n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cUButton\n      :variants=\"{\n        'my-variant': {\n          rounded: 'rounded-full',\n        },\n      }\" :variant=\"['my-variant']\" color=\"red\" label=\"Button\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nBy default, the default `roundedness` of the `UButton` component is `rounded-md`. However, we have customized its appearance by using the variants property to change its `roundedness` and then we used the variant prop to pass our variant which is `my-variant`  ( you can name it whatever you want) to the `variant` array and now the `UButton` component will be rendered with a fully rounded appearance (rounded-full).\n\nYou can customize each component this way using the component's preset which can be found [here](./packages/nuxt-ui-vue/src/theme/nuxtLabsTheme.ts)\n\nFor any component that uses the `variant` prop such as the `UButton`, `UBadge`, `UInput`, `UTextarea`, `USelect`, etc, use the `intent` prop instead as shown below:\n\n```js\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cUButton intent=\"soft\" color=\"red\" label=\"Button\" /\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n```\n\n```js\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cUBadge color=\"red\" intent=\"solid\" label=\"Badge\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n\nThe `Notifications` component comes with a position prop to enable you to specify the position of the  `Notifications` component. To get started with it, you need to import the `injectToast()` function and the `UNotifications` component in your `App.vue` file as shown below:\n\n```vue\n\u003c!-- app.vue file --\u003e\n\u003cscript setup lang=\"ts\"\u003e\nimport { injectToast } from 'nuxt-ui-vue'\n\ninjectToast()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cHello /\u003e\n    \u003cUNotifications position=\"top-right\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nBy default, the position of the component is set to `bottom-right`.\n\nThen in your other component, for example, Hello.vue component, you can do the following:\n\n```vue\n\u003c!-- Hello.vue component --\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { useToast } from 'nuxt-ui-vue'\n\nconst toast = useToast()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cUButton\n    label=\"Show toast\" @click=\"toast.add({\n      title: 'Update downloaded.',\n      description: 'It will be installed on restart. Restart now?',\n      icon: 'octicon:desktop-download-24',\n    })\"\n  /\u003e\n\u003c/template\u003e\n```\n\n\n🥳 Well done, you can now go ahead and build your web application with ease.\n\n## Contributions\n\nContributions are welcome and encouraged! If you have any ideas or suggestions for new features, or if you encounter any bugs or issues, please open an issue or submit a pull request on the GitHub repository. \n\nDevelopers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md) and the [Contributing Guide](./CONTRIBUTING.md).\n\n## Credits\n\n- [@nuxt/ui](https://github.com/nuxt/ui)\n- [@headlessui/vue](https://headlessui.com)\n- [@vueuse/core](https://vueuse.org)\n- [TailwindCss](https://tailwindcss.com)\n\n## License\n\n[MIT](./LICENSE) License © 2023 [Selemondev](https://github.com/selemondev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselemondev%2Fnuxt-ui-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fselemondev%2Fnuxt-ui-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselemondev%2Fnuxt-ui-vue/lists"}