https://github.com/metacorp/xui-module
Light module to help design websites with Nuxt.
https://github.com/metacorp/xui-module
anima bulma headroom nuxt viewport-directive vue-scrollactive vuejs xui
Last synced: 2 months ago
JSON representation
Light module to help design websites with Nuxt.
- Host: GitHub
- URL: https://github.com/metacorp/xui-module
- Owner: MetaCorp
- License: mit
- Created: 2017-10-08T14:36:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-20T19:54:48.000Z (over 7 years ago)
- Last Synced: 2024-10-10T14:55:12.022Z (6 months ago)
- Topics: anima, bulma, headroom, nuxt, viewport-directive, vue-scrollactive, vuejs, xui
- Language: JavaScript
- Homepage: https://hidden-earth-46741.herokuapp.com/
- Size: 86.9 KB
- Stars: 43
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# xui-module
[](https://npmjs.com/package/xui-module)
[](https://npmjs.com/package/xui-module)
[](https://circleci.com/gh/)
[](https://codecov.io/gh/)
[](https://david-dm.org/)
[](http://standardjs.com)
> Light module to help design websites with Nuxt. [demo](https://hidden-earth-46741.herokuapp.com/) [source](https://github.com/MetaCorp/nuxt-xui)
[📖 **Release Notes**](./CHANGELOG.md)
## Features
This module install several libraries to make designing a website with Vue and Nuxt easy, including:
+ [Bulma](https://github.com/jgthms/bulma) ([website](http://bulma.io/))
+ [Animate.css](https://github.com/daneden/animate.css/) ([website](https://daneden.github.io/animate.css/))
+ [Hover.css](https://github.com/IanLunn/Hover) ([website](http://ianlunn.github.io/Hover/))
+ [Material Design Icons](https://github.com/google/material-design-icons) ([website](https://material.io/icons/))
+ [Headroom.js](https://github.com/WickyNilliams/headroom.js/) ([website](http://wicky.nillia.ms/headroom.js/)) ([playground](http://wicky.nillia.ms/headroom.js/playroom/))
+ [Vue-scrollactive](https://github.com/eddiemf/vue-scrollactive) ([demo](https://eddiemf.github.io/vue-scrollactive/examples/example-1.html))
+ [Vue-in-viewport-directive](https://github.com/BKWLD/vue-in-viewport-directive)
## Setup
- Add `xui-module` dependency using yarn or npm to your project
```sh
yarn add xui-module
```
or
```sh
npm install xui-module --save
```
- Add `xui-module` to `modules` section of `nuxt.config.js`
```js
{
modules: [
// Simple usage
'xui-module',
// With options
['xui-module', { /* module options */ }],
]
}
```
- If needed, add sass-loader
```sh
yarn add sass-loader node-sass
```
or
```sh
npm install sass-loader node-sass --save-dev
```
## Module Options
You can parametrize Xui-module with these variables:
- 'bulma'
- 'mdi'
- 'animate.css'
- 'hover.css'
- 'animate'
- 'spacing'
- 'vue-in-viewport-directive'
- 'vue-scrollactive'
- 'vue-headroom'
example:
```js
{
'bulma': {
options: { /* bulma options */ }
},
'mdi': {
active: false // Do not load Material Design Icons
},
'vue-scrollactive': {
ssr: false // Turn off ssr for vue-scrollactive
}
}
```
## License
[MIT License](./LICENSE)
Copyright (c) Meta