Nuxt-commons-ui NPM

Quick Setup

Add nuxt-commons-ui dependency to your project

# Using PNPM
pnpm install nuxt-commons-ui

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

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

  ]
})

Add unocss/nuxt to your project

pnpm add -D @unocss/nuxt

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

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

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