meteor Using Polymer with Meteor Using differential:vulcanize
Example
In the root of your project, make sure Bower is installed (npm install -g bower) and run bower init. This will create a bower.json file in your project's directory.
Create a new file called .bowerrc to your root directory. It should contain the following:
{
"directory": "public/bower_components"
}
This lets Bower know that it should save components in the bower_components folder in your app's public directory.
Now add the Polymer components you wish to use with your app.
In your app's root directory bower-install each component you want to use.
bower install --save PolymerElements/paper-button#^1.0.0 PolymerElements/paper-checkbox#^1.0.0
Add Vulcanize to your project
Meteor add differential:vulcanize
Create a new file called config.vulcanize in the root of your project. It should contain the following:
{
"polyfill": "/bower_components/webcomponentsjs/webcomponents.min.js",
"useShadowDom": true, // optional, defaults to shady dom (polymer default)
"imports": [
"/bower_components/paper-button/paper-button.html",
"/bower_components/paper-checkbox/paper-checkbox.html"
]
}
"imports" should list each component you will use in your app.
You can now use components you have imported in your Blaze templates just as you would any other element:
<template name="example">
<div>
this is a material design button: <paper-button></paper-button>
this is a material design checkbox: <paper-checkbox></paper-checkbox>
</div>
</template>
