Playlist builder UI
Nuxt-Listing repository.
Display and manage any type of list and playlists with learning content.
This library provides a set of handy components to build list.
Prerequisites
This library uses the following dependencies:
Pugjs instead of plain HTML for templating
Vuetifyjs As UI design framework based on Material
NuxtJS 2 (use in Vuejs or Nuxt 3 on your own risk)
Lodash Library which provide functions for working with arrays, numbers, objects, strings
MomentJs Library to parse, validate, manipulate, and display date/time
VueSlickSort Library to perform drag and drop of items in a list
Components
ListingLists
Description
This component renders the view of the application, allows to choose any list & displays the data of the current list.
Usage example:
Props
Events
@update-list (Emits a flag when the item was successfully added) @delete-event (Emits a flag when any wish list or event added in any wish list was removed) @navigate-to-bookmark (Emits the saved note url when the chip button is clicked)
HTTP Requests
It uses GET request to fetch the lists of the current user.
It uses GET request to fetch the notes of the current list.
It uses POST request to create lists.
It uses PATCH request to edit lists.
It uses DELETE request to remove lists.
ListingShared
Description
This component allows to render any public list as read only in a custom page.
Usage example:
Props
Events
(This component does not have any emit)
HTTP Requests
It uses GET request to fetch the items from a public list.
ListingAddItemList
Description
This component allows to render a selector that allow to add the current event into a list.
Usage example:
Props
Events
@item-added (Emits a flag when the item was successfully added) @update-list (Emits the response of the GET list request
) @fetching-list (Emits a flag to handle the GET list request
to don't send the same request multiple times) @refresh-lists (Emits a flag to notify the app to handle the GET list request with url parameter
to fetch if the current event itd added in any list)
HTTP Requests
It uses GET request to fetch the items from a list.
It uses GET request to fetch the lists.
It uses GET request to fetch if the current event is already added in any list.
It uses POST request to add an item to a lists.
ListingAddItemListIconDesign
Description
This component allows to render a button that allow to add the current event into the first list. It extends from the component ListingAddItemList
Usage example:
Props
Events
@item-added (Emits a flag when the item was successfully added) @update-list (Emits the response of the GET list request
) @fetching-list (Emits a flag to handle the GET list request
to don't send the same request multiple times) @refresh-lists (Emits a flag to notify the app to handle the GET list request with url parameter
to fetch if the current event itd added in any list)
HTTP Requests
It uses GET request to fetch the items from a list.
It uses GET request to fetch the lists.
It uses GET request to fetch the events from the first list.
It uses GET request to fetch if the current event is already added in any list.
It uses POST request to add an item to a lists.
Other internal components
Internationalization
Nuxt I18n is used.
Some files already translated are located in the directory lib/i18n
. Those files can be directly imported in the base project using i18n.mergeLocaleMessage
:
Development
Clone the repository
git clone https://gitlab.com/eduplex-api/nuxt-listing.git
in the root of any Nuxtjs app.Import statically components manually when needed using
import { ListingLists } from '../../nuxt-listing/index'
Import dynamically components manually using
ListingShared: () => import('../../nuxt-listing/shared')
Build your project as usual
License
The source code for the site is licensed under the MIT license, which you can find in the LICENSE file.
Last updated