Simple adding class names mods to all components in your vue app
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
assets
dist
docs
src
test
.babelrc
.editorconfig
.eslintrc
.gitignore
.npmignore
.travis.yml
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
PULL_REQUEST_TEMPLATE.md
README.md
karma.conf.js
package-lock.json
package.json
webpack.config.js

README.md

vue-mods-names

Simple adding class names mods to all components in your vue app

example

npm version Build Status JavaScript Style Guide

Docs with examples and playgrounds:
English
Русский
Українська
français

Install

So typically

npm i vue-mods-names -D

Usage

import VueModsNames from 'vue-mods-names'

Vue.use(VueModsNames)

If you want to change prefix (by default is equal: _), then just pass it in plugin options, like this:

import VueModsNames from 'vue-mods-names'

Vue.use(VueModsNames, { prefix: '-' })

After that any component in your app is ready to use mods. It will work if you declare name of base class in directive v-mods-names:

Declare behavior by adding special directive v-mods-names in your template. good - is name of base class, that will join with other mods.

Good.vue

<!-- Template of 'Good' component, that will be include in other places -->
<div v-mods-names:good>It's cool</div>

Now we may use component with different mods:

main page

<Good mods="main" />

In the issue you have component on main page, that has classes after render:

<div class="good good_main">It's cool</div>

All style modifications of component typically describe in component file itself (one file component).

.good {}

.good_main {}

.good_big {}

You can pass Array of mods:

<Good :mods="['main', 'big']" />

After render we get this:

<div class="good good_main good_big">It's cool</div>

KamilOcean