quasar-ui-example-viewer
Display Vue code examples with template, script and style parts with optional source and codepen links
Last updated a month ago by hawkeye64 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install quasar-ui-example-viewer 
SYNC missed versions from official npm registry.

Component ExampleViewer

npm npm

Example Viewer

The Example Viewer component will show output of a Vue SFC (single file component). On the component's top toolbar, it has links to the Github repo, Codepen and View Sources.

example-viewer showing QCalendar (week view)

When View Sources is clicked, you will get tabs for each section of a Vue SFC (single file component) file. This also includes a "copy to clipboard" icon.

example-viewer showing QCalendar (week view)

example-viewer showing QCalendar (week view)

Usage

Quasar CLI project

Install the App Extension.

OR:

Create and register a boot file:

import Vue from 'vue'
import Plugin from 'quasar-ui-example-viewer'
import 'quasar-ui-example-viewer/dist/index.css'

Vue.use(Plugin)

OR:

<style src="quasar-ui-example-viewer/dist/index.css"></style>

<script>
import { ExampleViewer } from 'quasar-ui-example-viewer'

export default {
  components: {
    ExampleViewer
  }
}
</script>

Vue CLI project

import Vue from 'vue'
import Plugin from 'quasar-ui-example-viewer'
import 'quasar-ui-example-viewer/dist/index.css'

Vue.use(Plugin)

OR:

<style src="quasar-ui-example-viewer/dist/index.css"></style>

<script>
import { ExampleViewer } from 'quasar-ui-example-viewer'

export default {
  components: {
    ExampleViewer
  }
}
</script>

UMD variant

Exports window.ExampleViewer.

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

<head>
  <!-- AFTER the Quasar stylesheet tags: -->
  <link href="https://cdn.jsdelivr.net/npm/quasar-ui-example-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-example-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):

<link href="https://cdn.jsdelivr.net/npm/quasar-ui-example-viewer/dist/index.rtl.min.css" rel="stylesheet" type="text/css">

Donate

If you appreciate the work that went into this, please consider donating to Quasar.

License

MIT (c) Jeff Galbraith jeff@quasar.dev

Current Tags

  • 1.0.1                                ...           latest (a month ago)

26 Versions

  • 1.0.1                                ...           a month ago
  • 1.0.0                                ...           2 months ago
  • 0.0.25                                ...           3 months ago
  • 0.0.24                                ...           4 months ago
  • 0.0.23                                ...           4 months ago
  • 0.0.22                                ...           4 months ago
  • 0.0.20                                ...           8 months ago
  • 0.0.19                                ...           8 months ago
  • 0.0.18                                ...           8 months ago
  • 0.0.17                                ...           8 months ago
  • 0.0.16                                ...           8 months ago
  • 0.0.15                                ...           8 months ago
  • 0.0.14                                ...           8 months ago
  • 0.0.13                                ...           8 months ago
  • 0.0.12                                ...           8 months ago
  • 0.0.11                                ...           8 months ago
  • 0.0.10                                ...           9 months ago
  • 0.0.9                                ...           9 months ago
  • 0.0.8                                ...           9 months ago
  • 0.0.7                                ...           9 months ago
  • 0.0.6                                ...           9 months ago
  • 0.0.5                                ...           9 months ago
  • 0.0.4                                ...           9 months ago
  • 0.0.3                                ...           9 months ago
  • 0.0.2                                ...           9 months ago
  • 0.0.1                                ...           9 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 3
Last Day 1
Last Week 2
Last Month 45
Dependencies (3)

Copyright 2014 - 2016 © taobao.org |