vue2-foundation

Vue 2.x component wrappers for Foundation 6 widgets

Usage

Install the package.

npm i vue2-foundation --save npm i node-sass --save-dev

Add an alias in your webpack configuration for the components:

module.exports = {
  resolve: {
    alias: {
      'vf': 'vue2-foundation/components'
    }
  }
}

Load the Foundation Javascript and SCSS code:

loadFoundation.scss:

@import '../node_modules/foundation-sites/scss/foundation';
@include foundation-everything()

main.js:

require('script!jquery')
require('script!foundation-sites/dist/js/foundation.js')
require('./loadFoundation.scss');

Import and use the components in a .vue file:

<template>
    <fo-button :to="{ name: 'settings' }">Settings</fo-button>
</template>
 
<script>
import FoButton from 'vf/FoButton';
 
export default {
    name: 'foo',
 
    components: {
        FoButton
    }
}
</script> 

Building the documentation website

# install dependencies
npm install
 
# serve with hot reload at localhost:8080
npm run dev
 
# build for production with minification
npm run build

LICENSE

Copyright (c) 2016-2017 PointSource, LLC. MIT Licensed