Control your page body classes with vue-router easily:
- add classes to parent and children routes
- add classes for homepage
- overwrite classes defined in parent routes
- dynamic routes support
- written on top of ES6, yet is ES5 safe
- vue.js 2.x
- vue-router 3.x
npm install vue-body-class --save
- Import Vue Body Class
import VueBodyClass from 'vue-body-class';-
Set up routes and Vue Router as described in Vue Router Installation & Getting Strated sections.
-
Add Vue Body Class Guard to the Router instance (Important: pass
routesto theVueBodyClassconstrustor) :
const vueBodyClass = new VueBodyClass(routes);
router.beforeEach((to, from, next) => { vueBodyClass.guard(to, next) });You will end up with something like this:
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueBodyClass from 'vue-body-class';
Vue.use(VueRouter)
const routes = [
//...your routes here
];
const router = new VueRouter({
routes
});
const vueBodyClass = new VueBodyClass(routes);
router.beforeEach((to, from, next) => { vueBodyClass.guard(to, next) });
new Vue({
router,
render: h => h(App),
}).$mount('#app');Just add bodyClass to meta property of a route object in your vue-router routes.
name: 'dashboard',
path: '/dashboard',
meta: { bodyClass: 'dashboard' },
...For child routes, all parent classes will be applied too.
name: 'dashboard',
path: '/dashboard',
meta: { bodyClass: 'dashboard' },
component: dashboard,
children: [
{
name: 'dashboard.profile',
path: 'profile',
meta: { bodyClass: 'profile' },
component: profile
},
...
]will result in
class = 'dashboard profile'
You can overwrite parent classes by adding ! at the beginning of the class:
name: 'dashboard',
path: '/dashboard',
meta: { bodyClass: 'dashboard' },
component: dashboard,
children: [
{
name: 'dashboard.profile',
path: 'profile',
meta: { bodyClass: '!profile' },
component: profile,
children: [
{
name: 'dashboard.profile.personal',
path: 'personal',
meta: { bodyClass: 'personal' },
component: personal
},
...
]
},
...
]will result in
class = 'profile personal'
as !profile overwrites dashboard class.
The plugin will save your original body classes and new classes will be appended.
Nuxt.js is not supported in current package version, but there are plans to implement the integration in further versions. Meanwhile, please use Nuxt.js built in solution, described here. This does not provider same flexibility and accumulating parent route classes functionality, but is useful in most of cases.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent