Custom template and Content Security Policy about vue-2-breadcrumbs HOT 4 OPEN

@Nincha Hi, sorry for the long answer.

1. Please note that I use a declarative approach to define the template.
2. You can try using string template to define a template
3. maybe it is worth giving up Runtime-only to the side Runtime + Compiler

from vue-2-breadcrumbs.

Could this be solved with slots? Perhaps a default slot for the root element and then a repeated slot for the items within, providing the scoped data one would need to use an alternative set of components to render their breadcrumbs.

from vue-2-breadcrumbs.

Sorry I didn't see your answer @Scrum, the last message notified me just now. Thanks for the feedback, I'll try to give a try to your suggestions in a near future. :)

from vue-2-breadcrumbs.

Alternatively, I was able to use the custom templates with components by writing a render function instead of using the template string. Not ideal, but was able to get past it without a change in the library. I think slots would still be a nice touch for those that would still prefer to compose their template in a traditional single file component.

Here is what I wrote to use the this library with the breadcrumb components from boostrap-vue:

import Vue from "vue";
import VueBreadcrumbs from "vue-2-breadcrumbs";

Vue.use(VueBreadcrumbs, {
  render: function(c) {
    if (this.$breadcrumbs.length) {
      return c( "b-breadcrumb", this.$breadcrumbs.map((crumb, index) => {
          return crumb.meta.breadcrumb
            ? c(
                "b-breadcrumb-item",
                {
                  key: `breadcrumb-item-${index}`,
                  props: {
                    to: { path: this.getPath(crumb) }
                  }
                },
                this.getBreadcrumb(crumb.meta.breadcrumb)
              )
            : null;
        })
      );
    }
  }
});

from vue-2-breadcrumbs.