selemondev / nuxt-ui-vue Goto Github PK

When used within a TypeScript project, the following error is thrown: Cannot find module 'nuxt-ui-vue/dist/theme/nuxtlabsTheme or its corresponding type declarations.

This error is thrown because TypeScript cannot find the theme declaration types.

I refer nuxtlabasTheme like import nuxtLabsTheme from 'nuxt-ui-vue/dist/theme/nuxtlabsTheme. but github ci builder will throw error

[vite]: Rollup failed to resolve import "nuxt-ui-vue/dist/theme/nuxtlabsTheme" from "/home/runner/work/b3d-frontend/b3d-frontend/web/src/ui/theme.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:

I build this well in local, but github ci builder always throw error through tried other vite config.

I found same case here: vitejs/vite#7312

So, can we change the export style of nuxtlabsTheme like export { default as nuxtlabsTheme } from '@/theme/nuxtlabsTheme' in index.ts? or same question have you met? how to solve it?

Thanks a lot. Best wishes to you.

I notice that nuxt-ui-vue use iconify to support icon. That is good framework. Now I want to add my own icon collection, then use them in nuxt-ui-vue.

import { addCollection } from '@iconify/vue'
addCollection({
    prefix: 's24',
    icons: tranIcons,
    width: 24,
    height: 24
  }, 'b3d')

for example

toast.add({  title: '1234',  timeout: 0, icon: '@b3d:s24:cross-filled' })

I find that loadIcon throw error in UIcon component. Any example can show how to use custom iconset?

any support for composables? like defineShortcuts...

Describe the bug
A clear and concise description of what the bug is.

When using image URLs from different providers, the image validation fails and displays a warning error in the console.

Rename nuxtlabs-ui-vue to nuxt-ui-vue so as to make the naming consistent across the repository to avoid confusion. This change will affect the project's name, package's name and documentation.

Is your feature request related to a problem? Please describe.

I notice that 'config' was used as global variants inject key. That will make user confused when same key is used in own project.

Describe the solution you'd like

I think we should use Symbol('nuxt-config') as the key and export it for user

Here is my first attempt in trying to replace @nuxthq/ui with nuxt-ui-vue in my nuxt app.

Here is a online demo of the original nuxt ui repo - https://pg-nuxtui.netlify.app/, github - https://github.com/pinegrow/pg-nuxtui

Reproduction with nuxt-ui-vue:
https://github.com/TechAkayy/pg-nuxtui-vue

Few issues:

1. I had to comment-out UAvatar component in my HeroSection.vue as I was getting some Image is not defined error.
2. I had my own safelisting logic already, and used it in place of nuxtlabs/ui module's ui > safelistColors options. But for some reason, my palette colors are getting ignored.
3. Nuxtlabs/ui uses the iconify's unocss format with the i- prefix. I installed @unocss/nuxt and other packages, but the icons are not getting working.

Thank you for this great effort. Will play it with it more.

Component notifications are not implemented. so 'useToast' cannot be used correctly.

Really cool ! Thanks a lot for all this work !

I use nuxt in many projects, and a build web extension with https://github.com/antfu/vitesse-webext
I plan to rewrite some projects with nuxtlabs/ui, and the web extension. Your repo is just what I need :)

I want to know about your workflow.
How do you follow the nuxtlabs/ui developement ? Do you watch every new commit on nuxtlabs/ui, or have you automatized some stuffs ? Do you plan to match exactly the same architecture and component ? And of course, will you follow all update made in nuxtlabs/ui ?

Thanks again.

Describe the bug
Assigning a variant to a Button does not do anything.

To Reproduce
Steps to reproduce the behavior:

1. Assign variant outline (or ghost/soft/link) to UButton component
   • e.g. <UButton variant="outline">Button</UButton> in any .vue template
2. See that no outline variant has been applied

Expected behavior
When assigning variant="outline" to the Button component, I'm expecting to see the Button have the outlined style shown in NuxtUI docs.

Screenshots

Additional context
Version: nuxt-ui-vue ^0.0.9

For example,

const notificationTransitions = {
  enter: variant.value.transitionEnterActiveClass,
  enterFrom: variant.value.transitionEnterFromClass,
  enterTo: variant.value.transitionEnterToClass,
  leave: variant.value.transitionLeaveActiveClass,
  leaveFrom: variant.value.transitionLeaveFromClass,
  leaveTo: variant.value.transitionLeaveToClass,
}

should be:

const notificationTransitions = {
  enterClass: variant.value.transitionEnterActiveClass,
  enterFromClass: variant.value.transitionEnterFromClass,
  enterToClass: variant.value.transitionEnterToClass,
  leaveClass: variant.value.transitionLeaveActiveClass,
  leaveFromClass: variant.value.transitionLeaveFromClass,
  leaveToClass: variant.value.transitionLeaveToClass,
}

you should check the component Transition is from '@headlessui/vue' or 'vue'

Describe the bug

I'm trying to implement my own theme following the documentation. However, there are certain parameters that are not being considered, such as UButton "size," "color", "intent" etc.

But when i change UButton "rounded" for example, it works...

To Reproduce

// main
...
import nuxtLabsTheme from './customTheme'

import { createUI } from 'nuxt-ui-vue'

import App from './App.vue'

const app = createApp(App)

const UI = createUI({
  registerComponents: false,
})

app.use(UI, nuxtLabsTheme)

...

// customTheme
export default {
 ...
 UButton: {
    base : {
     ....
       default : {
         ...
         color: "red" <------------------------
       }
    }
 }

Expected behavior
the default color of a button must be red, or i still have a green button

Describe the bug

As stated by @danielroe in the official nuxt ui lib's repo issue #642: "Looking at performance, I'd recommend removing the runtime lodash-es dependency. A lot of the utilities can be replaced with core JS, and I think also make it easier to reason about."

As it's very early days, would be great to have the npm package sync with the name as nuxt-ui-vue.

It's not taken yet on npm, and would be easy for new users to install easily, when the name sync with the npm package name.

The reason why nuxtlabs/ui didn't change their package name is probably because they existed long before it was made open-source - more details here.. nuxt/ui#538 (comment)

But, there might be a reason for your to keep it as *labs, if you want to retain the coupling with the upstream. But, naming a package as nuxtlabs might raise the assumption that it's one of nuxtlabs project, no harm there, but it's just cleaner to be simpler.

The Form component is used to validate form data using schema libraries such as Yup, Zod, Joi, Valibot or your own validation logic. It should work seamlessly with the FormGroup component to automatically display error messages around form elements.

The Form component requires the validate and state props for form validation.

• state - A reactive object that holds the current state of the form.
• validate - A function that takes the form's state as input and returns an array of FormError objects with the following fields:
• message - The error message to display.
• path - The path to the form element matching the name.