Component JsonApiViewer


Use the JsonApiViewer component to display json as validated and built via the Quasar Json Api library for UI kit (quasar create myApp --kit ui). (Note: supports Quasar dark mode)

!json-api-viewer showing QCalendar

As simple as:

``html



`

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.

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



`

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



`

UMD variant

Exports window.jsonApiViewer.

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

`html








`
If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
`html

`

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 or Jeff.

License

MIT (c) Jeff Galbraith