selemondev / nuxt-ui-vue Goto Github PK
View Code? Open in Web Editor NEW:construction: WIP Fully styled and customizable components from Nuxt UI to Vue 3.
Home Page: https://www.npmjs.com/package/nuxt-ui-vue
License: MIT License
:construction: WIP Fully styled and customizable components from Nuxt UI to Vue 3.
Home Page: https://www.npmjs.com/package/nuxt-ui-vue
License: MIT License
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:
Image is not defined
error.ui > safelistColors
options. But for some reason, my palette colors are getting ignored.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:
outline
(or ghost
/soft
/link
) to UButton component
<UButton variant="outline">Button</UButton>
in any .vue
templateExpected behavior
When assigning variant="outline"
to the Button component, I'm expecting to see the Button have the outlined style shown in NuxtUI docs.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.