Vue-materialize NPM

vue-materialize

Demo

Features

No jQuery dependency
Velocity.js for animations
vue-touch for touch compability
Easy style modification
Only load what you need (webpack code splitting)

What is missing:

carousel
range & slider
file-input
tabs
date-picker

Install

npm install --save-dev vue-materialize
## When using with webpack (recommended)
# webpack
npm install --save-dev webpack
# style loaders
npm install --save-dev style-loader css-loader sass-loader url-loader file-loader vue-style-loader
# node-sass
npm install --save-dev node-sass

or include build/bundle.js (comes with npm install - 159kb - includes Velocity.js)

Import syntax

commonJS allows to require a single js file:

components:
  "fab": require("vue-materialize/fixed-action-button") # loads the fixed-action-button.js in the vue-materialize folder

This is not possible with the es6 import/export. You can still use it like this:

import {fixedActionButton} from "vue-materialize"
components: {
  "fab": fixedActionButton
}

However, webpack will add ALL components to your bundle this way.

Webpack 2 comes with tree-shaking to remove all unused components again. So if you really want to use the import syntax please migrate to webpack 2.

Style

For the usage of the css only components see the very good materialize-css documentation.

For style personalisation see the sass variable definitions in the original repo.

Webpack config top^

loaders: [
  { test: /\.woff(\d*)\??(\d*)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }
  { test: /\.ttf\??(\d*)$/,    loader: "file-loader" }
  { test: /\.eot\??(\d*)$/,    loader: "file-loader" }
  { test: /\.svg\??(\d*)$/,    loader: "file-loader" }
  { test: /\.scss$/, loader: "style!css!sass?sourceMap"}
]

configure SCSS top^

create a file, for example materialize.config.scss

@charset "UTF-8";

@import "~materialize-css/sass/components/mixins";

// all colors:
// @import "~materialize-css/sass/components/color";

// BEGIN: only specific colors
@import "~vue-materialize/sass/color";
// include colors you need
@include do("include-color","black", "base");
@include do("include-color","white", "base");
@import "~vue-materialize/sass/colorProcessor";
// END: only specific colors

@import "~materialize-css/sass/components/variables";
@import "~materialize-css/sass/components/normalize";
@import "~materialize-css/sass/components/typography";
@import "~materialize-css/sass/components/global";

// modify variables here
// all available sass variables:
// https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss
// e.g. $dropdown-bg-color: black;

// css only, no JS needed for these
// activate only what you need
$roboto-font-path: "~materialize-css/fonts/roboto/";
@import "~materialize-css/sass/components/roboto";
@import "~materialize-css/sass/components/icons-material-design"; // icons are no long included in materializeCSS
@import "~materialize-css/sass/components/buttons";
@import "~materialize-css/sass/components/grid";
@import "~materialize-css/sass/components/navbar";
@import "~materialize-css/sass/components/preloader";
@import "~vue-materialize/sass/forms";

// css for js modules
// activate only what you need
@import "~materialize-css/sass/components/cards";
@import "~materialize-css/sass/components/sideNav";
@import "~materialize-css/sass/components/dropdown";
@import "~materialize-css/sass/components/modal";
@import "~materialize-css/sass/components/collapsible";
@import "~materialize-css/sass/components/table_of_contents"; // scrollspy
@import "~materialize-css/sass/components/forms/input-fields";
// ----- no js but need to be after input-fields
@import "~materialize-css/sass/components/forms/checkboxes";
@import "~materialize-css/sass/components/forms/radio-buttons";
// -----
@import "~materialize-css/sass/components/forms/switches";
@import "~materialize-css/sass/components/forms/select"; // need to be after input-fields
@import "~materialize-css/sass/components/toast";
@import "~materialize-css/sass/components/tooltip";

// NOT implemented yet:
// @import "~materialize-css/sass/components/tabs";
// @import "~materialize-css/sass/components/slider";
// @import "~materialize-css/sass/components/date_picker/default";
// @import "~materialize-css/sass/components/date_picker/default.date";
// @import "~materialize-css/sass/components/date_picker/default.time";
// @import "~materialize-css/sass/components/forms/file-input";
// @import "~materialize-css/sass/components/forms/range";

Require it like this:

require("./materialize.config.scss")
or
import "./materialize.config.scss"

Icons top^

No icons are included in the bundle.

You can either take the Google Material Design Icons as a font and use them the materializeCSS way:

<i class="material-icons">add</i>

or use vue-icons:

vue-icons

If you use webpack, you could use vue-icons, this will allow you to load only the icons you need. Additional dependencies:

npm install --save-dev callback-loader

Additional webpack config:

module:
  postLoaders: [
    { test: /vue-icons/, loader: "callback-loader"}
  ]
callbackLoader:
  require("vue-icons/icon-loader")(["material-add"]) # add all the icons you need

Usage

components:
  "icon": require("vue-materialize/icon")

<icon name="material-add"></icon>

JS

card top^

## whithin your module
components:
  "card": require("vue-materialize/card")
# or with bundle.js
  "card": window.vueMaterialize.card

<card class="sticky-action"> <!-- remove sticky-action class for normal action -->
  <img slot="img" src="http://materializecss.com/images/office.jpg"></img>
  <span slot="title">Title (click me)</span>
  <p>Some Content</p>
  <span slot="revealTitle">Title (click me)</span> <!-- required for reveal to work -->
  <p slot="reveal">Significantly more Content</p>
  <a slot="action" href="#card">Some sticky action</a>
</card>

demo - source for demo - doc: vue-card

Of course you can also use the no-reveal materializeCSS cards.

collapsible top^

## whithin your module
components:
  "collapsible": require("vue-materialize/collapsible")
  "collapsible-item": require("vue-materialize/collapsible-item")
# or with bundle.js
  "collapsible": window.vueMaterialize.collapsible
  "collapsible-item": window.vueMaterialize.collapsibleItem

<collapsible>
  <collapsible-item>
    <h4 slot="header">header1</h4>
    <p>body 1</p>
  </collapsible-item>
  <collapsible-item>
    <h4 slot="header">header21</h4>
    <p>body 2</p>
  </collapsible-item>
</collapsible>

demo - source for demo - doc: vue-collapsible

dropdown top^

## whithin your module
components:
  "dropdown": require("vue-materialize/dropdown")
# or with bundle.js
  "dropdown": window.vueMaterialize.dropdown

<button> Open Dropdown
  <dropdown>
    <li>Content</li>
  </dropdown>
</button>

demo - source for demo - doc: vue-comps-dropdown

fixed-action-button top^

## whithin your module
components:
  "fab": require("vue-materialize/fixed-action-button")
# or with bundle.js
  "fab": window.vueMaterialize.fixedActionButton

<fab style="bottom:20px;right:20px">
  <a class="btn-floating btn-large" slot="fab">hover</button>
  <li><a class="btn-floating">1</a></li>
  <li><a class="btn-floating">2</a></li>
</fab>

demo - source for demo - doc: vue-fixed-action-button

Additional props top^

Name	type	default	description
horizontal	Boolean	false	opens to the left
other-side	Boolean	false	opens to the bottom (or right with horizontal)

material-box top^

## whithin your module
components:
  "material-box": require("vue-materialize/material-box")
# or with bundle.js
  "material-box": window.vueMaterialize.materialBox

<material-box style="width:200px",src="some/image.jpg",thumb="some/thumb.jpg">
  <span slot="caption" style="color:white">a caption</span>
</material-box>

demo - source for demo - doc: vue-zoombox

modal top^

## whithin your module
components:
  "modal": require("vue-materialize/modal")
# or with bundle.js
  "modal": window.vueMaterialize.modal

<button> Open Modal
  <modal>
    <div class="modal-content">
      <h4>Header</h4>
      <p>Content</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-flat">close</button>
    </div class="modal-footer">
  </modal>
</button>

demo - source for demo - doc: vue-comps-modal

Additional props top^

Name	type	default	description
bottom-sheet	Boolean	false	opens from the bottom (see demo )

parallax top^

components:
  "parallax": require("vue-materialize/parallax")
# or with bundle.js
  "parallax": window.vueMaterialize.parallax

<parallax src="path/to/img">
  <div slot="loading">loading...</div>
  <div>content</div>
</parallax>

demo - source for demo - doc: vue-parallax

pushpin top^

components:
  "pushpin": require("vue-materialize/pushpin")
# or with bundle.js
  "pushpin": window.vueMaterialize.pushpin

<pushpin>
  <p>some fixed text</p>
</pushpin>

demo - source for demo - doc: vue-pushpin

scrollfire top^

## whithin your module
components:
  "scrollfire": require("vue-materialize/scrollfire")
# or with bundle.js
  "scrollfire": window.vueMaterialize.scrollfire

<scrollfire @entered="doSomething"></scrollfire>

demo - source for demo - doc: vue-scrollfire

scrollspy top^

## whithin your module
components:
  "scrollspy": require("vue-materialize/scrollspy")
  "scrollspy-item": require("vue-materialize/scrollspy-item")
# or with bundle.js
  "scrollspy": window.vueMaterialize.scrollspy
  "scrollspy-item": window.vueMaterialize.scrollspyItem

<scrollspy>
  <scrollspy-item target="idOfTarget">description of target</scrollspy-item>
  <scrollspy-item target="idOfOtherTarget">description of other target</scrollspy-item>
</scrollspy>

demo - source for demo - doc: vue-comps-scrollspy

side-nav top^

# somewhere
Vue.use(require('vue-touch'))

# in your component
components:
  "side-nav": require("vue-materialize/side-nav")
# or with bundle.js
  "side-nav": window.vueMaterialize.sideNav

<side-nav>
  <li><a>First Text</a></li>
</side-nav>

demo - source for demo - doc: vue-side-nav

toaster top^

# somewhere
Vue.use(require('vue-touch'))

# in your component
mixins:[
  require("vue-materialize/toaster")
  # or with bundle.js
  window.vueMaterialize.toaster
]

# in the instance (text is mandatory)
@toast(text:"I'm toast", classes:["toast","rounded"], timeout:4000, cb: ->)
  #do something on close

demo - source for demo - doc: vue-toaster

tooltip top^

# in your component
components:
  "tooltip": require("vue-materialize/tooltip")
# or, when using bundle.js
components:
  "tooltip": window.vueMaterialize.tooltip

<button>Hover me!
  <tooltip>Some information</tooltip>
</button>

demo - source for demo - doc: vue-comps-tooltip

waves top^

# somewhere
Vue.use(require('vue-touch'))

# in your component
components:
  "waves": require("vue-materialize/waves")
# or, when using bundle.js
components:
  "waves": window.vueMaterialize.waves

<button>Click or touch me!
  <waves></waves>
</button>

demo - source for demo - doc: vue-comps-waves

forms

radio top^

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked" class="with-gap">
<label for="two">Two</label>
<br>

demo - source for demo - doc: radio

checkbox top^

<input type="checkbox" id="one">
<label for="one">One</label>
<br>
<input type="checkbox" id="two" class="filled-in">
<label for="two">Two</label>
<br>

demo - source for demo - doc: checkbox

switch top^

components:
  "switch": require("vue-materialize/switch")
# or with bundle.js
  "switch": window.vueMaterialize.switch

<switch>
  <span slot="off">SomeOffLabel</span> <!-- defaults to Off -->
  <span slot="on">SomeOnLabel</span> <!-- defaults to On -->
</switch>

demo - source for demo - doc: vue-toggle

input-field top^

## whithin your module
components:
  "input-field": require("vue-materialize/input-field")
# or with bundle.js
  "input-field": window.vueMaterialize.inputField

<div class="row">
  <input-field class="s6" label="name"></input-field>
    <!-- optional -->
    <icon name="fa-user", slot="icon", class="prefix"></icon>
</div>
<!-- no wrapping row for textarea -->
<input-field class="s6" label="Some text" textarea></input-field>

demo - source for demo

Props top^

Name	type	default	description
autofocus	Boolean	false	autofocus
disabled	Boolean	false	disabled
readonly	Boolean	false	readonly
textarea	Boolean	false	use `<textarea>` instead of `<input>`
type	String	-	type for `<input>`
validate	Function	-	use for validating input, argument will be the current value
dataError	String	-	message to display on invalid input. Used with validate
dataSuccess	String	-	message to display on valid input. Used with validate
label	String	-	description of the input
value	String	-	preset the value
placeholder	String	-	sets a placeholder
length	Number	0	maximum length of input

Events top^

focus and blur are pass-through

Select top^

## whithin your module
components:
  "v-select": require("vue-materialize/select")
  "v-option": require("vue-materialize/select-option")
# or with bundle.js
  "v-select": window.vueMaterialize.select
  "v-option": window.vueMaterialize.selectOption

<v-select :value="value" @input="onInput">
  <v-option value="1">option 1/<v-option>
  <v-option value="2">option 2</v-option>
</v-select>

demo - source for demo - doc: vue-simple-select

Changelog

1.0.0
vue-toaster updated to 1.1.0 changelog
moved vue-icons to devDependencies
pointing main to build/index.js
0.4.1
added vue-simple-select as select - this need a reordering of the scss (see SCSS)
0.4.0
vue-zoombox updated to 1.0.0 changelog
vue-toaster updated to 1.0.0 changelog
vue-comps-scrollspy updated to 1.0.0 changelog
vue-pushpin updated to 1.0.0 changelog
vue-parallax updated to 1.0.0 changelog
vue-card updated to 1.1.0 changelog
0.3.0
vue-collapsible updated to 1.0.1 changelog
vue-side-nav updated to 1.1.0 changelog
vue-fixed-action-button updated to 1.1.0 changelog
added other-side prop for vue-materialize/fixed-action-button
vue-comps-waves updated to 1.0.0 changelog
vue-icons updated to 1.4.1 changelog
vue-scrollfire updated to 1.0.0 changelog
vue-comps-tooltip updated to 1.0.0 changelog
vue-comps-modal updated to 1.1.1 changelog
vue-comps-dropdown updated to 1.2.1 changelog