Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

nuxt-commons-ui

Package Overview
Dependencies
Maintainers
1
Versions
50
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuxt-commons-ui

My new Nuxt module

  • 1.4.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3
decreased by-94.12%
Maintainers
1
Weekly downloads
 
Created
Source

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

AttributeDescriptionTypeDefault
v-model:visibleWhether to show popupboolean-
stylePopupCustom classNamestringbg-white rounded-lg p-5 max-w-3xl
positionPosition can be set to top, top-left, top-right, bottom, bottom-left, bottom-right, left, rightstringcenter
overlayWhether to show overlaybooleanfalse
closeOverlayWhether to close when overlay is clickedbooleanfalse
closeableShow icon closeboolean-
styleIconStyle can be set to width,height,color and shape icon by className unostringi-ic:sharp-close
onOpenLoadPageAutomatically open popup when page loadsbooleanfalse
autoOpenAfterTimeAutomatically open popup after a period of timebooleanfalse
timeAutoOpenAutomatically opens after 1 page load timenumber | string5000
timeClosePopupAutomatically close after 1 page load timenumber | string5000
scrollYOpenAutomatically open popup when scroll to positionnumber | string-
scrollYCloseAutomatically close popup when scroll to positionnumber | string-
keyPopupSave key popup in local storage, 1 key is required for identificationstring-

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

AttributeDescriptionTypeDefault
groupid group of menunumber | string-
keyParentkey parent of item in collection menunumber | string-
textParentmobile 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

FAQs

Package last updated on 03 Jul 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc