# quasar-ui-json-api-viewer

> Display your Quasar JSON API

Latest version **1.3.1** (published 2021-06-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install quasar-ui-json-api-viewer
pnpm add quasar-ui-json-api-viewer
yarn add quasar-ui-json-api-viewer
bun add quasar-ui-json-api-viewer
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2021-06-12 |
| First published | 2019-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 358.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Jeff Galbraith |
| Maintainers | hawkeye64 |
| Keywords | quasar, quasarframework, json api, viewer |

## Links

- npm: https://www.npmjs.com/package/quasar-ui-json-api-viewer
- Repository: https://github.com/hawkeye64/json-api-viewer
- Issues: https://github.com/hawkeye64/json-api-viewer/issues
- Funding: https://github.com/sponsors/hawkeye64
- npm.io page: https://npm.io/package/quasar-ui-json-api-viewer

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.3.1 (latest) — 2021-06-12
- 2.0.0-alpha.6 (next) — 2021-04-28
- 2.0.0-alpha.5 — 2021-04-17
- 2.0.0-alpha.4 — 2021-04-16
- 2.0.0-alpha.3 — 2021-04-15
- 2.0.0-alpha.2 — 2021-04-15
- 2.0.0-alpha.1 — 2021-04-14
- 1.3.0 — 2020-11-08
- 1.2.1 — 2020-10-24
- 1.2.0 — 2020-10-12
- 1.1.0 — 2020-10-01
- 1.0.16 — 2020-07-12
- 1.0.15 — 2020-06-18
- 1.0.14 — 2020-03-06
- 1.0.13 — 2020-02-04
- … 22 more at https://npm.io/package/quasar-ui-json-api-viewer/versions

## README

# Component JsonApiViewer

[![npm](https://img.shields.io/npm/v/quasar-ui-json-api-viewer.svg?label=quasar-ui-json-api-viewer)](https://www.npmjs.com/package/quasar-ui-json-api-viewer)
[![npm](https://img.shields.io/npm/dt/quasar-ui-json-api-viewer.svg)](https://www.npmjs.com/package/quasar-ui-json-api-viewer)

Use the **JsonApiViewer** component to display json as validated and built via the [Quasar Json Api](https://github.com/hawkeye64/quasar-json-api) library for UI kit (`quasar create myApp --kit ui`). (Note: supports Quasar `dark mode`)

![json-api-viewer showing QCalendar](https://raw.githubusercontent.com/hawkeye64/json-api-viewer/master/images/json-api-viewer--qcalendar.png)

As simple as:

```html
<template>
  <q-page padding>
    <json-api-viewer title="QCalendar API" :json="api" />
  </q-page>
</template>

<script>
import Api from '../api/QCalendar.json'
export default {
  data () {
    return {
      api: Api
    }
  }
}
</script>
```

Properties:

- `title` [String]: Title to use. Ex: `title="QCalendar API"`
- `json` [String]: The json API. Ex: `:json="api"`
- `type` [String]: Defaults to `Vue Component`.
- `starting-tab` [String]: The default starting tab is `props`, but if you have no props, you may want to start with a different tab.
- `starting-inner-tab` [String]: The default starting inner tab is `model`, but if you have no model in your prop categories, you may want to start with a different inner tab.
- `no-footer` [Boolean]: TTurns off the default footer

Slots:

- `footer`: Replaces the default footer

Please note: As of v1.1.0, `@quasar/qmarkdown` and `@quasar/qribbon` have been tagged as externals and need to be installed separately instead of being bundled in the npm package.

# Usage

## Quasar CLI project

Install the [App Extension](../app-extension).

**OR**:

Create and register a boot file:

```js
import Vue from 'vue'
import Plugin from 'quasar-ui-json-api-viewer'
import 'quasar-ui-json-api-viewer/dist/index.css'

Vue.use(Plugin)
```

**OR**:

```html
<style src="quasar-ui-json-api-viewer/dist/index.css"></style>

<script>
import { JsonApiViewer } from 'quasar-ui-json-api-viewer'

export default {
  components: {
    JsonApiViewer
  }
}
</script>
```

## Vue CLI project

```js
import Vue from 'vue'
import Plugin from 'quasar-ui-json-api-viewer'
import 'quasar-ui-json-api-viewer/dist/index.css'

Vue.use(Plugin)
```

**OR**:

```html
<style src="quasar-ui-json-api-viewer/dist/index.css"></style>

<script>
import { JsonApiViewer } from 'quasar-ui-json-api-viewer'

export default {
  components: {
    JsonApiViewer
  }
}
</script>
```

## UMD variant

Exports `window.jsonApiViewer`.

Add the following tag(s) after the Quasar ones:

```html
<head>
  <!-- AFTER the Quasar stylesheet tags: -->
  <link href="https://cdn.jsdelivr.net/npm/quasar-ui-json-api-viewer/dist/index.min.css" rel="stylesheet" type="text/css">
</head>
<body>
  <!-- at end of body, AFTER Quasar script(s): -->
  <script src="https://cdn.jsdelivr.net/npm/quasar-ui-json-api-viewer/dist/index.umd.min.js"></script>
</body>
```
If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
```html
<link href="https://cdn.jsdelivr.net/npm/quasar-ui-json-api-viewer/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
```

# Setup
```bash
$ yarn
```

# Developing
```bash
# start dev in SPA mode
$ yarn dev

# start dev in UMD mode
$ yarn dev:umd

# start dev in SSR mode
$ yarn dev:ssr

# start dev in Cordova iOS mode
$ yarn dev:ios

# start dev in Cordova Android mode
$ yarn dev:android

# start dev in Electron mode
$ yarn dev:electron
```

# Building package
```bash
$ cd ui
$ yarn build
```


# Donate
If you appreciate the work that went into this, please consider donating to [Quasar](https://donate.quasar.dev) or [Jeff](https://github.com/sponsors/hawkeye64).

# License
MIT (c) Jeff Galbraith <jeff@quasar.dev>

---
_Source: https://npm.io/package/quasar-ui-json-api-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._