scrum / vue-2-breadcrumbs Goto Github PK
View Code? Open in Web Editor NEWVue breadcrumbs
License: MIT License
Vue breadcrumbs
License: MIT License
Hi, in my project i am need full replace in parent breadcrumbs chain, some like that:
We have one unique page and two jump paths to it
Base > Group list > Group detail
Base > Member list > Member detail > Group detail
The first is main route in router tree to page with data, it used when user go from leftbar menu.
The second path is jumps to page, that path used when user go from leftbar menu to member detail page and use link to group.
All of i need is to show breadcrumb with that jumps path.
And in that case full replace parent chain in breadcrumbs will protect me from make two children tree in router.
Thank you in advance, and sorry for my bad english.
Hi,
Thanks for the amazing work!
I'm using custom template like this, which is working fine on development environment:
Vue.use(VueBreadcrumbs, {
template:
' <nav v-if="$breadcrumbs.length" aria-label="breadcrumb" class="ncBreadcrumbs">\n' +
' <localized-link class="icon-home-outline" tag="a" to="/""></localized-link>\n' +
' <span v-for="(crumb, index, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumbItem" :class="[(index == $breadcrumbs.length - 1 ? \'breadcrumbCurrent\' : \'\')]" aria-current="page">\n' +
' <span class="icon-right-open-outline"></span>' +
' <localized-link v-if="index !== $breadcrumbs.length - 1" tag="a" to="{ path: getPath(crumb) }" class="breadcrumbText">{{ getBreadcrumb(crumb.meta.breadcrumbshort) }}</localized-link>' +
' <span v-if="index == $breadcrumbs.length - 1" class="breadcrumbText" v-html="$t( getBreadcrumb(crumb.meta.breadcrumb) )"></span>' +
' </span>\n' +
' </nav>'
});
It appears that the use of the custom template seems to require eval() or a similar method, and fails to load breadcrumbs into the page if 'unsafe-eval' isn't defined under script-src in the server's Content Security Policy headers.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
Could you consider implementing custom template injection from a file template instead? Or maybe create a second implementation method, to allow old code compatibility ; that would allow the plugin to be compatible with secured server policies. :)
For the time being, I will keep it simple and inject a hard coded breadcrumb html on every page (as it's a small project, it's ok for that one but I will implement breadcrumbs in larger vue projects later in 2020, so that won't be possible on them ๐ ).
Cheers,
Charlie
Hi,
I was trying out this plugin but never got it to work.
Is it still supposed to work with Vue 2.6.10 and Vue Router 3.0.7 ?
When I include the component I'm getting the following error.
"[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build."
I'm kind of assuming I really should not enable runtimeCompiler to get this to work.
Hi,
I'm actually using this plugin link for manage breadcrumbs on my site.
This not support the route params like /post/:id
becasue vue block vue route by using Object.freeze
as you can see on samturrell/vue-breadcrumbs#1
Your project does it support vue route params in breadcrumbs?
Hey!
For example, I have that in routes:
{
path: '/',
name: 'home',
component: page('home.vue'),
meta: {
breadcrumb: {
label: 'Home',
icon: 'home',
}
},
},
So in this case route home
has icon key and it should output an icon (font awesome, for example) instead of label.
Is it possible? crumb.meta.breadcrumb.icon
gives me null everytime.
Is it possible to prepend all breadcrumbs with a link back to home.
So at website.com
the breadcrumbs show Home
.
At website.com/foo
the breadcrumbs now show Home / Foo
.
At website.com/foo/bar
the breadcrumbs now show Home / Foo / Bar
.
how to set parent with query params?
hi thank you for the library, i found maybe a bug that in nuxt 2 i cant update the template with the object parameter when registering the plugins,
here i showed you if i registered without defining a template, Vue.use(VueBreadcrumbs)
it is working fine,
but if i add this code
const template = {
template: '<div class="breadcrumbs">Custom Navbar</div>',
}
Vue.use(VueBreadcrumbs, template)
notice above image there is function inside a comments that breadcrumb should be located, may i know if i am doing something wrong or this is a bug? thank you
Hi. I want to change template inside my component. The problem is: method getBreadcrumb(crumb.meta.breadcrumb)
is not defined on the instance. How I can fix that?
example of my code:
<template id="crumbs">
<nav v-if="$breadcrumbs.length" class="breadcrumb" aria-label="breadcrumb">
<ul class="breadcrumb">
<li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">
<router-link :to="{ path: crumb.path }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>
</li>
</ul>
</nav>
</template>
<script>
import Vue from 'vue';
import breadcrumbs from 'vue-2-breadcrumbs';
Vue.use(breadcrumbs, {
template: '#crumbs'
});
Just wondering how I would go about showing crumbs with more than one parent, e.g
Home > Directory > Business Name
Thanks
Just wanted to say that I spend multiple hours trying to figure out why the plugin was mixing up my route-params. Turns out because I used named routes, which seem to clash with the plugin for some reason.
This is not really documented, which would have been great for me, and very likely will be for others in the future.
Hi, I'm trying to do something like this:
breadcrumb: {
label: routeParams => `route params name: ${routeParams.name}` },
parent: 'Menus'
}
But when I look at the getBreadcumb function I noticed to my understanding it is not possible:
getBreadcrumb(bc: string | CallbackFunction | Breadcrumbs): string {
let name = bc;
if(typeof name === "object") {
name = name.label
}
if (typeof name === "function") {
return name.call(this, this.$route.params);
}
return name;
}
Is it possible for you to cover this feature in the future? I think replacing:
if(typeof name === "object") {
name = name.label
}
with:
if(typeof name === "object") {
if(typeof name.label === 'function) {
return name.label.call(this, this.$route.params);
} else {
name = name.label
}
}
Would work and wouldn't be a breaking change
My route is defined like this:
{
path: ':catId/:id(new|\\d+)',
name: 'EntityCreate',
component: EntityManualCU,
meta: {
breadcrumb: 'Send Entity',
},
},
In breadcrumb route path generated as http://localhost:8080/entities/2/new(new%7C/d+)
Hey,
I am writing a CRUD type app that has an Index, Show, New etc. pages. An excerpt from the routes looks like this:
{
component: LayoutPage,
path: '/services',
meta: {
breadcrumb() {
return (this.$route.name === 'services') ? '' : 'Services';
}
},
children: [
{
component: ServicesIndex,
name: 'services',
path: '/',
meta: {
breadcrumb: 'Services'
},
}, {
component: ServicesNew,
name: 'services-new',
path: 'new',
meta: {
breadcrumb: 'New'
}
}
If I don't put that logic into breadcrumb function of the /services parent, it will always show the breadcrumb li as a link (presumably because it matches the. 'services' route.
But now it creates the Breadcrumb Home / / Services. (Home is defined further up the routes)
Can the library be updated to exclude blank breadcrumb functions?
Cheers!
Here is the scenario:
User clicks on a link to Page B
Page B is a parent of Page A
So the breadcrumb will look like this:
Page A > Page B
But Page B is a page representing a specific resource, so it should be like so:
Page A > Resource Name
The resource name is retrieved via API. I have tried modifying the label via $breadcrumbs and calling $forceUpdate to no avail.
My setup consists of webpack (with vue loader) and babel, for transpiling JavaScript into previous ES versions.
In IE 11 I get the following error on the following line of the output JavaScript file. The error points at the 378th character in the line.
Expected ':'
Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={install(Vue,options){Object.defineProperties(Vue.prototype,{$breadcrumbs:{get(){var _this=this,breadcrumbs=this.$route.matched.map(function(routeRecord){var path=routeRecord.path.length?routeRecord.path:"/",route=routeRecord;return Object.keys(_this.$route.params).forEach(function(param){path=route.path.replace(":"+param,_this.$route.params[param])},_this),route.path=path,route},this);return breadcrumbs}}});Vue.component("breadcrumbs",Object.assign({methods:{getBreadcrumb:function getBreadcrumb(bc){return"function"==typeof bc?bc(this.$route.params):bc}},template:`
As a result, the entire page fails to load.
I assume that babel has taken care of transpiling the script to a version compatible with IE 11, so I guess it's the breadcrumb code itself that is causing the issue. Just a guess though ;)
Module version used: latest so far (0.4.0)
I can't see any way of defining what the routes parent should be.
Again to use an example from vue-2-crumbs
it allows:
meta: {
breadcrumb: { parent: 'dashboard' }
}
Unfortunately that plugin doesn't appear to work with SSR was hoping this one would!
Hi, is it possible for <Breadcrumbs />
to render the full breadcumb path, e.g. Path 1 > Path 2 > Path 3 > Path 4
, and not just the current one and the parent?
I like that you allow specifying a function for a route's breadcrumb so that the text can be dynamically generated.
To expand on that idea, it would be great to have the current route parameters passed into the breadcrumb function so that the consumer could use those params as well.
For example, if I have a route /customer/:id
, I'd like to be able to use the id
route parameter to lookup the customer name so that I can display breadcrumbs like this:
Home > Customers > John Doe
I'd be happy to submit a pull request for this feature if you'd take it.
Hi, is it possible for <Breadcrumbs />
to render the full breadcumb path, e.g. Path 1 > Path 2 > Path 3 > Path 4
, and not just the current one and the parent?
First, thanks for your work, it works well with quasar and ssr.
I'm looking to override the default template (https://github.com/Scrum/vue-2-breadcrumbs#options) to use the breadcrumb quasar component but it does not affect the default one
Hi, thanks for this awesome lib!
My question is how to use in async way.
Lets say, Breadcrumb is to a product page and I want to show the product name
home -> category -> product name
Something like this (ie)
meta: {
async breadcrumb() {
const { data } = await api.get('product');
const name = data.name;
return {
label: name
};
}
}
How to do that, if possible ?
The path under node_modules are very long (more than 260 characters), which in windows is a problem. I cannot use this module unless this is fixed.
Thanks!.
C:\rui\MyProject\clientApp\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src
It seems this is the most flexible (while staying easy-to-use) breadcrumb solution for Vue.js.
โฆBut I don't use Bootstrap โ I use Bulma (which I really love) โ So it would be great if the visual part could be completely customized.
Thank you!
Hi,
First of all, thank you for this useful plugin.
I've ran into an issue with dynamic parent breadcrumbs. When you have at least 3 levels of nested and every route has a breadcrumb function, the route in the middle is missing from the breadcrumbs.
It looks like it happens because it doesn't handle breadcrumb function when looking for parent routes.
Here is the PR #112. Could you take a look, please?
Thanks!
The documentation doesn't say how to add them to a component.
The vue-2-crumbs
package makes <app-breadcrumbs>
available - but I can't see anything equivalent in this package.
Can we customize breadcrumb template like this?
If no, can add a fast commit for this
Vue.use(VueBreadcrumbs, {
template:
'<b-container class="breadcrumb pt-3 mb-0" v-if="$breadcrumbs.length"> ' +
'<router-link class="breadcrumb-item" to="/">Home</router-link> ' +
'<router-link class="breadcrumb-item" v-for="(crumb, key) in $breadcrumbs" :to="linkProp(crumb)" :key="key">{{ crumb | crumbText }}</router-link> ' +
'</b-container>'
})
You can easy inspire by this https://github.com/samturrell/vue-breadcrumbs/blob/master/src/index.js
I need very soon this update, please hope you add this feature
In this demo http://inside-demo.github.io/vue-demo/
whn breadcrumbs look like Feeds / Foo
Feeds link is "/feeds/foo" bit it should be "/feeds"
Hi, thanks for your work. I'm not able to work parents feature properly. As I understand when i navigate to route with parent it will find it but nothing happens. Could you please help and explain?
children: [
{
path: '/',
component: ownCategories,
name: 'documents',
meta: {
breadcrumb: 'All'
},
},
{
path: 'filelist/:categoryId',
component: fileList,
name: 'fileList',
props: true,
meta: {
breadcrumb(){
const name = this.$route.params.name
return {label: name, parent: 'documents'}
}
}
},
I cant seem to be able to create the breadcrum like so:
Home/About/Consulting
Instead it renders:
Home/Consulting
Am i doing something wrong?
These are the routes
{
path: '/home',
name: 'home',
component: home,
meta: {
breadcrumb: {
label: 'Home'
}
},
},
{
path: '/about',
name: 'about',
component: about,
meta: {
breadcrumb: {
label: 'About',
parent: 'home'
}
},
},
{
path: '/it-consulting',
name: 'itconsulting',
component: itconsulting,
meta: {
breadcrumb: {
label: 'Consulting',
parent: 'about'
}
},
},
Is it possible to update the breadcrumb from inside the component?
Use case is, that I load an article async in the component and I would like to use the article name in the breadcrumb.
Is this already possible somehow or would it be a new feature?
Nuxt routes are dynamically generated, so I can't edit or shouldn't touch the router.js So how can I integrate it into Nuxt?
How can i access to query object of $route?
meta: { authenticated: true, title: 'Test123', breadcrumb: (params) => { //Here i get only $route.params } }
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.