becem-gharbi / nuxt-naiveui Goto Github PK

View Code? Open in Web Editor NEW

153.0 153.0 20.0 2.81 MB

Unofficial Naive UI module for Nuxt

Home Page: https://nuxt-naiveui.bg.tn

License: MIT License

Vue 36.52% CSS 0.47% TypeScript 34.21% HTML 28.53% JavaScript 0.27%

naive-ui nuxt

nuxt-naiveui's Introduction

nuxt-naiveui's People

Contributors

Stargazers

Watchers

nuxt-naiveui's Issues

Mobile "theme" causes layout shifts

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

Upgrade to v1.10.3 leads to all of our application buttons being white

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?

affecting ui

nuxt-naiveui/src/runtime/assets/style.css

Line 2 in 614a180

background-color: var(--n-color) !important;

Effecting other pseudo classes.
overriding n-button:hover's background-color
please give option to not use runtime assets, or any solution for this.

doc 网站的 github 链接地址错误

https://nuxt-naiveui.bg.tn/ 网站的 github 图标，点进去是 https://github.com/becem-gharbi/nuxt-auth

colorModePreference not work on mobile device and Safari.

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.

Error: 500 Cannot read properties of undefined (reading 'colorModePreferenceCookieName')

version: 1.13

on Nuxt ^3.12.1

generateColorThemes get wrong color

v1.12.1 the primary color is not primary, but primaryHover.

Difference with other nuxt module

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.)

Bug: `Failed to resolve dependency` when using pnpm

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'

ERROR Cannot read properties of undefined (reading 'push')

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

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

failed to fetch collections from https://iconify-icon-sets.vercel.app

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

Can you remove unplugin

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.

after hot update, scrollbar scrollTo function undefined

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' })。

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

chore(deps): update all non-major dependencies (eslint, vitest)

Detected dependencies

npm

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

Check this box to trigger a request for Renovate to run again on this repository

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions')

when i use this component

const model = ref({
page: '/page/index/index',
pageQuery: '',
scene: ''
})

const options = [
{
label: 'ch_appcenter',
value: 'ch_appcenter'
},
]

</script>

it will show me bug for

nuxt-naiveui + nuxt-tailwind = wrong colors.

sss

Add to nuxt/modules

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?

Feature Request: print error details when fetching falling

nuxt-naiveui/src/iconify-vite/index.ts

Line 30 in 954e01a

const collections = await fetch(COLLECTIONS_URL).then(r => r.json())

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.

After generate, the index.html has a lot of styles !

Hello, I really need you help!

When I use npm run generate , to build my SSG project, I found the public index.html, its has a lot of style tags looks like:
<style cssr-id="n-button">.n-button ...

how to hidden this tags ? how to put them in link, just a .css file?

NuxtLink in naive ui's menu

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.

passing object to `autosize` of `n-input` doesn't work

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>

Expected behavior:

versions:

"@bg-dev/nuxt-naiveui": "^1.5.2",
"nuxt": "^3.8.1",
"vue": "^3.3.8",
"vue-router": "^4.2.5"

Button hover effects lost on v1.2.2

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.

ERROR(vue-tsc) Property 'themeConfig' does not exist on type '{}'

Module not working when project contains [email protected]

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'

TypeError: Cannot set properties of null (setting 'nodeValue')

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?

Is it possible to use phosphor icons on a <n-dropdown>?

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>

The docs didn't mention how to import the naive-ui components

Hi, should I import naive-ui component from itself or this nuxt module explicitly?
Which is correct?

import { NButton } from 'naive-ui'

import { NButton } from '@bg-dev/nuxt-naiveui'

`MenuLinkRoute.to` fails typecheck in project

Reproduction

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

Result

> @ 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

Expected Behaviour

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)

Possible Solution

Fix builded imports to prevent any lib typecheck from project scope
Fix MenuLinkRoute.to type to work

Env

  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

Feature Request: Provide a `useNotification()` abstraction that works outside of script-setup

Problem / TLDR

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.

Description

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:

bundle size: using createDiscreteApi inlines message, notification, dialog and modal into the entry-point-bundle (see screenshot 1 below)
configuration is not shared between useNotification and createDiscreteApi
naive-ui has an ominous warning inside their docs about not using both in the same app
to work 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:

the "real" solution would be to find a way to be able to use useNotification() inside a plugin
- should be possible, other composable can also be used inside plugins (see plugin docs)
worse but better than status quo would be a tree-shakable 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?

Assets

screenshot 1: naive-ui entrypoint bundle

typeerror in NaiveNavbar.vue

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:

Rename the prop 'sticky' to 'stick.'
Rename the constant 'sticky' to 'stick.'

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

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

Failed to resolve extends base type after 1.1.0

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;
}

Cannot start nuxt: Missing "./esm/formatInTimeZone" specifier in "date-fns-tz" package

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"
  }
}

This mod is awesome

Have you considered using nuxt hook to implement naive ui loading bar

NavbarRoute paths doesn't work with Vue's dynamic routing

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

nuxt 3.7 defineNuxtModule hooks prepare:types

I upgraded nuxt to 3.7 and unfortunately there is a problem

tsConfig.compilerOptions no longer provides a “types” attribute

[vue warn] onScopeDispose for useNaiveColorMode

[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

type error in NaiveNavbar

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:

nuxt-naiveui/src/runtime/components/NaiveNavbar.vue

Line 116 in 6f0ec38

icon: route.icon ? () => h(NaiveIcon, { name: route.icon }) : undefined,

 <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}`;
}

Drawer placement can't be changed

Allow the drawer placement to be passed in as a prop

How to disable initialize cookie `naive_color_mode_preference`

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?