Need help with material-ui-vue?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

JackGit
142 Stars 13 Forks MIT License 118 Commits 3 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 143,702
Vue.js
HTML
CSS
h5
115 commits

npm version

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

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

document

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:

<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>


<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>

write your material-ui-vue components

app.vue: ```

### 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'} ] } } ```

build bundle.js

webpack

Now you can test your index.html in browser.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.