Nuxt Naive UI

A Nuxt 3 module for integrating Naive UI component library into your Nuxt 3 project

Features

• ✔️ SSR friendly
• ✔️ Auto imported and tree-shakable components & composables
• ✔️ Highly customizable for color mode and device type
• ✔️ Friendly integration with Tailwindcss
• ✔️ Implements custom components
  • ✔️ NaiveNavbar an adaptive navbar for app navigation
  • ✔️ NaiveIcon a wrapper based on iconify/vue with large collection of icons
  • ✔️ NaiveColorModeSwitch light/dark modes switch based on useNaiveColorMode composable
  • ✔️ NaiveTabbar a tabBar for mobile/tablet navigation

Installation

Add @bg-dev/nuxt-naiveui dependency to your project

1# Using npm
2npm install --save-dev @bg-dev/nuxt-naiveui
3
4# Using yarn
5yarn add --dev @bg-dev/nuxt-naiveui

Setup

Add @bg-dev/nuxt-naiveui to the modules section of nuxt.config.ts and define the default settings.

1export default defineNuxtConfig({
2  modules: ["@bg-dev/nuxt-naiveui"],
3
4  naiveui: {
5    colorModePreference: "light",
6    iconSize: 18,
7    themeConfig: {},
8  },
9});

That's it! You can now use @bg-dev/nuxt-naiveui in your Nuxt app ✨

Usage

Theme customization

Use NaiveConfig component in app.vue and set themeConfig property, alternatively set themeConfig in the module options. The compiled themeConfig is shared globally via useNaiveTheme composable.

1<template>
2  <NaiveConfig :theme-config="themeConfig">
3    <NuxtPage></NuxtPage>
4  </NaiveConfig>
5</template>
6
7
8<script setup lang="ts">
9import { ThemeConfig} from "@bg-dev/nuxt-naiveui"
10
11const themeConfig: ThemeConfig = {
12  shared: {}, // Common theme options
13  mobileOrTablet: {}, // Theme options applied on mobile and tablet
14  mobile: {}, // Theme options applied on mobile only
15  light: {}, // Theme options applied on light mode
16  dark: {}, // Theme options applied on dark mode
17}
18</script>

Force color mode

You may want to force a color mode on a particular page (e.g, setting light mode on landing page). This can be achieved by setting colorMode property in the page meta definition.

1definePageMeta({
2  colorMode: "light",
3});

Integration with Nuxt Tailwind

Color mode integration

1// tailwind.config.js
2
3module.exports = {
4  darkMode: "class",
5};

Theme integration

1// nuxt.config.ts
2
3tailwindcss: {
4  exposeConfig: true;
5}

1// app.vue
2
3import { ThemeConfig } from "@bg-dev/nuxt-naiveui";
4import { theme } from "#tailwind-config";
5
6const themeConfig: ThemeConfig = {
7  shared: {
8    common: {
9      fontFamily: theme.fontFamily.sans,
10      lineHeight: theme.lineHeight.normal,
11    },
12  },
13  light: {
14    common: {
15      primaryColor: theme.colors.blue[600],
16      primaryColorHover: theme.colors.blue[500],
17      primaryColorPressed: theme.colors.blue[700],
18    },
19  },
20  dark: {
21    common: {
22      primaryColor: theme.colors.blue[500],
23      primaryColorHover: theme.colors.blue[400],
24      primaryColorPressed: theme.colors.blue[600],
25    },
26  },
27};

Notes

• It's highly recommended to include NaiveConfig even without theme configuration as it's intended to fix global styles and accessibility issues.
• Body is unusable is an error message i've encountered frequently. A quick solution is to downgrade Node to v16 as suggested in this issue.

Documentation

Refer to Naive-ui website

Development

1# Install dependencies
2npm install
3
4# Generate type stubs
5npm run dev:prepare
6
7# Develop with the playground
8npm run dev
9
10# Build the playground
11npm run dev:build
12
13# Run ESLint
14npm run lint
15
16# Run Vitest
17npm run test
18npm run test:watch
19
20# Release new version
21npm run release

License

MIT License