JackGit / Material Ui Vue
Licence: mit
It is a materializecss.com implementation with Vue.js.
Stars: ✭ 142
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Material Ui Vue
crispy-forms-materialize
Django application to add materializecss support to django-crispy-forms
Stars: ✭ 20 (-85.92%)
Mutual labels: materializecss
Stopstalk Deployment
Stop stalking and start StopStalking 😉
Stars: ✭ 276 (+94.37%)
Mutual labels: materializecss
Smartshop
An e-commerce php/mysql website built from scratch (Deprecated)
Stars: ✭ 46 (-67.61%)
Mutual labels: materializecss
easy-materialize-rtl
Simple way to set RTL for materializecss.com.
Stars: ✭ 20 (-85.92%)
Mutual labels: materializecss
Materialize Sass
Materializecss rubygem for Rails Asset Pipeline / Sprockets
Stars: ✭ 785 (+452.82%)
Mutual labels: materializecss
brush
An amazing scaffolding for developing database-driven websites, applications and APIs. Built on Laravel Lumen Framework, MySQL and Angular.
Stars: ✭ 23 (-83.8%)
Mutual labels: materializecss
Moghya.github.io
personal website template for tech guys, all of the content is loaded from a json file no need to edit html/css set your data and ready to go. feel free to fork and make changes :)
Stars: ✭ 99 (-30.28%)
Mutual labels: materializecss
Login-Register-Template
Login - Register Example page | Dark Template
Stars: ✭ 83 (-41.55%)
Mutual labels: materializecss
Responsive led control
Responsive Led Control based on McLightning & Grisworld-Led-Controller with FastLED
Stars: ✭ 62 (-56.34%)
Mutual labels: materializecss
mithril-materialized
A Materialize-css library for the Mithril framework.
Stars: ✭ 22 (-84.51%)
Mutual labels: materializecss
laravel-materialize-css
Materialize CSS Framework for Laravel 5
Stars: ✭ 45 (-68.31%)
Mutual labels: materializecss
defe
devfeed is a Tech feed Aggregator for Developers & Tech Enthusiasts
Stars: ✭ 28 (-80.28%)
Mutual labels: materializecss
django-materializecss-form
Materializecss for Django Form
Stars: ✭ 83 (-41.55%)
Mutual labels: materializecss
Gramateria
Drag and drop web builder with material design.
Stars: ✭ 310 (+118.31%)
Mutual labels: materializecss
Opencart Materialize
Template for OpenCart with Materialize
Stars: ✭ 117 (-17.61%)
Mutual labels: materializecss
Yii2 Materializecss
Integration of materializecss into Yii2
Stars: ✭ 93 (-34.51%)
Mutual labels: materializecss
Netcore Postgres Oauth Boiler
A basic .NET Core website boilerplate using PostgreSQL for storage, Adminer for db management, Let's Encrypt for SSL certificates and NGINX for routing.
Stars: ✭ 57 (-59.86%)
Mutual labels: materializecss
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 >Inbox<badge>2</badge></a></li>
<li class="divider"></li>
<li><a >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'}
]
}
}
build bundle.js
webpack
Now you can test your index.html in browser.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].