industrial-ui-vue
v0.6.0
Published
Production-oriented styleless, pure functional UI components with Vue.js
Downloads
9
Maintainers
vanishmaxReadme
Industrial-ui Vue adaptation
Usage
1. UNPKG
You can install Industrial-ui straight into plain HTML file:
<!DOCTYPE html>
<html>
<head>
<!-- Import your styles -->
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<iui-button>Hello, world!</iui-button>
</div>
</body>
<!-- Import Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--
Create Industrial-ui configuration.
It is important to have exactly IuiConfig variable name!
-->
<script>
const IuiConfig = {
globalClass: '',
components: { ... },
},
};
</script>
<!-- Import industrial-ui-vue and register as a Vue plugin -->
<script src="https://unpkg.com/industrial-ui-vue"></script>
<!-- Initialize Vue app -->
<script>
new Vue({
el: '#app',
})
</script>
</html>NPM
Firstly, install the library itself
npm i industrial-ui-vue3. With local imports (recommended)
You need to register the Industrial-ui plugin that would expose the $iui instance into Vue virtual machine. Create config file and install the plugin into the Vue entry:
import Vue from 'vue';
import config from './config';
import {iui} from 'industrial-ui-vue';
Vue.use(iui, config);In any template file, you can now directly import needed components and use them as you like:
<template>
<Dropdown>
<template #trigger>
<Button>Click on me</Button>
</template>
Hello, world!
</Dropdown>
</template>
<script>
import { IuiDropdown as Dropdown, IuiButton as Button } from 'industrial-ui-vue';
export default {
components: { Dropdown, Button },
};
</script>3. As a global plugin
In this case, Industrial-ui would be registered globally, and all components will be imported at once.
Install the IUI plugin with your configuration. Go to the main vue file and do:
import Vue from 'vue';
import config from './config';
import iui from 'industrial-ui-vue';
Vue.use(iui, config);Now, you are ready to use components inside the app:
<template>
<iui-dropdown>
<template #trigger>
<iui-button>Click on me</iui-button>
</template>
Hello, world!
</iui-dropdown>
</template>