Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: 23 days 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 6 years ago)
Default Branch: master
Last Pushed: 2017-11-20T19:54:48.000Z (over 6 years ago)
Last Synced: 2024-05-19T07:21:42.813Z (about 1 month 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

Lists

awesome-nuxt - Xui - Light module to help design websites with Nuxt. (Uncategorized / Uncategorized)
awesome-nuxt - Xui - Light module to help design websites with Nuxt. (Uncategorized / Uncategorized)
awesome-nuxt - Xui - Light module to help design websites with Nuxt. (Uncategorized / Uncategorized)
awesome-nuxt - Xui - Light module to help design websites with Nuxt. (Uncategorized / Uncategorized)

README

        # xui-module

[![npm (scoped with tag)](https://img.shields.io/npm/v/xui-module/latest.svg?style=flat-square)](https://npmjs.com/package/xui-module)

[![npm](https://img.shields.io/npm/dt/xui-module.svg?style=flat-square)](https://npmjs.com/package/xui-module)

[![CircleCI](https://img.shields.io/circleci/project/github/.svg?style=flat-square)](https://circleci.com/gh/)

[![Codecov](https://img.shields.io/codecov/c/github/.svg?style=flat-square)](https://codecov.io/gh/)

[![Dependencies](https://david-dm.org//status.svg?style=flat-square)](https://david-dm.org/)

[![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](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