becem-gharbi / nuxt-naiveui Goto Github PK
View Code? Open in Web Editor NEWUnofficial Naive UI module for Nuxt
Home Page: https://nuxt-naiveui.bg.tn
License: MIT License
Unofficial Naive UI module for Nuxt
Home Page: https://nuxt-naiveui.bg.tn
License: MIT License
Hi there!
First of all, thanks for the great work and making it super easy to use naive-ui with nuxt! I used to use it "manually", but now am starting to switch to this library. During this I found one issue I can't seem to be able to get rid of:
Due to how theming is handled here, we don't only have light and dark themes, but also a mobile theme.
This theme in particular is something that will always cause layout shifts for me due to the fact that my completely SSR rendered, statically deployed page will not know if the device is a mobile device or not, and then change sizes of various things once it's loaded on the client and detects mobile/tablet. For me personally, disabling/getting rid of the mobile theme entirely would be the best solution.
It's nice how we can control the color themes with the composable, e.g. by forcing a specific one, or setting a default/preferred one.
I was hoping to find a similar utility to force/disable the mobile theme, but can't seem to find any solution.
Another option I thought of but didnt get working is somehow setting the ThemeConfig.mobile to an empty object or false. Obviously this didn't work since the themes are being merged, thus essentially falling back to the default mobile theme.
I would love to see any of the above mentioned, or another alternative solution to this, being included in a future version, and would also be open to working on it in a PR myself.
I primarily wanted to double check that this is currently indeed not possible, and if you are open to adding such an option.
For me personally, I think something close to the option of setting
{
...
mobile: false,
...
}
in the ThemeConfig
, and this, instead of merging, disabling mobile theme (or setting it to empty) entirely seems the best and also easiest in terms of being both easy to understand as well as not being breaking.
Please let me know what you think and how we could continue on this!
For reference, this is the PR where I'm migrating to use this library maybeanerd/diluz.io#202 as well as a preview deployment of it to show the layout shift: https://deploy-preview-202--diluzio.netlify.app/sebastian
Hey there - thanks for this great library @becem-gharbi! (:
Upgrading from 1.10.2 to 1.10.3 we noticed that all of our buttons (non naive ui buttons) have a white background. Before update:
After update (button is "invisible" due to white-on-white):
Looking at the changelog it may be due to global button
CSS override introduced in 97f9c3e?
Effecting other pseudo classes.
overriding n-button:hover
's background-color
please give option to not use runtime assets, or any solution for this.
https://nuxt-naiveui.bg.tn/ 网站的 github 图标,点进去是 https://github.com/becem-gharbi/nuxt-auth
Hi,
Thanks for fix 26, its work without error now.
I tried using colorModePreference to switch between dark and light modes, and it worked when using Chrome or Firefox browsers on a PC. However, it didn't work when tested on a mobile device or Safari. I could switch modes on one page, but when navigating to another page, the color mode reverted back to light.
Here my script for switch dark/light.
<script setup>
import { ref } from 'vue'
const { colorModePreference } = useNaiveColorMode();
var theme = useCookie('naive_color_mode_preference')
const toggleDark = (t) => colorModePreference.set(t === 'light' ? 'dark' : 'light');
</script>
It seems that this issue might be related to the use of cookies, which may not work as expected in browsers with stricter privacy settings.
I try to use localstorage like this:
import { ref, onMounted } from 'vue'
const { colorModePreference } = useNaiveColorMode();
var theme = ref('light')
const toggleDark = (t) => {
const newTheme = t === 'light' ? 'dark' : 'light'
colorModePreference.set(newTheme)
theme.value = newTheme
localStorage.setItem('theme', newTheme)
}
onMounted(() => {
if (localStorage.getItem('theme') === 'dark') {
theme.value = 'dark'
}
})
But still not work in Safari or Mobile device, maybe because colorModePreference try to get from cookie value.
My suggestion is that it might be better to store the state in localStorage rather than using cookies.
What's the difference between this module and https://github.com/huntersofbook/naive-ui-nuxt/ ?
(Maybe it would make sense to combine efforts and merge these projects if the goals and approaches overlap enough.)
If using pnpm without shamefully-hoist
, Nuxt will complain:
WARN Failed to resolve dependency: naive-ui, present in 'optimizeDeps.include'
WARN Failed to resolve dependency: vueuc, present in 'optimizeDeps.include'
WARN Failed to resolve dependency: date-fns-tz/formatInTimeZone, present in 'optimizeDeps.include'
when running pnpm + this 1.2.6. i updated packages and fell into it :/
fails on this block. any idea of what to check ?
/ Add types for volar
hooks: {
"prepare:types": ({ tsConfig, references }) => {
tsConfig.compilerOptions.types.push("naive-ui/volar");
references.push({
types: "naive-ui/volar"
});
}
},
NaiveIcon is displayed with an offset. As a backend I use tauri v1.5.1 + nuxt-naiveui v1.13.2 with SSR disabled (the situation is the same with SSR enabled). Perhaps I'm missing something or is this a bug? If you manually set the desired width and height of the range in the browser editor, it works as expected
Nuxt Build Error: [iconify-download-icons] ❌ [iconify-download-icons] failed to fetch collections from https://icon ify-icon-sets.vercel.app,
nuxt.config.ts setting naiveui,iconDownload=true
we can use addComponent
of @nuxt/kit
to replace unplugin-vue-components
and addImports
to replace unplugin-auto-import
. such as:
import naive from 'naive-ui'
const naiveComponents = Object.keys(naive).filter((name) =>
/^N[A-Z]*/.test(name)
)
const naiveComposables = [
'useDialog',
'useDialogReactiveList',
'useLoadingBar',
'useMessage',
'useNotification',
'useThemeVars'
]
// add imports for naive-ui components
naiveComponents.forEach((name) => {
addComponent({
export: name,
name: name,
filePath: "naive-ui",
})
})
// add imports for naive-ui composables
naiveComposables.forEach((name) => {
addImports({
name: name,
as: name,
from: 'naive-ui'
})
})
Because naive-ui
components and composables are placed under src folder. So I can only use the following code to get all the components.
const naiveComponents = Object.keys(naive).filter((name) =>
/^N[A-Z]*/.test(name)
)
other than
import { components as naiveComponents } from 'naive'
I don't know if I'm going to lose any components or composables by doing this.
<template>
<n-scrollbar ref="scroller">
...
</n-scrollbar>
</template>
<script setup lang="ts">
const scroller = ref();
onMounted(() => {
if (currentPath.value.length > 0) {
scrollToBottom()
}
});
const scrollToBottom = () => {
if (scroller.value.scrollTo) {
scroller.value.scrollTo({ position: 'bottom' })
console.log(scroller.value)
} else {
console.log(scroller.value.scrollTo)
}
};
</script>
在1.10版本,随意修改代码,触发hot update后,能在控制台中看到正常的scroller.value信息,但实际上scroller.value.scrollTo是undefined,具体原因我不会找出来。
在1.9版本,能正常运行scroller.value.scrollTo({ position: 'bottom' })。
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are pending. To force PRs open, click the checkbox below.
eslint
, vitest
)package.json
@iconify/vue ^4.1.1
@nuxt/kit ^3.5.3
defu ^6.1.2
naive-ui ^2.34.4
@nuxt/eslint-config ^0.1.1
@nuxt/module-builder ^0.4.0
@nuxt/schema ^3.5.3
@nuxt/test-utils ^3.5.3
changelogen ^0.5.3
eslint ^8.42.0
nuxt ^3.5.3
vitest ^0.32.0
playground/package.json
This package can help many developers, thank you!
Why not add it to https://github.com/nuxt/modules so that more developers can see it?
nuxt-naiveui/src/iconify-vite/index.ts
Line 30 in 954e01a
This line will send request to https://raw.githubusercontent.com/iconify/icon-sets/master/collections.json
. However, most people in China Mainland cannot access raw.githubusercontent.com
without using a proxy.
Currently it logs this:
ERROR [iconify-download-icons] fetch failed
ERROR Nuxt Build Error: fetch failed
<stack trackback>
If adding the url (COLLECTIONS_URL
) in the error message, we, Chinese developers will realize that we need to use a proxy.
i can't seem to use nuxtlink inside the naive ui menu's menuOptions. do you have a workaround for this ? @becem-gharbi
edit: i managed to wrap nuxt link in a new component NLink and use it inside menuOptions
export default defineNuxtLink({
componentName: 'NLink'
})
would love to remove this workaround.
i use the example from naiveui.com (with naive-config)
when passing object like { minRows: 3, maxRows: 5 }
to autosize
prop, it doesn't work. no errors in terminal and console
it only works without naive-config
<template>
<naive-config>
<n-space vertical>
<n-input placeholder="Autosizable" autosize style="min-width: 50%" />
<n-input
placeholder="Autosizable"
type="textarea"
size="small"
:autosize="{
minRows: 3,
maxRows: 5
}"
/>
<n-input
type="textarea"
placeholder="Autosizable"
:autosize="{
minRows: 3
}"
/>
</n-space>
</naive-config>
</template>
"@bg-dev/nuxt-naiveui": "^1.5.2",
"nuxt": "^3.8.1",
"vue": "^3.3.8",
"vue-router": "^4.2.5"
It seems that the latest compatibility change with nuxt-tailwind
broke the n-button hover effects.
The line background-color: var(--n-color) !important
overrides the color of the button on hover, This removes the default change of button color. Reverting to v1.2.1 on my project fixes the issue. I think using !important
is not the correct solution.
Hi!
tl;dr This module is not working with date-fns
version 3.x
Playground to replicate the issue: https://stackblitz.com/edit/nuxt-naiveui-datefns
I am using this module in project where I also use date-fns
package. Recently I upgraded from [email protected]
to the latest (by the time of writing this issue) version [email protected]
which causes an error on nuxt prepare
or nuxt dev
commands.
When running these commands it returns the following error
ERROR Nuxt module should be a function: @bg-dev/nuxt-naiveui
While placing some "breakpoints" (console logs 😉) into nuxt kit loadNuxtModuleInstance
method I get following
Error: Package subpath './_lib/cloneObject/index.js' is not defined by "exports" in /my/system/project/path/node_modules/date-fns/package.json
at new NodeError (node:internal/errors:405:5)
at exportsNotFound (node:internal/modules/esm/resolve:366:10)
at packageExportsResolve (node:internal/modules/esm/resolve:713:9)
at resolveExports (node:internal/modules/cjs/loader:584:36)
at Module._findPath (node:internal/modules/cjs/loader:658:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1120:27)
at Function.resolve (node:internal/modules/helpers:188:19)
at _resolve (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:251148)
at jiti (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:253746)
at /my/system/project/path/node_modules/date-fns-tz/formatInTimeZone/index.js:8:37
at evalModule (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:256443)
at jiti (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:254371)
at /my/system/project/path/node_modules/naive-ui/lib/time-picker/src/TimePicker.js:13:44
at evalModule (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:256443)
at jiti (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:254371)
at /my/system/project/path/node_modules/naive-ui/lib/time-picker/index.js:7:20
at evalModule (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:256443)
at jiti (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:254371)
at /my/system/project/path/node_modules/naive-ui/lib/date-picker/src/panel/datetime.js:8:23
at evalModule (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:256443)
at jiti (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:254371)
at /my/system/project/path/node_modules/naive-ui/lib/date-picker/src/DatePicker.js:22:36
at evalModule (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:256443)
at jiti (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:254371)
at /my/system/project/path/node_modules/naive-ui/lib/date-picker/index.js:7:20
at evalModule (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:256443)
at jiti (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:254371)
at /my/system/project/path/node_modules/naive-ui/lib/components.js:41:14
at evalModule (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:256443)
at jiti (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:254371)
at /my/system/project/path/node_modules/naive-ui/lib/preset.js:30:33
at evalModule (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:256443)
at jiti (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:254371)
at /my/system/project/path/node_modules/naive-ui/lib/index.js:21:16
at evalModule (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:256443)
at jiti (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:254371)
at /my/system/project/path/node_modules/@bg-dev/nuxt-naiveui/dist/module.mjs:3:39
at evalModule (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:256443)
at jiti (/my/system/project/path/node_modules/jiti/dist/jiti.js:1:254371)
at requireModule (file:///my/system/project/path/node_modules/@nuxt/kit/dist/index.mjs:2249:26)
at loadNuxtModuleInstance (file:///my/system/project/path/node_modules/@nuxt/kit/dist/index.mjs:2483:92)
at async installModule (file:///my/system/project/path/node_modules/@nuxt/kit/dist/index.mjs:2437:47)
at async initNuxt (file:///my/system/project/path/node_modules/nuxt/dist/index.mjs:3822:7)
at async loadNuxt (file:///my/system/project/path/node_modules/nuxt/dist/index.mjs:3920:5)
at async loadNuxt (file:///my/system/project/path/node_modules/@nuxt/kit/dist/index.mjs:2603:19)
at async Object.run (file:///my/system/project/path/node_modules/nuxi/dist/chunks/prepare.mjs:56:18)
at async runCommand$1 (file:///my/system/project/path/node_modules/nuxi/dist/shared/nuxi.4fde776c.mjs:1648:16)
at async runCommand$1 (file:///my/system/project/path/node_modules/nuxi/dist/shared/nuxi.4fde776c.mjs:1639:11)
at async runMain$1 (file:///my/system/project/path/node_modules/nuxi/dist/shared/nuxi.4fde776c.mjs:1773:7)
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
Hi,
This error seems to be thrown when trying to update a ref that was first undefined (or null / empty string) and used as the only value of some components (I tried the typography ones):
Here is an example of code leading to this error :
<template>
<div>
<n-text>{{ test }}</n-text>
</div>
</template>
<script lang="ts" setup>
const test = ref<string>() // ref<string>('') will give the same error
onMounted(() => {
setTimeout(() => test.value = 'test', 1000)
})
</script>
It happens only in SRR mode and only when the value is directly used as the component scope, so doing this would avoid the bug:
<n-text><span>{{ test }}</span></n-text>
The same test without a naive-ui component or without SSR works just fine.
Maybe it's a bug with naive-ui and not just this plugin?
Hello,
First of all, I wanted to thank you immensely for creating this GitHub repository! It is truly very useful to me!
I must now bring up a challenge I am facing: I'm desperately trying to integrate icons from phosphoricons.com (present in your nuxt-naiveui repo) into my , to no avail.
When I place <naive-icon name="ph-globe"></naive-icon>
in my template , the icon works perfectly.
But as soon as I try to render in the n-dropdown with phosphoricons, it seems like the <naive-icon>
component is not being read.
When I inspect the DOM html element, <naive-icon name=""></naive-icon>
does indeed appear in the dropdown, but the component seems to not be read.
I suspect I might have made an error somewhere, but it's not at all clear to me. Is it possible to add phosphor icons from the naive-icon component to a ?
Here is my complete code:
<template>
<!-- This icon work -->
<naive-icon name="ph-user"></naive-icon>
<n-dropdown :options="options">
<n-button>
my button
</n-button>
</n-dropdown>
</template>
<script>
/* Icons don't work */
const renderIcon = (iconClass) => {
return () => h("naive-icon", { name: iconClass });
};
const options = [
{
label: "My Profil",
icon: renderIcon('ph-user'),
key: "Profil",
},
{
label: "Setting",
icon: renderIcon('ph-gear-six'),
key: "Setting",
},
{
label: "Disconnected",
icon: renderIcon('ph-sign-out'),
key: "Disconnected",
}
];
export default {
setup() {
return {
options,
};
},
}
</script>
Hi, should I import naive-ui component from itself or this nuxt module explicitly?
Which is correct?
import { NButton } from 'naive-ui'
or
import { NButton } from '@bg-dev/nuxt-naiveui'
npx degit antfu/vitesse-nuxt3 my-nuxt3-app
cd my-nuxt3-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
pnpm install --save-dev @bg-dev/nuxt-naiveui
export default defineNuxtConfig({
//
modules: ["@bg-dev/nuxt-naiveui"],
//
});
pnpm run typecheck
> @ typecheck /home/robin/WebstormProjects/my-nuxt3-app
> vue-tsc --noEmit
node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_/node_modules/@bg-dev/nuxt-naiveui/dist/runtime/components/NaiveMenuLink.vue:53:41 - error TS2345: Argument of type 'string | RouteLocation' is not assignable to parameter of type 'RouteLocationAsString<RouteNamedMap> | RouteLocationAsRelativeTyped<RouteNamedMap, keyof RouteNamedMap> | RouteLocationAsPathTyped<...>'.
53 const path = to && router.resolve(to).path
~~
node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_/node_modules/@bg-dev/nuxt-naiveui/dist/runtime/components/NaiveMenuLink.vue:75:41 - error TS2345: Argument of type 'string | RouteLocation' is not assignable to parameter of type 'RouteLocationAsString<RouteNamedMap> | RouteLocationAsRelativeTyped<RouteNamedMap, keyof RouteNamedMap> | RouteLocationAsPathTyped<...>'.
Type 'RouteLocation' is not assignable to type 'RouteLocationAsString<RouteNamedMap> | RouteLocationAsRelativeTyped<RouteNamedMap, keyof RouteNamedMap> | RouteLocationAsPathTyped<...>'.
Type 'RouteLocation' is not assignable to type 'RouteLocationAsRelativeTyped<RouteNamedMap, keyof RouteNamedMap> | RouteLocationAsPathTyped<RouteNamedMap, keyof RouteNamedMap>'.
Type 'RouteLocation' is not assignable to type 'RouteLocationAsRelativeTyped<RouteNamedMap, keyof RouteNamedMap>'.
Types of property 'name' are incompatible.
Type 'string | symbol | undefined' is not assignable to type 'keyof RouteNamedMap | undefined'.
Type 'string' is not assignable to type 'keyof RouteNamedMap | undefined'.
75 const name = to && router.resolve(to).name?.toString()
~~
node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_/node_modules/@bg-dev/nuxt-naiveui/dist/runtime/components/NaiveMenuLink.vue:76:41 - error TS2345: Argument of type 'string | RouteLocation' is not assignable to parameter of type 'RouteLocationAsString<RouteNamedMap> | RouteLocationAsRelativeTyped<RouteNamedMap, keyof RouteNamedMap> | RouteLocationAsPathTyped<...>'.
76 const path = to && router.resolve(to).path
~~
node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_/node_modules/@bg-dev/nuxt-naiveui/dist/runtime/components/NaiveMenuLink.vue:81:33 - error TS2769: No overload matches this call.
The last overload gave the following error.
Type 'string | RouteLocation' is not assignable to type 'RouteLocationRaw | undefined'.
Type 'RouteLocation' is not assignable to type 'RouteLocationRaw | undefined'.
Type 'RouteLocation' is not assignable to type 'RouteLocationAsRelativeTyped<RouteNamedMap, "index"> | RouteLocationAsRelativeTyped<RouteNamedMap, "all"> | RouteLocationAsRelativeTyped<...> | RouteLocationAsPathTyped<...> | RouteLocationAsPathTyped<...> | RouteLocationAsPathTyped<...>'.
Type 'RouteLocation' is not assignable to type 'RouteLocationAsRelativeTyped<RouteNamedMap, "hi-id">'.
Types of property 'name' are incompatible.
Type 'string | symbol | undefined' is not assignable to type '"hi-id" | undefined'.
Type 'string' is not assignable to type '"hi-id"'.
81 ? () => h(NuxtLink, { to }, { default: () => route.label })
~~
node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1416:25
1416 export declare function h<P>(type: string | Component<P>, props?: (RawProps & P) | ({} extends P ? null : never), children?: RawChildren | RawSlots): VNode;
~
The last overload is declared here.
Found 4 errors in the same file, starting at: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_/node_modules/@bg-dev/nuxt-naiveui/dist/runtime/components/NaiveMenuLink.vue:53
Even without any further tsconfig @bg-dev/nuxt-naiveui
should not be checked by tsc. This might be a problem at first. I think somewhere in the code the types are imported so the typecheck will load it even with implicit exclude (via tsconfig)
The MenuLinkRoute.to
type should be RouteLocationRaw
(from typed vue router)
MenuLinkRoute.to
type to work System:
OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
Memory: 43.12 GB / 62.57 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
pnpm: 9.0.5 - ~/.nvm/versions/node/v20.11.0/bin/pnpm
bun: 1.1.0 - ~/.bun/bin/bun
Browsers:
Chrome: 121.0.6167.85
npmPackages:
@bg-dev/nuxt-naiveui: ^1.13.0 => 1.13.0
nuxt: ^3.11.2 => 3.11.2
useNotification()
cannot be used outside of script setup
. Using createDiscreteApi
as the proposed alternate has multiple downsides (configuration, bundle-size).
It would be useful to have a better useNotification()
abstraction that also works outside of script setup
, e.g., inside (Nuxt 3) plugins.
We have a Nuxt 3 app with a tanstack/query
-plugin. We want to trigger notifications from there when queries fail (as is recommended by them: https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#defining-on-demand-messages).
We cannot use useNotification()
inside the plugin as naive-ui
does not allow usage of useNotification()
outside of script-setup. For this they recommend to use createDiscreteApi
(see https://www.naiveui.com/en-US/os-theme/components/discrete). As far as I can tell useNotification()
does not work outside of script-setup as it uses the vue-inject pattern.
Based on this our solution so far is to use useNotification()
inside our script-setup and createDiscreteApi
inside the plugin. This approach has multiple problems:
createDiscreteApi
inlines message, notification, dialog and modal into the entry-point-bundle (see screenshot 1 below)useNotification
and createDiscreteApi
createDiscreteApi
created a new, separate vue-app (see their code on this), which cannot be good(2) can be resolved by sharing config between the n-notification-provider
and createDiscreteApi
, e.g., via app.config.ts
. The other points cannot be improved upon as far as we could tell.
I see two possible solutions:
useNotification()
inside a plugin
createDiscreteApi
Would it be possible for this module to provide a better useNotification()
abstraction that works both in script setup and outside of it?
And if this is not possible: Would it be possible to at least tree-shake createDiscreteApi
?
Hello,
Firstly, I want to express my gratitude for this outstanding module.
I have identified a TypeScript error that can be easily resolved. However, when the TypeScript check is enabled in Nuxt, it becomes quite troublesome due to the numerous error messages generated during the build process, stemming from the interaction with the props.
The type error is located within the NaiveNavbar.vue file, specifically related to the 'sticky' property.
When this property shares the same key as the constant 'sticky,' it results in multiple TypeScript errors like the following:
ERROR(vue-tsc) Property 'backIcon' does not exist on type 'never'.
The intersection '{ $: ComponentInternalInstance; $data: {}; $props: { routes?: NavbarRoute[] | undefined; drawerRoutes?: NavbarRoute[] | undefined; ... 21 more ...; style?: unknown; }; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => an...' was reduced to 'never' because property 'sticky' has conflicting types in some constituents.
To resolve this issue, you can follow one of these working solutions:
Here is the relevant code snippet:
const props = withDefaults(
defineProps<{
routes?: NavbarRoute[]
drawerRoutes?: NavbarRoute[]
menuToggleIcon?: string
menuToggleIconSize?: number
backIcon?: boolean
backIconSize?: number
menuInverted?: boolean
menuPlacement?: 'right' | 'left' | 'center'
drawerPlacement?: 'top' | 'right' | 'bottom' | 'left'
stick?: boolean
drawerClosable?: boolean
drawerWidth?: string | number
}>(),
{
routes: () => [],
drawerRoutes: () => [],
menuToggleIcon: 'ph:equals',
menuPlacement: 'left',
drawerPlacement: 'left',
menuInverted: false,
stick: true,
menuToggleIconSize: 26,
backIcon: false,
backIconSize: 26,
drawerWidth: '100%',
drawerClosable: true
}
)
const sticky = computed(() => (props.stick ? 'sticky' : 'static'))
I hope this helps resolve the issue. Thank you for your great work on this module!
Best regards,
After updating NUXT to version 3.8, it fails to run, and the error message is as follows
ERROR Importing directly from module entry points is not allowed. [importing @bg-dev/nuxt-naiveui from app.vue] 10:05:38
I'm getting an error on version 1.1.0 on Nuxt 3.4.3 which breaks the plugin. Everything seemed to be working fine on 1.0.11 with Nuxt 3.4.3.
[@vue/compiler-sfc] Failed to resolve extends base type. 08:55:40
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:
interface Props extends /* @vue-ignore */ Base {}
Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.
this is related to NaiveConfig.vue, if I modify the extend as requested, the plugin works again
interface NaiveConfigProps
extends /* @vue-ignore */ Omit<ConfigProviderProps, "themeOverrides" | "theme"> {
themeConfig?: ThemeConfig;
}
I'm not sure if this is an issue on my end or not, but prior to the 'npm update,' @bg-dev/nuxt-naiveui was working fine. However, after running npm update
, I encountered an error like the one below:
ERROR Cannot start nuxt: Missing "./esm/formatInTimeZone" specifier in "date-fns-tz" package 3:39:54 PM
at e (node_modules/@nuxt/vite-builder/node_modules/vite/dist/node/chunks/dep-3bba9c7e.js:21455:25)
at n (node_modules/@nuxt/vite-builder/node_modules/vite/dist/node/chunks/dep-3bba9c7e.js:21455:627)
at o (node_modules/@nuxt/vite-builder/node_modules/vite/dist/node/chunks/dep-3bba9c7e.js:21455:1297)
at resolveExportsOrImports (node_modules/@nuxt/vite-builder/node_modules/vite/dist/node/chunks/dep-3bba9c7e.js:28751:20)
at resolveDeepImport (node_modules/@nuxt/vite-builder/node_modules/vite/dist/node/chunks/dep-3bba9c7e.js:28770:31)
at tryNodeResolve (node_modules/@nuxt/vite-builder/node_modules/vite/dist/node/chunks/dep-3bba9c7e.js:28458:20)
at Context.resolveId (node_modules/@nuxt/vite-builder/node_modules/vite/dist/node/chunks/dep-3bba9c7e.js:28217:28)
at Object.resolveId (node_modules/@nuxt/vite-builder/node_modules/vite/dist/node/chunks/dep-3bba9c7e.js:44279:64)
at async node_modules/@nuxt/vite-builder/node_modules/vite/dist/node/chunks/dep-3bba9c7e.js:65919:21
at async node_modules/@nuxt/vite-builder/node_modules/vite/dist/node/chunks/dep-3bba9c7e.js:44924:20
Has anyone else experienced this error?"
Here my package.json
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@bg-dev/nuxt-naiveui": "^1.4.7",
"@nuxt/types": "^2.17.1",
"@nuxtjs/tailwindcss": "^6.8.0",
"nuxt": "^3.7.4",
"nuxt-icon": "^0.5.0"
},
"dependencies": {
"@pinia/nuxt": "^0.4.11",
"@tailwindcss/forms": "^0.5.6",
"pinia": "^2.1.6",
"preline": "^1.9.0"
},
"overrides": {
"vue": "latest"
}
}
Have you considered using nuxt hook to implement naive ui loading bar
const routes: NavbarRoute[] = [
{
label: "Overview",
path: "/:user/:formula",
}
];
The given path above should match links in the form of "bob/math" but it doesn't
[Vue warn] onScopeDispose() is called when there is no active effect scope to be associated cookieRef @ cookie.js:111
useCookie @ cookie.js:25
set @ useNaiveColorMode.mjs:29
(anonymous) @ colorMode.mjs:15
nuxi typecheck
complains about a typeerror in the navbar
node_modules/@bg-dev/nuxt-naiveui/dist/runtime/components/NaiveNavbar.vue:120:40 - error TS2769: No overload matches this call.
The last overload gave the following error.
Argument of type 'import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").DefineComponent<{ name: { type: globalThis.PropType<string>; required: true; }; size: { type: globalThis.PropType<number>; }; color: { type: globalThis.PropType<string>; }; borderRadius: { ...; }; iconColor: { ...; }; }, ... 11 mo...' is not assignable to parameter of type 'import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").DefineComponent<{ name: { type: globalThis.PropType<string>; required: true; }; size: { type: globalThis.PropType<number>; }; color: { type: globalThis.PropType<string>; }; borderRadius: { ...; }; iconColor: { ...; }; }, ... 11 mo...'.
Type 'DefineComponent<{ name: { type: PropType<string>; required: true; }; size: { type: PropType<number>; }; color: { type: PropType<string>; }; borderRadius: { type: PropType<number>; }; iconColor: { ...; }; }, ... 11 more ..., {}>' is not assignable to type 'ComponentPublicInstanceConstructor<{ $: ComponentInternalInstance; $data: {}; $props: { readonly iconColor?: string | undefined; readonly borderRadius?: number | undefined; readonly name: string; ... 13 more ...; readonly size?: number | undefined; }; ... 10 more ...; $watch<T extends string | ((...args: any) => any...'.
Type '{ $: import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance; $data: {}; $props: { readonly iconColor?: string | undefined; ... 15 more ...; readonly size?: number | undefined; }; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, c...' is not assignable to type '{ $: import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance; $data: {}; $props: { readonly iconColor?: string | undefined; ... 15 more ...; readonly size?: number | undefined; }; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, c...'. Two different types with this name exist, but they are unrelated.
Type '{ $: import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance; $data: {}; $props: { readonly iconColor?: string | undefined; ... 15 more ...; readonly size?: number | undefined; }; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, c...' is not assignable to type '{ $: import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance; $data: {}; $props: { readonly iconColor?: string | undefined; ... 15 more ...; readonly size?: number | undefined; }; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, c...'. Two different types with this name exist, but they are unrelated.
Types of property '$options' are incompatible.
Type 'import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<Readonly<globalThis.ExtractPropTypes<{ name: { type: globalThis.PropType<string>; required: true; }; size: { type: globalThis.PropType<number>; }; color: { type: globalThis.PropType<string>; }; borderRadius: {...' is not assignable to type 'import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<Readonly<globalThis.ExtractPropTypes<{ name: { type: globalThis.PropType<string>; required: true; }; size: { type: globalThis.PropType<number>; }; color: { type: globalThis.PropType<string>; }; borderRadius: {...'. Two different types with this name exist, but they are unrelated.
Type 'ComponentOptionsBase<Readonly<ExtractPropTypes<{ name: { type: PropType<string>; required: true; }; size: { type: PropType<number>; }; color: { type: PropType<string>; }; borderRadius: { type: PropType<number>; }; iconColor: { ...; }; }>>, ... 11 more ..., {}> & MergedComponentOptionsOverride' is not assignable to type 'ComponentOptionsBase<Readonly<ExtractPropTypes<{ name: { type: PropType<string>; required: true; }; size: { type: PropType<number>; }; color: { type: PropType<string>; }; borderRadius: { type: PropType<number>; }; iconColor: { ...; }; }>>, ... 11 more ..., {}>'.
Types of property 'data' are incompatible.
Type '((this: import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").CreateComponentPublicInstance<...>, vm: import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").CreateComponentPublicInstance<Readonly<globalThis.ExtractPropTypes<{ name: { type: globalThis.P...' is not assignable to type '((this: import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").CreateComponentPublicInstance<...>, vm: import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").CreateComponentPublicInstance<Readonly<globalThis.ExtractPropTypes<{ name: { type: globalThis.P...'. Two different types with this name exist, but they are unrelated.
Type '(this: import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").CreateComponentPublicInstance<...>, vm: import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").CreateComponentPublicInstance<Readonly<globalThis.ExtractPropTypes<{ name: { type: globalThis.Pr...' is not assignable to type '(this: import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").CreateComponentPublicInstance<...>, vm: import("D:/Programming/JabRefOnline/node_modules/@vue/runtime-core/dist/runtime-core").CreateComponentPublicInstance<Readonly<globalThis.ExtractPropTypes<{ name: { type: globalThis.Pr...'. Two different types with this name exist, but they are unrelated.
Type 'unknown' is not assignable to type '{}'.
120 icon: route.icon ? () => h(NaiveIcon, { name: route.icon }) : undefined,
~~~~~~~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1490:25
1490 export declare function h<P>(type: DefineComponent<P>, props?: (RawProps & P) | ({} extends P ? null : never), children?: RawChildren | RawSlots): VNode;
~
The last overload is declared here.
its this call here:
Hi! Can you please update the naive-ui dependency to the latest or is there any issue with it?
Provide access to the n-layout-sider properties of the NaiveLayoutSidebar component.
<n-icon size="40">
<naive-icon name="xxx" />
</n-icon>
For better compatibility with Naive Icon component size props.
naiveui: {
iconSize: "1em",
}
Maybe
type Unit = 'px' | 'rem' | 'em' | '%';
interface PublicConfig {
themeConfig?: ThemeConfig;
colorModePreference: ColorModePreference;
iconSize: number | `${number}${Unit}`;
}
Allow the drawer placement to be passed in as a prop
When start a new page, nuxt-naiveui will automatically set naive_color_mode_preference
But GDPR policy requires no cookie if user is not accepted.
How to control it in the first time which user haven't click the ACCEPT ALL
button?
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.