#Intro
Reusable Vue components using Material Design Lite
Warning: This project is still under development. Contributions are welcome
vue-mdl tries to use the latest versions of material design lite and vue
#Usage
// browserify/webpack require
// Use vmdl if you're including vue-mdl directly into the browser
var vmdl = require('vue-mdl');
var Vue = require('vue');
// Globally register the checkbox
vmdl.register(Vue, 'mdl-checkbox');
// Shorthand
vmdl.register(Vue, 'checkbox');
// Globally register all components and directives
vmdl.registerAll(Vue);
// Access any component or directive
var checkbox = vmdl.components['mdl-checkbox'];
var badge = vmdl.directives['mdl-badge'];
var app = new Vue({
components: {
mdlCheckbox: checkbox
},
directives: {
mdlBadge: badge
}
});
<mdl-checkbox :checked='check'>Checkbox</mdl-checkbox>
#Documentation
The test/components
directory has a lot of examples used for tests.
The documentation is available here Pull Requests and issues are welcome.
#Build
This will build a distributable version in the dist
directory.
npm run build
#Test
You can run all the tests
npm test
##Unit tests
npm run test:unit
##End to End tests
npm run test:e2e
It is possible to test one single file by running the dev server in one terminal
and nightwatch
in another:
npm run dev-test
PORT=8088 ./node_modules/.bin/nightwatch -c build/nightwatch.json --test test/e2e/checkbox.js
#Development
Prefer unit tests over end to end tests.
Run npm run dev
to run a webpack-dev-server
that will watch the project
for modifications and create the bundles. You can then visit
http://localhost:8088/webpack-dev-server/test/unit.
Create tests pages inside test/components
. Add unit tests to test/unit/specs
and modify test/unit/main.coffee
to load the test.
You can also serve the tests pages without running the unit tests by running
npm run dev-test
.
This will serve the tests at localhost:8088/test/
.
You must add #<component_name>
to the address. For instance, if you want to
load the checkbox example you must go to localhost:8088/test/#checkbox
#Contributing
When contributing, make sure all tests pass. If you wrote a new feature or fixed a bug make sure to add the corresponding test.
#Releasing
- Release a new version using
npm version
- Then amend the commit adding the changelog
- Modify the tag
git tag -f "v$(grep version package.json | sed 's/.*: "//g;s/".*//g')"
- Push it to git:
git push
,git push --tags
- Publish it to npm:
npm publish
#License MIT
Copyright (c) 2015 Eduardo San Martin Morote