https://github.com/blueoakjs/vue2-foundation
Vue 2.x component wrappers for Foundation 6 widgets
https://github.com/blueoakjs/vue2-foundation
foundation vue vuejs widgets zurb-foundation
Last synced: 5 months ago
JSON representation
Vue 2.x component wrappers for Foundation 6 widgets
- Host: GitHub
- URL: https://github.com/blueoakjs/vue2-foundation
- Owner: BlueOakJS
- License: mit
- Created: 2017-02-03T15:10:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-29T19:27:06.000Z (about 8 years ago)
- Last Synced: 2025-04-30T05:48:27.902Z (5 months ago)
- Topics: foundation, vue, vuejs, widgets, zurb-foundation
- Language: Vue
- Homepage: https://blueoakjs.github.io/vue2-foundation/
- Size: 490 KB
- Stars: 11
- Watchers: 4
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue2-foundation
Vue 2.x component wrappers for Foundation 6 widgets
## Usage
### Install the package.
```
npm i vue2-foundation jquery --save
npm i node-sass sass-loader --save-dev
```### Add an alias in your webpack configuration for the components:
``` javascript
module.exports = {
resolve: {
alias: {
'vf': 'vue2-foundation/components'
}
}
}
```### Load the Foundation Javascript and SCSS code:
loadFoundation.scss:
``` scss
@import '../node_modules/foundation-sites/scss/foundation';
@include foundation-everything()
```main.js:
``` javascript
require('script-loader!jquery')
require('script-loader!foundation-sites/dist/js/foundation.js')
require('./loadFoundation.scss');
```### Import and use the components in a .vue file:
``` vue
Settings
import FoButton from 'vf/FoButton';
export default {
name: 'foo',components: {
FoButton
}
}```
## Building the documentation website
``` bash
# 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