AmazeUI components built with vue.js
npm install amazeui-vue
It's recommended to use vuejs + webpack + amazeui-vue !
The build-all-in-one file is in the 'dist' folder.
<body>
<!-- hello world -->
<!-- remember to add vue.js lib and amazeui styles -->
<link rel="stylesheet" href="path/to/amazeui.css">
<script src="path/to/vue.js"></script>
<!-- include amazeui-vue -->
<script src="path/to/amazeui-vue.js"></script>
<script>
// important !!! remember to use amazeui as a vuejs plugin
Vue.use(amazeuiVue);
// now you can use it as you like
</script>
</body>This repository is built to use Amaze UI as Vue.js components, without jQuery requirement.
If you are not familiar with vue.js, you can learn from the vue.js official site.
If you want to use the react version, you can find it here, it's developed by the amazeui team.
- vue.js ^1.0.7
Vue.js 1.0.0 is released! Amazeui-vue now requires vue.js@^1.0. If you are upgrading your vue.js project to 1.0 version from 0.12, this article may help you learn some important changes.
New
Now amazeui-vue use webpack-dev-server to run the examples.What you need to do is just npm run dev and then open your favourite browser and access http://localhost:9999.
And hot-reload is support too.
gridcolumncontaineramButtonbuttonGroupamFormamInputcheckboxradioamSelectpanellistmodalalertconfirmprompticonbadgepaginationarticletabtopbar
dateTimePickerslidernprogress
You must register the components before you can use amazeui-vue.
You can register the components globally or locally:vue.js: using components
amazeui-vue exports an install function so taht you can register it as a plugin for vue.js. You can do it like this:
Vue.use(require('amazeui-vue').install);and then amazeui-vue components will be registered globally, and they will be load synchronously.
If you want to use amazeui-vue as asyn components, use the install-async function:
Vue.use(require('amazeui-vue').installAsync);sync
import amButton from 'amazeui-vue/src/button/am-button.vue'; // you may need babel-loader to do it like this
// or
// var amButton = require('amazeui-vue').button;
// ...
export default {
components: {
"amButton": amButton
}
}async (with webpack)
export default {
components: {
"amButton": function(resolve) {
require(['amazeui-vue/src/button/am-button.vue'], resolve)
}
}
}