@scrape-admin/ui

@scrape-admin/ui

Nuxt module with the shared Scrape Admin UI components, composables and theme. Builds on @nuxt/ui and nuxt-monaco-editor.

Installation

npm install @scrape-admin/ui @nuxt/ui

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui', '@scrape-admin/ui'],
})

/* main.css */
@import "tailwindcss";
@import "@nuxt/ui";
@import "@scrape-admin/ui/theme.css";

Data composables

CurrencyInput, MoneyInput, ProfileSelect, CollectionSelect and TeamMemberRoleInput get their data from composables the module auto-imports. By default they fetch with useFetch from the endpoints in the module options:

export default defineNuxtConfig({
  scrapeAdminUi: {
    endpoints: {
      currencies: '/api/currencies.json', // ScrapeAdminCurrency[]
      profiles: '/api/profiles', // APIProfile[]
      collections: '/api/collections', // APICollection[]
    },
  },
})

To use your own data source, define a composable with the same name in your app (e.g. in app/composables/). It takes precedence over the module's default. It only needs to return { data, status? }, so useFetch, useAsyncData and @pinia/colada's useQuery all work:

// app/composables/useScrapeAdminUi.ts
export const useScrapeAdminProfiles = () =>
  useFetch<APIProfile[]>('/api/my/profiles', { $fetch: useNuxtApp().$api })

// Whether TeamMemberRoleInput offers the `admin` role (default: false).
export const useScrapeAdminCanAssignAdminRole = () => computed(() => useUserSession().user.value?.role === 'admin')

The types are exported from @scrape-admin/ui/data.