@bg-dev/nuxt-naive-ui v2.1.1

Nuxt Naive ui

A Nuxt 3 layer of Naive-ui component library

Features

✔️ Support for Universal and SPA Nuxt 3 applications ✔️ Auto imported and tree-shakable components ✔️ Highly customizable for color mode and device type through useNaiveTheme composable

Demo

Follow this link

Installation

npm i @bg-dev/nuxt-naive-ui

Setup

defineNuxtConfig({
  extends: ["@bg-dev/nuxt-naive-ui"],
});

Usage

This layer uses the apis of @nuxtjs/color-mode for handling color mode and @nuxtjs/device for device detection

For theme customization, copy the snippet below to app.vue and define your own dynamic theme

<template>
  <n-config-provider :theme-overrides="themeOverrides"
    :inline-theme-disabled="true">
    <NuxtPage></NuxtPage>
  </n-config-provider>
</template>

<script setup lang="ts">
const { useThemeOverrides } = useNaiveTheme({
  shared: {},
  light: {},
  dark: {},
  mobileOrTablet: {}
})

const themeOverrides = useThemeOverrides()
</script>

To explore the available components refer to Naive ui documentation