Quick Setup

1. Add nuxt-commons-ui dependency to your project

# Using PNPM
pnpm install nuxt-commons-ui

2. Add nuxt-commons-ui to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    modules: ["nuxt-commons-ui"],

  ]
})

3. Add unocss/nuxt to your project

pnpm add -D @unocss/nuxt

4. Add unocss to the modules section of nuxt.config.ts

export default defineNuxtConfig({
    modules: ["@unocss/nuxt"],
)}

• That's it! You can now use nuxt-commons-ui in your Nuxt app ✨

POPUP UI

Usage

• If you need to render Vue components within a Popup, you can use the Popup component.

<v-popup v-model:visible="show" overlay closeable closeOverlay>
    <template #header>
        <h4 class="font-bold text-3xl text-black leading-6 m-0 mb-2">
            Popup test
        </h4>
    </template>
    <div class="text-gray-600 text-lg font-medium max-h-100">
        <p>Test</p>
    </div>
    <template #footer>
        <div class="pt-5">
            <button
                @click="show = false"
                class="text-lg font-bold text-white py-3 px-10 b-none cursor-pointer bg-red-600/80 rounded-lg hover:bg-blue-600 duration-200"
            >
                Cancel
            </button>
        </div>
    </template>
</v-popup>

import { ref } from "vue";

export default {
    setup() {
        const show = ref(false);
        return { show };
    },
};

Props

| Attribute | Description | Type | Default | | ----------------- | ----------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------- | | v-model:visible | Whether to show popup | boolean | - | | stylePopup | Custom className | string | bg-white rounded-lg p-5 max-w-3xl | | position | Position can be set to top, top-left, top-right, bottom, bottom-left, bottom-right, left, right | string | center | | overlay | Whether to show overlay | boolean | false | | closeOverlay | Whether to close when overlay is clicked | boolean | false | | closeable | Show icon close | boolean | - | | styleIcon | Style can be set to width,height,color and shape icon by className uno | string | i-ic:sharp-close | | onOpenLoadPage | Automatically open popup when page loads | boolean | false | | autoOpenAfterTime | Automatically open popup after a period of time | boolean | false | | timeAutoOpen | Automatically opens after 1 page load time | number | string | 5000 | | timeClosePopup | Automatically close after 1 page load time | number | string | 5000 | | scrollYOpen | Automatically open popup when scroll to position | number | string | - | | scrollYClose | Automatically close popup when scroll to position | number | string | - | | keyPopup | Save key popup in local storage, 1 key is required for identification | string | - |

MENU UI

Usage

• If you need to render Vue components within a Menu, you can use the Menu component.

v-menu-horizontal

• For horizontal menu, only 1 event is hover applied

<v-menu-horizontal :group="3" keyParent="parent"> </v-menu-horizontal>

v-menu-vertical

• For vertical menus, there are 2 events applied, hover and click, but if nothing is passed, the default is hover
• If you want to use one of the two events, click and hover, just pass props their names
  • click: clickDropDown
  • hover: hoverDropDown

<v-menu-vertical :group="3" keyParent="parent"> </v-menu-vertical>

v-menu-mobile

• For the mobile menu if you want to display the name parent when clicking through another submenu, pass the props as textParent

<v-menu-mobile :group="3" keyParent="parent"> </v-menu-mobile>

Props

| Attribute | Description | Type | Default | | ---------- | ----------------------------------------- | ------------------ | ------- | | group | id group of menu | number | string | - | | keyParent | key parent of item in collection menu | number | string | - | | textParent | mobile menu (name parent of item submenu) | boolean | - |

News Module

1. Functions:

• useNewsCategory(options): get all news nategory Dto

• useNewsDetail(id, options): get news detail by id

  + getNewsDetail(id, options): get detail for a news by id
  
  + actionGetNewsDetail(id, options): get data news detail and widgets

• useNewsIndex(options): get data for index page

  + getListingNews(options): get news list
  
  + actionGetListingNews(options): get news list and widgets

• useNewsWidgets(options): get news widgets

  + getLatestNews(options)
  
  + getRelated(options)

• useNewsGenerate: generate news DTO & generate news category Dto

  + generateNewsDto(item)
  
  + generateNewsCategoryDto(item)

2 Options: - Type:

export type typeQueryOptions = {
    filter?: any,
    page?: number,
    limit?: number,
    sort?: Array<string>,
    meta?: Array<string>,
};

- Example:

let options = {
    filter: {
        status: {
            _eq: "published",
        },
    },
    page: 1,
    limit: 2,
};

2. Using:

   • Get Detail for a news with ID = 7

import { useNewsDetail } from "../src/runtime/composables/useNewsDetail";

const detail = useNewsDetail();
const result = await detail.actionGetNewsDetail(7, {});

- Get data page = 1 for index with limit = 2

import { useNewsIndex } from "../src/runtime/composables/useNewsIndex";

const news = useNewsIndex();
const result = await news.actionGetListingNews({
  page: 1,
  limit: 2,
});




<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/nuxt-commons-ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-commons-ui
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-commons-ui.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-commons-ui
[license-src]: https://img.shields.io/npm/l/nuxt-commons-ui.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-commons-ui
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com