xui-module

Light module to help design websites with Nuxt. demo source

📖 Release Notes

Features

This module install several libraries to make designing a website with Vue and Nuxt easy, including:

• Bulma (website)
• Animate.css (website)
• Hover.css (website)
• Material Design Icons (website)
• Headroom.js (website) (playground)
• Vue-scrollactive (demo)
• Vue-in-viewport-directive

Setup

• Add xui-module dependency using yarn or npm to your project

yarn add xui-module

or

npm install xui-module --save

• Add xui-module to modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    'xui-module',

    // With options
    ['xui-module', { /* module options */ }],
 ]
}

• If needed, add sass-loader

yarn add sass-loader node-sass

or

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:

{
  '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

Copyright (c) Meta l.szabatura@gmail.com