Thanks @afd. The quasar-edge repo is currently on “0.13.9” according to its package.json, just behind the official repo actually. I did install and build the repo as a node dependency without linking. So as far as I understand all you need is the package.json and the dist directory to meet the requirement.

One really annoying bug I have is that on narrow resolutions when the sidebar is hovered in click on the modal background (layout content portion) when I’m on the parent-nav-item route, the app unexpectedly routes to the the sub-nav-item route

Thank you @benoitranque for the quick response. I ended up with this:

<template>
  <div :class="[{'q-collapsible': this.$slots.content}, {'q-collapsible-closed': this.$slots.content && !expanded}, {'q-collapsible-opened': this.$slots.content && expanded}]">
    <q-item v-bind="this.$props">
      <slot/>
      <q-item-side right v-if="this.$slots.content" @click.stop="toggle" :icon="iconClass? ``: `keyboard_arrow_down`" />
    </q-item>
    <q-slide-transition v-if="this.$slots.content">
      <div v-show="expanded">
        <div class="q-collapsible-sub-item relative-position">
          <slot name="content"/>
        </div>
      </div>
    </q-slide-transition>
  </div>
</template>

<script>
import {
  QIcon,
  QList,
  QItem,
  QSideLink,
  QItemMain,
  QItemSide,
  QSlideTransition,
  QCollapsible
} from 'quasar'

// const eventName = 'q:collapsible:close'

export default {
  mixins: [QSideLink, QCollapsible],
  name: 'QCompositeItem',
  components: {
    QIcon,
    QList,
    QItem,
    QSideLink,
    QItemMain,
    QItemSide,
    QSlideTransition
  },
  data () {
    return {
      expanded: this.opened || false
    }
  },
  props: ['iconClass'],
  methods: {
    toggle () {
      this.expanded = !this.expanded
    }
  },
  mounted () {
    this.iconToggle = true
  }
}
</script>

And I use it like this:

        <q-composite-item :to="{name: 'catalog'}">
          <q-item-side class="fio-inspection" />
          <q-item-main label="Service Catalog" />
          <template slot="content">
            <q-side-link item :to="{name: 'wish_list'}" key="wishlist">
              <q-item-main label="Wish List" />
            </q-side-link>
          </template>
        </q-composite-item>
        <q-composite-item label="empty item">
          <q-item-side left class="fio-inspection" />
          <q-item-main label="Empty Label" />
        </q-composite-item>

This enables me to use item as a dynamic component that will know to link and/or collapse based on the “to” attribute and “content” slot. Also it reuses QCollapsible and QItem through mixins so there is not much code to upkeep.

My use case is having a side-nav with linkable (router-link) collapsible titles so essentially it would be just like a file explorer or menu pattern. Example here (OpenUI5).

I’ve already followed this path, sorry for not clarifying. This still leaves me without the vue files and even if I leave the workspace to wrap the bundle the links in the sourcemaps are somehow broken and the vue files referenced are incomplete. Actually the referenced files only contain the style block (CSS).

Thank you all for your replies, but really I just want a stand-alone bundle that I can deploy somewhere and debug with Chrome. Something I can use to demonstrate with and so forth. If anyone knows how to pack the vue files into the dist directory that would be great.

Hi all,

I would like to create a dev build of the application. The application was built with the Quasar CLI and I use the dev and build commands. However, when I use dev I have no file-system access to the resources and when I use build the resources are uglified and un-mapped to my original “.vue” files. How can I create a build config for a development version of the dist folder?

@afd Are you using the current quasar template from the quasar-cli generator? Do you have some working project using the latest dev on Github you could share apart from the linking?

Isn’t that approach very expensive on the network? Also how then do you use Utils for example inside your Vue components?

Thanks @afd. The quasar-edge repo is currently on “0.13.9” according to its package.json, just behind the official repo actually. I did install and build the repo as a node dependency without linking. So as far as I understand all you need is the package.json and the dist directory to meet the requirement.

So I tried upgrading to latest dev via

npm install https://github.com/quasarframework/quasar.git#dev --save

But upon

npm run dev

I get this warning and the app doesn’t load most of the components

warning in ./src/components/Index.vue

33:32-37 "export ‘Utils’ was not found in ‘quasar’

Also VS Code no longer recognizes quasar module when importing to Vue components. Don’t know if this is relevant.