Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

BlueOakJS/vue2-foundation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

32 Commits

Repository files navigation

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:

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-loader!jquery')
require('script-loader!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

About

Vue 2.x component wrappers for Foundation 6 widgets

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

AltStyle によって変換されたページ (->オリジナル) /