open-index/open-npm huggingface dataset:
npm package: @nuxtjs/webpack-profile
Description: Nuxt module to display webpack build progress steps with core ProgressPlugin
Latest version: 0.1.0

# Webpack profile module for Nuxt.js
[![npm (scoped with tag)](https://img.shields.io/npm/v/@nuxtjs/webpack-profile/latest.svg?style=flat-square)](https://npmjs.com/package/@nuxtjs/webpack-profile)
[![npm](https://img.shields.io/npm/dt/@nuxtjs/webpack-profile.svg?style=flat-square)](https://npmjs.com/package/@nuxtjs/webpack-profile)
[![CircleCI](https://img.shields.io/circleci/project/github/nuxt-community/webpack-profile-module.svg?style=flat-square)](https://circleci.com/gh/nuxt-community/webpack-profile-module)
[![Codecov](https://img.shields.io/codecov/c/github/nuxt-community/webpack-profile-module.svg?style=flat-square)](https://codecov.io/gh/nuxt-community/webpack-profile-module)
[![Dependencies](https://david-dm.org/nuxt-community/webpack-profile-module/status.svg?style=flat-square)](https://david-dm.org/)
[![js-standard-style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com)

> Nuxt module to display webpack build progress steps with core ProgressPlugin

[📖 **Release Notes**](./CHANGELOG.md)

## Setup
- Add `@nuxtjs/webpack-profile` dependency using yarn or npm to your project
- Add `@nuxtjs/webpack-profile` to `modules` section of `nuxt.config.js`

```js
{
  modules: [
    '@nuxtjs/webpack-profile',
 ]
}
```

## Usage

You can use `yarn nuxt build --profile` to disable fancy progress bar and inspect build stats and timings.

## Example output

```ini
15034ms building modules
55ms sealing
1ms optimizing
0ms basic module optimization
0ms module optimization
10ms advanced module optimization
20ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
1856ms building modules
0ms module and chunk tree optimization
0ms chunk modules optimization
0ms advanced chunk modules optimization
0ms module reviving
49ms module order optimization
2ms module id optimization
0ms chunk reviving
4ms chunk order optimization
19ms chunk id optimization
44ms hashing
1ms module assets processing
78ms chunk assets processing
3ms additional chunk assets processing
3ms recording
2395ms additional asset processing
3526ms chunk asset optimization
407ms asset optimization
94ms emitting
Hash: 536cd574c2466b29c1d5
Version: webpack 3.8.1
Time: 34621ms
```

## License

[MIT License](./LICENSE)

Copyright (c) Nuxt Community
npm package: @nuxtjs/webpackmonitor
Description: Monitor Nuxt webpack optimization metrics through the development process
Latest version: 0.1.0

# Webpack Monitor Module

[![npm (scoped with tag)](https://img.shields.io/npm/v/@nuxtjs/webpackmonitor/latest.svg?style=flat-square)](https://npmjs.com/package/@nuxtjs/webpackmonitor)
[![npm](https://img.shields.io/npm/dt/@nuxtjs/webpackmonitor.svg?style=flat-square)](https://npmjs.com/package/@nuxtjs/webpackmonitor)
[![CircleCI](https://img.shields.io/circleci/project/github/nuxt-community/webpackmonitor-module.svg?style=flat-square)](https://circleci.com/gh/nuxt-community/webpackmonitor-module)
[![Codecov](https://img.shields.io/codecov/c/github/nuxt-community/webpackmonitor-module.svg?style=flat-square)](https://codecov.io/gh/nuxt-community/webpackmonitor-module)
[![Dependencies](https://david-dm.org/nuxt-community/webpackmonitor-module/status.svg?style=flat-square)](https://david-dm.org/nuxt-community/webpackmonitor-module)
[![js-standard-style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com)

> Monitor Nuxt webpack optimization metrics through the development process using [webpackmonitor](https://github.com/webpackmonitor/webpackmonitor)

[📖 **Release Notes**](./CHANGELOG.md)

<img src="https://camo.githubusercontent.com/acb0c92759578da7cbbdcd38a57fa682bedcc83b/68747470733a2f2f726f6163686a632e6769746875622e696f2f6d61696e332e676966"/>

## Setup
- Add `@nuxtjs/webpackmonitor` dependency using yarn or npm to your project

- Add `@nuxtjs/webpackmonitor` to `modules` section of `nuxt.config.js`

```js
{
  modules: [
    '@nuxtjs/webpackmonitor',
 ],
}
```

- Optionally add `.monitor` to `.gitignore` file if you don't want to track reports with VCS.

## Usage

This module automatically captures stats from each **Production** build into `.monitor/stats.json` file if there was any diff.

You can use `npx nuxt build --webpackmonitor` or `yarn nuxt build --webpackmonitor` to launch monitor dashboard in your browser after build.

## Options

To customize defaults you can add `webpackMonitor` key to `nuxt.config.js`.
See [here](https://github.com/webpackmonitor/webpackmonitor) for possible options.

## License

[MIT License](./LICENSE)

Copyright (c) Nuxt.js Community - Pooya Parsa <pooya@pi0.ir>
npm package: @nuxtjs/workbox
Description: 👉 Please refer to [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) for documentation.
Latest version: 3.0.0-beta.16

👉 Please refer to [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) for documentation.
npm package: @nuxtjs/yandex-metrika
Description: [![npm](https://img.shields.io/npm/dt/@nuxtjs/yandex-metrika.svg?style=flat-square)](https://www.npmjs.com/package/@nuxtjs/yandex-metrika) [![npm (scoped with tag)](https://img.shields.io/npm/v/@nuxtjs/yandex-metrika/latest.svg?style=flat-square)](https:/
Latest version: 1.4.0
Deprecated: Yandex Collects Your Personal Data! https://en.wikipedia.org/wiki/Yandex#Security

# Yandex Metrika
[![npm](https://img.shields.io/npm/dt/@nuxtjs/yandex-metrika.svg?style=flat-square)](https://www.npmjs.com/package/@nuxtjs/yandex-metrika)
[![npm (scoped with tag)](https://img.shields.io/npm/v/@nuxtjs/yandex-metrika/latest.svg?style=flat-square)](https://www.npmjs.com/package/@nuxtjs/yandex-metrika)

> Add Yandex Metrika to your nuxt.js application.

This plugins automatically sends first page and route change events to yandex metrika.

**Note:** yandex metrika is not enabled in dev mode.
You can set environment variable `NODE_ENV` to `production` for testing in dev mode.

## Setup

- Add `@nuxtjs/yandex-metrika` dependency using yarn or npm to your project
- Add `@nuxtjs/yandex-metrika` to `modules` section of `nuxt.config.js`

```js
{
  modules: ['@nuxtjs/yandex-metrika'],
}
```

## Configure

You can pass options directly in module declaration:

```js
{
  modules: [
    [
      '@nuxtjs/yandex-metrika',
      {
        id: 'XXXXXX',
        webvisor: true,
        // clickmap: true,
        // useCDN: false,
        // trackLinks: true,
        // accurateTrackBounce: true,
      }
    ]
  ]
}
```

Or you can specify `yandexMetrika` key:

```js
{
  modules: ['@nuxtjs/yandex-metrika'],
  yandexMetrika: {
    id: 'XXXXXX',
    // ...
  }
}
```

In Nuxt 2.13+, you can also use public runtime config:

```js
{
  modules: ['@nuxtjs/yandex-metrika'],
  publicRuntimeConfig: {
    yandexMetrika: {
      id: process.env.YANDEX_METRIKA_ID,
      // ...
    }
  }
}
```

## Options

For more information:
- [Documetation for Ya.Metrika](https://yandex.com/support/metrica/code/counter-initialize.html)
- [hit method](https://yandex.com/support/metrica/objects/hit.html)

### `id`

- Required

### `useRuntimeConfig`

- Default: `yandexMetrika`

Public runtime config key. Set to `false` to disable runtime configuration.

### `useCDN`

- Default: false

Load metrika script from <https://cdn.jsdelivr.net/npm/yandex-metrica-watch/watch.js>.

This option can not be provided via runtime config.

### `accurateTrackBounce`
### `childIframe`
### `clickmap`
### `defer`
### `ecommerce`
### `params`
### `userParams`
### `trackHash`
### `trackLinks`
### `trustedDomains`
### `type`
### `ut`
### `webvisor`
### `triggerEvent`
npm package: @nuxtjs/youch
Description: Pretty error reporting for Node.js 🚀 (Modified for Nuxt.js & SSR Bundles)
Author: amanvirk
Latest version: 4.2.3

# Youch!
> Pretty error reporting for Node.js 🚀 (Modified for Nuxt.js & SSR Bundles)

<br />

<p>
    <img src="https://user-images.githubusercontent.com/5158436/28990900-0a4766f8-7997-11e7-9f0b-4336fa2e2e0b.png" style="width: 600px;" />
</p>

<br />

---

<br />

[![NPM Version][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Downloads Stats][npm-downloads]][npm-url]
[![Appveyor][appveyor-image]][appveyor-url]

[![Gitter Channel][gitter-image]][gitter-url]
[![Trello][trello-image]][trello-url]
[![Patreon][patreon-image]][patreon-url]

Youch is inspired by [Whoops](https://filp.github.io/whoops) but with a modern design. Reading stack trace of the console slows you down from active development. Instead **Youch** print those errors in structured HTML to the browser.

## Features
1. HTML reporter
2. JSON reporter, if request accepts a json instead of text/html.
3. Sorted frames of error stack.

## Installation
```bash
npm i --save @nuxtjs/youch
```

## Basic Usage
Youch is used by [AdonisJs](http://adonisjs.com) and [Nuxt.js](https://nuxtjs.org), but it can be used by express or raw HTTP server as well.

```javascript
const Youch = require('@nuxtjs/youch')
const http = require('http')

http.createServer(function (req, res) {

  // PERFORM SOME ACTION
  if (error) {
    const youch = new Youch(error, req)

    youch
    .toHTML()
    .then((html) => {
      res.writeHead(200, {'content-type': 'text/html'})
      res.write(html)
      res.end()
    })
  }

}).listen(8000)
```

## Release History
Checkout [CHANGELOG.md](CHANGELOG.md) file for release history.

## Meta
Checkout [LICENSE.txt](LICENSE.txt) for license information
Harminder Virk (Aman) - [https://github.com/thetutlage](https://github.com/thetutlage)


[appveyor-image]: https://ci.appveyor.com/api/projects/status/github/nuxt/youch?branch=master&svg=true&passingText=Passing%20On%20Windows
[appveyor-url]: https://ci.appveyor.com/project/nuxt/youch

[npm-image]: https://img.shields.io/npm/v/@nuxtjs/youch.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@nuxtjs/youch

[travis-image]: https://img.shields.io/travis/nuxt/youch/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/nuxt/youch

[gitter-url]: https://gitter.im/adonisjs/adonis-framework
[gitter-image]: https://img.shields.io/badge/gitter-join%20us-1DCE73.svg?style=flat-square

[trello-url]: https://trello.com/b/yzpqCgdl/adonis-for-humans
[trello-image]: https://img.shields.io/badge/trello-roadmap-89609E.svg?style=flat-square

[patreon-url]: https://www.patreon.com/adonisframework
[patreon-image]: https://img.shields.io/badge/patreon-support%20AdonisJs-brightgreen.svg?style=flat-square

[npm-downloads]: https://img.shields.io/npm/dm/@nuxtjs/youch.svg?style=flat-square
npm package: @nuxtlabs/github-module
Description: > GitHub integration for [Nuxt](https://v3.nuxtjs.org) & [Content](https://content.nuxtjs.org)
Latest version: 1.6.3

# Github Module

> GitHub integration for [Nuxt](https://v3.nuxtjs.org) & [Content](https://content.nuxtjs.org)

## Setup

Install `@nuxtlabs/github-module` in your project:

```bash
# Using Yarn
yarn add --dev @nuxtlabs/github-module
# Using NPM
npm install --save-dev @nuxtlabs/github-module
# Using PNPM
pnpm add --save-dev @nuxtlabs/github-module
```

Then, add `@nuxtlabs/github-module` to the `modules` section of your `nuxt.config.ts`:

```ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@nuxt/content', // Required
    '@nuxtlabs/github-module'
  ],
  github: {
    repo: 'nuxt/framework' // Or use GITHUB_REPO in .env
  }
})
```

Lastly, create a [personal access token](https://github.com/settings/tokens) on GitHub and add it into your `.env`:

```env
GITHUB_TOKEN='<your-personal-token>'
```

## Usage

```vue
<script setup lang="ts">
const { data: releases } = await useAsyncData('releases', () => githubReleases())
</script>

<template>
  <div>
    <div v-for="release in releases" :key="release.name">
      <ProseH2 :id="release.name">{{ release.name }}</ProseH2>
      <Content :document="release" />
    </div>
  </div>
</template>
```

## Options

```ts
github: {
  repo: string,
  releases: false | {
    api: string
    repo: string
    token: string
    /**
     * Parse release notes markdown and return AST tree
     *
     * Note: This option is only available when you have `@nuxt/content` installed in your project.
     *
     * @default true
     */
    parse: boolean
  }
}
```

## Development

1. Clone this repository
2. Install dependencies using `yarn install` or `npm install`
3. Generate type stubs using `yarn prepare` or `npm run prepare`
4. In `playground/.env`, add your [personal access token](https://github.com/settings/tokens)
  ```env
  GITHUB_TOKEN='<your-personal-token>'
  ```
5. Launch playground using `yarn dev` or `npm run dev`
npm package: @nuxtlabs/github-module-edge
Description: > GitHub integration for [Nuxt](https://v3.nuxtjs.org) & [Content](https://content.nuxtjs.org)
Latest version: 1.3.1-27629534.edb1935

# Github Module

> GitHub integration for [Nuxt](https://v3.nuxtjs.org) & [Content](https://content.nuxtjs.org)

## Setup

Install `@docus/github` in your project:

```bash
# Using Yarn
yarn add --dev @docus/github
# Using NPM
npm install --save-dev @docus/github
```

Then, add `@docus/github` to the `modules` section of your `nuxt.config.ts`:

```ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@nuxt/content', // Required
    '@docus/github'
  ],
  github: {
    repo: 'nuxt/framework' // Or use GITHUB_REPO in .env
  }
})
```

Lastly, create a [personal access token](https://github.com/settings/tokens) on GitHub and add it into your `.env`:

```env
GITHUB_TOKEN='<your-personal-token>'
```

## Usage

```vue
<script setup lang="ts">
const { data: releases } = await useAsyncData('releases', () => githubReleases())
</script>

<template>
  <div>
    <div v-for="release in releases" :key="release.name">
      <ProseH2 :id="release.name">{{ release.name }}</ProseH2>
      <Content :document="release" />
    </div>
  </div>
</template>
```

## Options

```ts
github: {
  repo: string,
  releases: false | {
    api: string
    repo: string
    token: string
    /**
     * Parse release notes markdown and return AST tree
     *
     * Note: This option is only available when you have `@nuxt/content` installed in your project.
     *
     * @default true
     */
    parse: boolean
  }
}
```

## Development

1. Run `npm run dev:prepare` to generate type stubs.
2. Create a [personal access token](https://github.com/settings/tokens) on GitHub and add it into `playground/.env`
  ```env
  GITHUB_TOKEN='<your-personal-token>'
  ```
3. Use `npm run dev` to start [playground](./playground) in development mode.
npm package: @nuxtlib/magic-image
Description: A Nuxt module for performance optimized images - both LCP images and Below-the-Fold images.
Latest version: 1.0.2

<!--
Get your module up and running quickly.

Find and replace all on all files (CMD+SHIFT+F):
- Name: My Module
- Package name: my-module
- Description: My new Nuxt module
-->

# My Module

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

My new Nuxt module for doing amazing things.

- [✨ &nbsp;Release Notes](/CHANGELOG.md)
<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
<!-- - [📖 &nbsp;Documentation](https://example.com) -->

## Features

<!-- Highlight some of the features your module provide here -->
- ⛰ &nbsp;Foo
- 🚠 &nbsp;Bar
- 🌲 &nbsp;Baz

## Quick Setup

Install the module to your Nuxt application with one command:

```bash
npx nuxi module add my-module
```

That's it! You can now use My Module in your Nuxt app ✨


## Contribution

<details>
  <summary>Local development</summary>
  
  ```bash
  # Install dependencies
  npm install
  
  # Generate type stubs
  npm run dev:prepare
  
  # Develop with the playground
  npm run dev
  
  # Build the playground
  npm run dev:build
  
  # Run ESLint
  npm run lint
  
  # Run Vitest
  npm run test
  npm run test:watch
  
  # Release new version
  npm run release
  ```

</details>


<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/my-module

[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/my-module

[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/my-module

[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com
npm package: @nuxtus/cli
Description: Command line interface for Nuxtus projects.
Author: Craig Harman
Latest version: 2.1.4

# Nuxtus CLI

Automatically create [Nuxt](https://nuxtjs.org/) pages from [Directus](https://directus.io/) collections.

For more details visit [nuxtus.com](https://nuxtus.com) or [read the documentation](https://docs.nuxtus.com)

See it in action:

https://user-images.githubusercontent.com/324026/175452950-46bd51a6-3fd9-441d-80fd-c6bbfaa01929.mp4

Command line interface for the Nuxtus Boilerplate (but can be used by any Nuxt client that has a Directus backend). Would be installed by default as part of [Nuxtus](https://nuxtus.com).

## Features

  - Create page stubs for any Directus Collection
  - Create type definitions for all Directus Collections

## Usage

```bash
$ nuxtus [command] [options]
```

> For help `nuxtus help`
npm package: @nuxtus/directus-extension-nuxtus-hook
Description: A Directus webhook extension that handles the automatic creation of Nuxt pages and types when a new collection is created in Directus.
Author: Craig Harman
Latest version: 1.4.1

# @nuxtus/directus-extension-nuxtus-hook

A Directus webhook extension that handles the automatic creation of Nuxt pages and types when a new collection is created in Directus.

Calls the Nuxtus /api/directus/collection endpoint when a new collection is created.
Calls the Nuxtus /api/directus/field endpoint when fields are created, updated or deleted.

> We strongly recommend using [Nuxtus Boilerplate](https://github.com/nuxtus/nuxtus) if you are starting a new project. This will automatically install this hook with other useful Directus/Nuxt utilities.

For more details visit [nuxtus.com](https://nuxtus.com) or [read the documentation](https://docs.nuxtus.com)

## Getting started

Currently Directus extensions need to be installed manually into your existing Directus project.

To do this:

1. Clone this repository
2. Build the extension `npm run build`
3. Place `/dist/index.js` in Directus project `/extensions/hooks/nuxtus-hook/`

## Testing

Running `vitest` in watch mode gives error "too many symbolic links encountered". Use run instead:

```bash
./node_modules/.bin/vitest run
```
npm package: @nuxtus/generator
Description: Package responsible for generating a Nuxt page from Directus collection.
Author: Craig Harman
Latest version: 1.9.4

# @nuxtus/generator

Takes a Directus collection object and creates a Nuxt page or pages.

For more details visit [nuxtus.com](https://nuxtus.com) or [read the documentation](https://docs.nuxtus.com)

## Usage

```bash 
$ npm install @nuxtus/generator
```

Then in your application:

```typescript
import { createPage } from "@nuxtus/generator"

createPage("collection-name", isSingleton)
```
npm package: @nuxtus/nuxt-localtunnel
Description: A Nuxt module for automatically running [localtunnnel](https://github.com/localtunnel/localtunnel) to externally expose your development instance of Nuxt to the outside world.
Latest version: 1.0.1

# Nuxt Localtunnel

A Nuxt module for automatically running [localtunnnel](https://github.com/localtunnel/localtunnel) to externally expose your development instance of Nuxt to the outside world.

**Allows full configuration of all localtunnel configuration options including https**

## Installation

```bash
npm install @nuxtus/nuxt-localtunnel
```

Edit your nuxt.config.ts and add the @nuxtus/nuxt-localtunnel module:

```ts
modules: [
  '@nuxtus/nuxt-localtunnel'
],
localtunnel: {} // Localtunnel config options go here (see below)
```

Then start Nuxt as normal `npm run dev`, you will be given an extra (external URL to reach your development site).

## Config

All localtunnel configuration options are accepted via the `localtunnel` property of the `nuxt.config.ts` file:

- `port` (number) The local port number to expose through localtunnel.
- `subdomain` (string) Request a specific subdomain on the proxy server. **Note** You may not actually receive this name depending on availability.
- `host` (string) URL for the upstream proxy server. Defaults to `https://localtunnel.me`.
- `local_host` (string) Proxy to this hostname instead of `localhost`. This will also cause the `Host` header to be re-written to this value in proxied requests.
- `local_https` (boolean) Enable tunneling to local HTTPS server.
- `local_cert` (string) Path to certificate PEM file for local HTTPS server.
- `local_key` (string) Path to certificate key file for local HTTPS server.
- `local_ca` (string) Path to certificate authority file for self-signed certificates.
- `allow_invalid_cert` (boolean) Disable certificate checks for your local HTTPS server (ignore cert/key/ca options).

Refer to [tls.createSecureContext](https://nodejs.org/api/tls.html#tls_tls_createsecurecontext_options) for details on the certificate options.

## Development

- Run `npm run dev:prepare` to generate type stubs.
- Use `npm run dev` to start [playground](./playground) in development mode.
npm package: @nuxtus/nuxt-module
Description: Nuxt module for automation between Nuxt and Directus.
Author: Craig Harman
Latest version: 2.4.3

# Nuxtus Nuxt Module

The Nuxtus Nuxt module provides Nuxt 3 applications with a suite of utilities that make dealing with Directus and Nuxt easier. This includes endpoints for automatically adding Directus collections to Nuxt, typing these collections and an automatic authentication plugin.

It can be used independently but was built for the [Nuxtus Boilerplate](https://github.com/nuxtus/nuxtus) which creates a Directus/Nuxt project with one command and is the recommended way to use this Nuxt module. Alternatively you can set up an existing Nuxt project by following the [Installation instructions](http://docs.nuxtus.com/#/?id=new-project) in the documentation.

For more details visit [nuxtus.com](https://nuxtus.com) or [read the documentation](https://docs.nuxtus.com)
npm package: @nuxtus/nuxtus
Description: Directus/Nuxt boilerplate with Tailwind CSS.
Author: Craig Harman
Latest version: 2.3.6

# Nuxtus
<img src="https://www.nuxtus.com/imgs/logo.svg" alt="Nuxtus Logo" width="300px"/>

A boilerplate and set of utilities for using [Directus](https://directus.io) for backend CMS and [Nuxt](https://nuxtjs.org) (w/ [Tailwind CSS](https://tailwindcss.com)) for frontend. It's core feature is to **automagically** create *typed* pages the instant you create a Directus collection.

> Can be used as a boilerplate or individually as a suite of utilities.

## Quick start

```bash
npx create-nuxtus app-name
```

For more details visit [nuxtus.com](https://www.nuxtus.com) or [read the documentation](https://docs.nuxtus.com)

https://user-images.githubusercontent.com/324026/175020548-57ee94b3-dee4-4b12-a8c8-6c0f1a94fab4.mov

The purpose of this template is to be a quick-start for developing a website with Nuxt.js using Directus as the backend. The end result can be a static website or dynamically pull data from Directus depending on your preference.

It also includes [nuxtus/cli]("https://github.com/nuxtus/cli") which provides a command line interface for quickly creating multiple index/detail pages from any Directus collections.

### Dependency graph

The below shows the Nuxtus projects in order based on packages that depend on each other with generator having no Nuxtus dependencies and create-nuxtus requiring all packages. This assists in development and deployment of new versions.

- generator :: creates nuxt pages from Directus collections
- nuxt-module :: a Nuxt module that includes generator for creating nuxt pages in a nuxt project during development
- nuxt-cli :: a CLI tool to manually generate Nuxt pages rather than using autogeneration, used within a Nuxt project
- localtunnel :: a Nuxt module that allows external access to a local Nuxt development project using Local Tunnel
- hook :: a Directus webhook extension that handles the automatic creation of Nuxt pages and types when a new collection is created in Directus
- nuxtus :: the boilerplate project used by create-nuxtus to generate the Directus server and Nuxtus client
- create-nuxtus :: npx package to quickly and easily create a new Nuxtus project
npm package: @nuxtwind/components
Description: Component Library for Nuxt 3 using TailwindCSS
Author: fantasyflip
Latest version: 2.1.1

# NuxtWind Component Library

NuxtWind is a component library for Nuxt.js 3, providing a collection of ready-to-use components built with Vue.js and TailwindCSS. These components are designed to be SSR-safe and are inspired by the sleek design principles of Vuetify.

## 📦 Installation

You can install NuxtWind via npm:

```bash
npm i @nuxtwind/components
```

Add the `@nuxtwind/components` module to your `nuxt.config.ts`:

```typescript
export default defineNuxtConfig({
    modules: ['@nuxtwind/components']
})
```

## 📚 Documentation

For full documentation and usage instructions, please visit [NuxtWind Documentation](https://nuxtwind.com).

## ✨ Features

- **Ready-to-use Components**: A variety of components designed for rapid development.
- **SSR-Safe**: Ensures compatibility with server-side rendering in Nuxt.js applications.
- **Inspired by Vuetify**: Draws design inspiration from Vuetify's intuitive UI components.
- **Built with Vue.js and TailwindCSS**: Utilizes the power of Vue.js for interactivity and TailwindCSS for styling flexibility.

## 🚀 Getting Started

To start using NuxtWind components in your Nuxt.js project, simply install the package via your preferred package manager as shown above. Then you can start incorporating them into your templates.

```vue
// In your Nuxt.js component
<template>
  <div>
    <NXW-Button @click="handleClick">Click me!</NXW-Button>
  </div>
</template>

<script setup lang="ts">
function handleClick() {
  console.log('Button clicked!');
}
</script>
```

## 🤝 Contribution

Contributions to NuxtWind are welcome! If you'd like to contribute new features, bug fixes, or improvements, please fork the repository, make your changes, and submit a pull request. Be sure to follow the contribution guidelines outlined in the documentation.

## 📄 License

NuxtWind is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.
npm package: @nuyhman/react-spotify-player
Description: Spotify player embed component for React
Author: nuyhman
Latest version: 1.0.2

# React Spotify Player

A React component for embedding Spotify content using the Spotify oEmbed API.

[Live Demo](https://react-spotify-player-demo.vercel.app/)

![Demo Screenshot](https://github.com/user-attachments/assets/b138b740-02d3-44fb-b865-cd53e0cad98e)

## Features

- **Easy Integration**: `SpotifyPlayer` component is designed to be easily integrated into any React application
- **Customizable**: Adjust the `size` and `theme` of the player to match your application's design.
- **Render Prop Support**: Utilize the render prop pattern to access the `spotify` object and `loading` state directly within your component, enabling dynamic content updates.
- **TypeScript**: Fully typed with TypeScript for better DX and type safety.

## Installation

Yarn

```bash
yarn add @nuyhman/react-spotify-player
```

npm

```bash
npm i @nuyhman/react-spotify-player
```

## Usage

```tsx
import React from 'react';
import SpotifyPlayer from '@nuyhman/react-spotify-player';

const App = () => {
  return <SpotifyPlayer resourceId="track/6y0igZArWVi6Iz0rj35c1Y" />;
};

export default App;
```

Simply add the SpotifyPlayer component with a `resourceId` prop to the React application using JSX.

The player’s width will scale to fit the parent container.

## **Props**

### resourceId

This `resourceId` property is used to fetch and display the corresponding Spotify content.

- **Supported**: `track`, `album`, `artist`, `playlist`, `episode`, `show`
- **Example**: `track/6y0igZArWVi6Iz0rj35c1Y`

### size (optional)

Defined according to the three heights supported by Spotify Player.

- **Default**: `'default'`
- **Supported Values**: `'small'` `'default'` `'large'`

### theme (optional)

The visual theme for the player.

- **Default**: `'light'`
- **Supported Values**: `'light'`, `'dark'`

### children (optional)

A render prop that allows you to customize the rendering of children based on the current state.

- **Render Props**: `{ spotify, isLoading }`
- **Example**:

```tsx
<SpotifyPlayer resourceId="track/1yFeci9dMqBobDPGJroWAZ">
  {({ isLoading, spotify }) => (
    <>
      {isLoading && (
        <div className="absolute inset-0 size-full rounded-xl">
          <img src={spotify?.thumbnail_url} alt={spotify?.title} className="blur" />
        </div>
      )}
    </>
  )}
</SpotifyPlayer>
```
npm package: @nuz/cli
Description: The command-line interfaces to manage modules and interact with the registry server
Latest version: 1.0.0-beta.66

# @nuz/cli &middot; [![npm version](https://img.shields.io/npm/v/@nuz/cli.svg?style=flat)](https://www.npmjs.com/package/@nuz/cli) ![npm downloads](https://img.shields.io/npm/dm/@nuz/cli)

## About

[@nuz/cli](#) is a command-line interfaces to manage modules and interact with the registry server.
npm package: @nuz/core
Description: Core to manage and handles resolve runtime packages in the application
Latest version: 1.0.0-beta.66

# @nuz/core &middot; [![npm version](https://img.shields.io/npm/v/@nuz/core.svg?style=flat)](https://www.npmjs.com/package/@nuz/core) ![npm downloads](https://img.shields.io/npm/dm/@nuz/core)

## About

[@nuz/core](#) is a core to manage and handles resolve runtime packages in the application.
npm package: @nuz/registry
Description: A factory to create the registry server for the Nuz ecosystem
Latest version: 1.0.0-beta.66

# @nuz/registry &middot; [![npm version](https://img.shields.io/npm/v/@nuz/registry.svg?style=flat)](https://www.npmjs.com/package/@nuz/registry) ![npm downloads](https://img.shields.io/npm/dm/@nuz/registry)

## About

[@nuz/registry](#) is a factory to create the registry server for the Nuz ecosystem.
npm package: @nuz/shared
Description: Includes shared symbols and constants using in nuz packages
Latest version: 1.0.0-beta.66

# @nuz/shared &middot; [![npm version](https://img.shields.io/npm/v/@nuz/shared.svg?style=flat)](https://www.npmjs.com/package/@nuz/shared) ![npm downloads](https://img.shields.io/npm/dm/@nuz/shared)
npm package: @nuz/utils
Description: Includes utils using in nuz packages
Latest version: 1.0.0-beta.66

# @nuz/utils &middot; [![npm version](https://img.shields.io/npm/v/@nuz/utils.svg?style=flat)](https://www.npmjs.com/package/@nuz/utils) ![npm downloads](https://img.shields.io/npm/dm/@nuz/utils)