Need help with vue-foundation?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

213 Stars 44 Forks 68 Commits 10 Opened issues


VueJS + Foundation + Vue-Router + Webpack

Services available


Need anything else?

Contributors list


A boilerplate integrating Foundation for Sites and VueJS

This repository is an example of how to use Foundation for Sites in a Vue single-page application. The project is scaffolded using vue-cli, with the webpack template, and vue-router.

A detailed description of the project is available here.


The master branch is based on a recent vue-cli template, which makes use of Webpack 2. For a working configuration using Webpack 1, check out the webpackv1 branch

Build Setup

# install dependencies
npm install

serve with hot reload at localhost:8080

npm start

build for production with minification

npm run build


CSS setup resides in the


gets imported in every Vue component, through modified
(see vuejs-templates/webpack#149):
let scssOptions = {
    includePaths: [
    data: '@import "./src/styles/app";'

As a result, Foundation mixins are now available in Vue components, without the need for an

statement in every style declaration. In order for this to work, every CSS declaration in components needs to use SCSS:

is also imported: this is the original Foundation variables file. The only change required to make it work is the import path of Foundation

gets imported in the root component. It initializes Foundation, loads custom icon fonts and Motion UI.

is a modified Fontello build (all
s in
declaration). Instead of using the default
folder for assets, this project is configured to process fonts and images with custom loaders, in



JavaScript modules are being initialized and destroyed within the Vue component lifecycle hooks. Specifically the mounted hook is used to initialize each component while the destroyed hook is used to destroy them.

There is one exception to this rule; Tooltips are currently not being destroyed due to a bug in


You will also notice in the Vue components that a reference is added to the Vue object using

this.component = ...
. This is to allow the destroyed hook to be able to destroy the object without having to use the jQuery selector.

Example from the Accordion component:

export default {
  name: 'accordion',
  mounted() {
    this.accordion = new Foundation.Accordion($('#accordion'), {
      // These options can be declarative using the data attributes
      slideSpeed: 500,
      multiExpand: true,
  data() {
    return {
      msg: 'Accordion',
  destroyed() {


In order to work properly, Orbit needs the Motion UI library.


This component requires listening to Foundation custom events, setting a

on the hidden input will not work, as explained here: vuejs/vue#372

Change Log

Note: Versions based on the package.json version value

  • v3.0 [2017-09-26] Replaced single foundation import to plugin import.
  • v2.0 [2017-09-05] Upgraded to Foundation 6.4.3 including XY Grid support.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.