Material-ui-vue NPM

It's a trial, don't use it, it's unstable

This is a materializecss.com implementation with Vue.js.

document

install

npm install material-ui-vue --save
npm install vue --save
npm install webpack --saveDev
npm install vue-loader --saveDev

including materialize-css resources in your html

Download materialize-css resources from their official site or by npm. Include its css and js files, and jQuery as well, coz materialize.js is jquery based.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0 ">
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="materialize-css/css/materialize.min.css"  media="screen,projection"/>
    <title>Material-ui-vue Demo</title>
</head>
<body>
    <app></app>
    <script type="text/javascript" src="http://wedding.jackyang.me/static/javascripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="materialize-css/js/materialize.min.js"></script>
    <script type="text/javascript" src="build/bundle.js"></script>
</body>
</html>

write your material-ui-vue components

app.vue:

<template>
    <div class="row">
        <dropdown label="I am a dropdown" :large="true">
            <ul>
                <li><a href="#!">Inbox<badge>2</badge></a></li>
                <li class="divider"></li>
                <li><a href="#!">Outbox<badge new>2</badge></a></li>
            </ul>
        </dropdown>
    </div>
</template>

<script>
    module.exports = {
        components: {
            'dropdown': require('material-ui-vue/components/dropdown/dropdown.vue'),
            'badge': require('material-ui-vue/components/badges/badge.vue')
        }
    };
</script>

write your main js file to start Vue instance

main.js:

var Vue = require('vue');

new Vue({
    el: 'body',
    components: {
        app: require('./app.vue')
    }
});

add webpack.config.js

webpack.config.js:

'use strict';
var webpack = require('webpack');

module.exports = {
    entry: './main.js',
    output: {
        filename: './build/bundle.js',
    },
    module: {
        loaders: [
            {test: /\.vue$/, loader: 'vue'}
        ]
    }
}