nuxt-commons-ui

Quick Setup

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

# Using PNPM
pnpm install nuxt-commons-ui

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

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

  ]
})

1. Add unocss/nuxt to your project

pnpm add -D @unocss/nuxt

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

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