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.

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.

Necessary

In order for this to work with a TOC, you need to make sure you have a couple of things in place:

1. Your app must be using vueRouterMode: 'history' (quasar.conf.js)
2. In /router/index.js change:

1    scrollBehavior: () => ({ x: 0, y: 0 }),`

to this:

1    scrollBehavior: function(to, from, savedPosition) {
2      if (to.hash) {
3          return {selector: to.hash}
4      } else {
5          return { x: 0, y: 0 }
6      }
7    },

or better, to this:

1    scrollBehavior (to, _, savedPosition) {
2      return new Promise(resolve => {
3        setTimeout(() => {
4          if (to.hash !== void 0 && to.hash !== '') {
5            const el = document.getElementById(to.hash.substring(1))
6
7            if (el !== null) {
8              resolve({ x: 0, y: el.offsetTop - el.scrollHeight })
9              return
10            }
11          }
12
13          resolve(savedPosition || { x: 0, y: 0 })
14        }, 100)
15      })
16    },

Dependencies

ExampleViewer has dependencies on @quasar/qmarkdown and @quasar/qribbon. Please install them into your Quasar project with the following:

1quasar ext add @quasar/qmarkdown
2quasar ext add @quasar/qribbon

If you use something other than the @quasar/cli, then install as appropriate for your system. You will need to install the UI compnent of these dependendies. They are @quasar/quasar-ui-qmarkdown and @quasar/quasar-ui-qribbon.

Structure

• /ui - standalone npm package (read this one for more info)
• /app-extension - Quasar app extension

Donate

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

License

MIT (c) Jeff Galbraith jeff@quasar.dev