Naming Prosecution Mitigator

    vue-body-class

    3.0.2 • Public • Published

    vue-body-class

    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

    Dependencies

    • vue.js 2.x
    • vue-router 3.x

    Installation

    npm install vue-body-class --save

    Get started with Vue.js

    1. Import Vue Body Class
    import VueBodyClass from 'vue-body-class';
    1. Set up routes and Vue Router as described in Vue Router Installation & Getting Strated sections.

    2. Add Vue Body Class Guard to the Router instance (Important: pass routes to the VueBodyClass construstor) :

    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');
     

    Set Up classes

    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.

    Get started with Nuxt.js

    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.

    Install

    npm i vue-body-class

    DownloadsWeekly Downloads

    1,066

    Version

    3.0.2

    License

    ISC

    Unpacked Size

    16.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • nikolaynesov